Bootstrap

What is bootstrap

Bootstrap is a css framework. It provides a grid, some components and some sass variables and mixins. This is very convenient for fast developement. This website shows some grid and sass features. The components are useful for a quick frontend but we lose the graphical identity. My goal is to show that we can use bootstrap without losing our identity.

Mobile first

Bootstrap provides responsive breakpoints. That means that we can adapt the size of our elements depending on the screen size.

The strategy chosen by bootstrap is mobile first. If we don't specify any breakpoint, the size will apply to all screen sizes beginning by the smallest. If we specify one, the spacing will apply to the one that is specified and the bigger ones. Thus you need to think about what happens when the screen size increase.

The Grid

  <div class="container">
    <div class="row">
      <div class="col">
        1 of 3
      </div>
      <div class="col-6">
        2 of 3 (wider)
      </div>
      <div class="col">
        3 of 3
      </div>
    </div>
  </div>

1 of 3

2 of 3 (wider)

3 of 3

  <div class="container">
    <div class="row">
      <div class="col d-none d-md-flex">
        1 of 3
      </div>
      <div class="col-md-8 col-12">
        2 of 3 (wider)
      </div>
      <div class="col d-none d-md-flex">
        3 of 3
      </div>
    </div>
  </div>

1 of 3

2 of 3 (wider)

3 of 3

  <div class="container">
    <div class="row">
      <div class="col d-none d-md-flex">
        1 of 3
      </div>
      <div class="col-md-8 col-10 offset-1 offset-md-0">
        2 of 3 (wider)
      </div>
      <div class="col d-none d-md-flex">
        3 of 3
      </div>
    </div>
  </div>

1 of 3

2 of 3 (wider)

3 of 3

Horizontal alignment

  <div class="container">
    <div class="row justify-content-start">
      <div class="col-4">One of two columns</div>
      <div class="col-4">One of two columns</div>
    </div>
    <div class="row justify-content-center">
      <div class="col-4">One of two columns</div>
      <div class="col-4">One of two columns</div>
    </div>
    <div class="row justify-content-end">
      <div class="col-4">One of two columns</div>
      <div class="col-4">One of two columns</div>
    </div>
    <div class="row justify-content-around">
      <div class="col-4">One of two columns</div>
      <div class="col-4">One of two columns</div>
    </div>
    <div class="row justify-content-between">
      <div class="col-4">One of two columns</div>
      <div class="col-4">One of two columns</div>
    </div>
  </div>

One of two columns

Vertical alignment

  <div class="container">
    <div class="row align-items-start">
      <div class="col">One of three columns</div>
      <div class="col">One of three columns</div>
      <div class="col">One of three columns</div>
    </div>
    <div class="row align-items-center">
      <div class="col">One of three columns</div>
      <div class="col">One of three columns</div>
      <div class="col">One of three columns</div>
    </div>
    <div class="row align-items-end">
      <div class="col">One of three columns</div>
      <div class="col">One of three columns</div>
      <div class="col">One of three columns</div>
    </div>
  </div>

One of three columns

Sass mixins (custom class)

We have this mixin:

.example-content-main {
  @include make-col-ready();

  @include make-col(6);

  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

So those two codes should render the same way:

  <div class="example-content-main">
    <!-- content here -->
  </div>

  <div class="container-fluid" style="padding-right: 0px;padding-left: 0px;">
    <div class="col-6 col-lg-8">
      <!-- content here -->
    </div>
  </div>

As you can see the only difference is a padding because of the .container class. That's why we remove it the bad way. We could also add some padding in the .example-content-main but that's not what we want in the current example. Another option would be to @extend .container-fluid.

.container-fluid-no-padding {
  @extend .container-fluid;

  padding-right: 0px;
  padding-left: 0px;
}

  <div class="container-fluid-no-padding">
    <div class="col-6 col-lg-8">
      <!-- content here -->
    </div>
  </div>