Page Comparison

...

1. .container: This class creates a responsive, fixed-width container that centers the content within the viewport. A container is necessary to hold rows and columns.

2. .row: This class is used to create a horizontal block that contains columns. Rows should always be placed inside a container.

3. Column classes: Columns are defined using a combination of class prefixes and numbers to represent the desired screen size and the number of columns the content should span. There are four class prefixes: col-xs-, col-sm-, col-md-, and col-lg-. The number following the prefix (1-12) represents the number of columns the content should occupy.

Grid System Examples:

• .col-xs-12: Spans 12 columns (full width) on extra-small screens (phones).

  Image Added

• .col-sm-6: Spans 6 columns (half width) on small screens (tablets).

  Image Added

• .col-md-4: Spans 4 columns (one-third width) on medium screens (desktops).

  Image Added

• .col-lg-3: Spans 3 columns (one-fourth width) on large screens (larger desktops).

  Image Added

• These classes can be combined to create more dynamic and flexible layouts.

  Image Added

In the code snippet example below, using the class “class="col-xs-12 col-sm-6 col-md-4 col-lg-3“, the content will span the entire width on extra-small screens, half the width on small screens, one-third of the width on medium screens, and one-fourth of the width on large screens.

Code Snippet Example:

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">

  <!-- Content goes here -->

</div>

...

To create a two-column row, we will use the "col-sm-6" class, which divides the row into two equal-width columns. The content will span half the width on small screens (tablets) and retain this layout on medium and large screens.

Code Snippet Example:

<div class="container">
   <div class="row">
     <div class="col-sm-6">

      <strong>One of two columns</strong>

      <p>Content goes here.</p>
     </div>

    <div class="col-sm-6">
       <strong>Two of two columns</strong>
       <p>Content goes here.</p>
     </div>
   </div>

</div>

Image Modified

Creating a Three-Column Row

To create a three-column row, we will use the "col-sm-4" class, which divides the row into three equal-width columns. The content will span one-third of the width on small screens (tablets) and retain this layout on medium and large screens.

Code Snippet Example:

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <strong>One of three columns</strong>
      <p>Content goes here.</p>
  </div>

  <div class="col-sm-4">
    <strong>Two of three columns</strong>
    <p>Content goes here.</p>
  </div>

  <div class="col-sm-4">
    <strong>Three of three columns</strong>
    <p>Content goes here.</p>
    </div>
  </div>

</div>

...

Creating a Four-Column Row

To create a four-column row, we will use the "col-sm-3" class, which divides the row into four equal-width columns. The content will span one-fourth of the width on small screens (tablets) and retain this layout on medium and large screens.

Code Snippet Example:

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      <strong>One of four columns</strong>
      <p>Content goes here.</p>
    </div>

    <div class="col-sm-3">
      <strong>Two of four columns</strong>
      <p>Content goes here.</p>
    </div>

    <div class="col-sm-3">
      <strong>Three of four columns</strong>
      <p>Content goes here.</p>
    </div>
    
    <div class="col-sm-3">
      <strong>Four of four columns</strong>
      <p>Content goes here.</p>
      </div>
    </div>
  </div>

...

\uD83D\uDCCB Related articles

...