Buttons

Layout

    <div class="row">
    	<div class="col-xs-12 col-md-6 col-lg-3">
    		Col #1
    	</div>
    	<div class="col-xs-12 col-md-6 col-lg-3">
    		Col #2
    	</div>
    	<div class="col-xs-12 col-md-6 col-lg-3">
    		Col #3
    	</div>
    	<div class="col-xs-12 col-md-6 col-lg-3">
    		Col #4
    	</div>
    </div>

Spacing of items.

There are two ways to align items; vertically and horizontally. Flexbox has one way to deal with both of these 'issues'.

Whenever a container has the class "row" it means that it's children are inside a grid (flexgrid). This means that you can move these children around using different classes on this container. To illustrate:

Alignment (horizontally)

Let's add classes to show how it works.

.start-xs/.start-md/.start-l

Using either of the classes of .start you can horizontally align items to the START of the parent. (As you can see down Below the white box is aligned to the start). The xs, md and l means WHEN it should do so responsive wise. If you put .start-xs and .end-l it means that on mobile and tablet it will align to the start and on desktop it will align to the end.

        <div class="row start-xs">
            <div class="box"></div>
        </div>

.center-xs/.center-md/.center-l

Same story as with the .start class now everything aligns in the middle.

        <div class="row center-xs">
            <div class="box"></div>
        </div>

.end-xs/.end-md/.end-l

Same story as with the .start and .center class now everything aligns to the end.

        <div class="row end-xs">
            <div class="box"></div>
        </div>

Alignment (vertically)

There is also vertical alignment ofcourse. This is shown below:

.top-xs/.top-md/.top-l

Below you can see two divs. There's one that's 150px high, and one that is 50px high (1/3). I've added the class .top-xs to the parent container. You can see that the big div stays unchanged, but the smaller div to the right aligns to the top.

        <div class="row around-xs top-xs">
            <div style="width: 45%; height: 150px; background: blue;"></div>
            <div style="width: 45%; height: 50px; background: blue;"></div>
        </div>

.middle-xs/.middle-md/.middle-l

.middle is the equivalent of .center, instead it aligns everything vertically in the middle.

        <div class="row around-xs middle-xs">
            <div style="width: 45%; height: 150px; background: blue;"></div>
            <div style="width: 45%; height: 50px; background: blue;"></div>
        </div>

.bottom-xs/.bottom-md/.bottom-l

.bottom is the equivalent of .end and aligns everything to the bottom, as you can see in the example below.

        <div class="row around-xs bottom-xs">
            <div style="width: 45%; height: 150px; background: blue;"></div>
            <div style="width: 45%; height: 50px; background: blue;"></div>
        </div>

Distribution

As you might've seen in the previous example there is a class used that is called .around-xs. This is used to space items within a container a certain way. Below are examples.

.around-xs/.around-md/.around-l

Around is a spacing technique to give all children in a container an even amount of space.

        <div style="background-color: blue; padding: 10px; height: 100px;" class="row around-xs middle-xs">
            <div style="background-color: #FFF; width: 50px; height: 50px;"></div>
            <div style="background-color: #FFF; width: 50px; height: 50px;"></div>
            <div style="background-color: #FFF; width: 50px; height: 50px;"></div>
            <div style="background-color: #FFF; width: 50px; height: 50px;"></div>
            <div style="background-color: #FFF; width: 50px; height: 50px;"></div>
        </div>

.between-xs/.between-md/.between-l

Between is a spacing technique to align all children to the edge of the container (the little bit of space on the sides between the first and last square is padding on the container!

        <div style="background-color: blue; padding: 10px; height: 100px;" class="row between-xs middle-xs">
            <div style="background-color: #FFF; width: 50px; height: 50px;"></div>
            <div style="background-color: #FFF; width: 50px; height: 50px;"></div>
            <div style="background-color: #FFF; width: 50px; height: 50px;"></div>
            <div style="background-color: #FFF; width: 50px; height: 50px;"></div>
            <div style="background-color: #FFF; width: 50px; height: 50px;"></div>
        </div>

.flex-column-between-xs/.flex-column-between-md/.flex-column-between-l

This is mainly used for content. Imagine you have a container with content (a title, paragraph and two buttons). The title and content need to be align vertically to the top, but the buttons need to be aligned to the bottom. Then you can use .flex-column-between-xs/.flex-column-between-md/.flex-column-between-l

Fontawesome

<ul class="fa-ul">
    <li><i class="fa-li fas fa-check-square"></i>List icons</li>
    <li><i class="fa-li fas fa-check-square"></i>can be used</li>
    <li><i class="fa-li fas fa-spinner fa-spin"></i>as bullets</li>
    <li><i class="fa-li fas fa-square"></i>in lists</li>
</ul>
            

<i class="fas fa-camera-retro blue fa-lg"></i> fa-lg
<i class="fas fa-camera-retro yellow fa-2x"></i> fa-2x
<i class="fas fa-camera-retro green fa-3x"></i> fa-3x
<i class="fas fa-camera-retro blue fa-4x"></i> fa-4x
<i class="fas fa-camera-retro orange fa-5x"></i> fa-5x

Spacing

Widths