Section

A simple container to divide your page into sections. Section utility classes apply to all breakpoints, from xs to xl.


Sizes

.section-0

.section-1

.section-2

.section-3

.section-4

<section class="section-0 bg-success-light">
  <div class="container">
    <h1>.section-0</h1>
  </div>
</section>
 
<section class="section-1 bg-success-light">
  [...]
</section>
 
<section class="section-2 bg-success-light">
  [...]
</section>
 
<section class="section-3 bg-success-light">
  [...]
</section>
 
<section class="section-4 bg-success-light">
  [...]
</section>

Direction

.section-t-1

.section-b-3

<section class="section-2 section-b-0 bg-success-light">
  [...]
</section>

Responsiveness

.section-0

.section-sm-1

.section-md-2

.section-lg-3

.section-xl-4

<section class="section-0 section-sm-1 section-md-2 section-lg-3 section-xl-4 bg-success-light">
  <div class="container">
    <h1>.section-0</h1>
    <h1>.section-sm-1</h1>
    <h1>.section-md-2</h1>
    <h1>.section-lg-3</h1>
    <h1>.section-xl-4</h1>
  </div>
</section>