Web layout with Bootstrap 4 - Part 1

#webdev #css #html

I've been using bootstrap with all my web project and with bootstrap 4 and Flexboxes I had to re-learn the framework again so I took a refresher course and this what I learned.

Flex containers - These are the main containers that are defined as the main container for all the elements.

<div class="d-flex">
  <!--content-->
</div>

Row vs column containers - There are two types of containers flex-row which aligns your content horizontally and flex-column for aligning your content vertically

<div class="flex-row">
   <!--align content horizontally-->
</div>

<div class="flex--column">
   <!--align content vertically-->
</div>

Container direction - To reverse content from left-to-right.

<div class="flex-row-reverse">
  <!--reverse content from left to right-->
</div>

Bootstrap sizes - Then you have bootstrap sizes with start from 0, 25, 50 , and 100. keep in mind is you can't just enter in any number by default. You can enter in 25, 0, 50, 75, or 100. If I wanted to create my own custom class,

<div class="d-flex">
        <div class="w-25">
            <img src="images/shutterstock_422560537.jpg" class="img-fluid">
        </div>
        <div class="w-75">
            <h4>Title Section</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisl eros, 
                </p>
            <a href="#" class="btn btn-button">Learn more</a>
        </div>
    </div>

Thank you for reading . :)