From the course: Bootstrap 4 Layouts: Responsive Single-Page Design
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Creating an icon layout - Bootstrap Tutorial
From the course: Bootstrap 4 Layouts: Responsive Single-Page Design
Creating an icon layout
- [Instructor] After the last lab, we're going to go back to something a little bit simpler, just a regular three-column layout, but I want to show you how you can create your own custom icons. So far, we have been using icons from the Font Awesome library. Occasionally, you want to use your own. And, to do that, what you want is generally something like an .svg file that can be resized nicely, like this one. Then, you want to create your own icon class. I've already got this article right here with an I.D. of page-iconcolumns, it's a little bit tough to mention this. Already have the page-section class, We'll just do a really simple three-column layout here. We'll get started by creating the section tag here, and this section tag is going to have a class of layout-iconcolumns. Because this is going to be a three-column layout, I need to have some sort of container. I'm also going to use the padding "y" class, and put five units, which should be about three ems. Then grab all these…
Contents
-
-
-
-
Using a multicolumn format17m 26s
-
(Locked)
Working with the media component10m 2s
-
(Locked)
Creating a grid of photos7m 10s
-
(Locked)
Working with carousels11m 49s
-
(Locked)
Nesting a layout14m 6s
-
(Locked)
Creating an icon layout9m 14s
-
(Locked)
Floating layout elements11m 1s
-
(Locked)
Using the card layout classes9m 24s
-
-
-
-