Apply a Flexbox Layout with Boostrap to a Group of Icons

[00:00] Create a section with an ID of icons. I want to have the auto margin that container provides, so create a div with a class of container. I'll also move the section down a little by adding some margin at the top. I'll add a header to this section with an h two and title it Different Types of [00:19] Hikes. To hold all of our images, create a div, then add an image element with a height and width of 200. [00:39] Duplicate that 4 more times and add the images from the images slash flexbox icons folder as the sources and make sure to add an alt for each image. [01:06] Right now, you can see the images are left aligned. If you resize the screen, they will overflow to the next row, but we want to add some spacing and add them to a grid. This is where we are going to implement Flexbox using Bootstrap's display class. Display gives you many options like hiding elements or using CSS Grid. I'll have a link to the documentation for [01:26] display in the description. For flexbox and the div holding our images, add a class where we can set the display to flex. To allow it to wrap, instead of being stuck in a line, add flex dash wrap. Flex also gives us access to gap. I'll space it out with a gap of 4, center the elements using justify [01:46] content center, and add a little margin to the top to separate it from the title using margintop dash 3. Now all of our images are sorted in a perfect grid that dynamically responds to the screen size changing. I want to show a couple other things really fast to make our images a little more interesting. We can round the [02:06] corners of our images by adding the rounded class. You can choose how much you want your corners rounded by adding a dash and a number of 1 through 5 or adding top, bottom, start, or end to round different sides of your images. I'll just use the default rounded for this course. We can also make them pop out from the screen [02:26] a little bit by using shadow, which also has multiple options such as none, small, and large. Again, I'm just going to use the default shadow. There we go, a section completely controlled and organized by flexbox.