Understanding Container in Bootstrap

Before started:

You must have knowledge to insert bootstrap inside HTML head

Used:

Bootstrap 4

Result:

The left with container class and the right with container-fluid class
in Computer browser
The up with container class and the bottom with container-fluid class

Definition

  • container class provides a responsive fixed width container
  • container-fluid class provides a full width container, spanning the entire width of the viewport

Create container.html

Create container.html file and insert this code:

<body>
<div class="container">
  <h1>Belajar container</h1>
   <h2>Memahami class "container" apa bedanya dengan class "container-fluid"</h2>
  <p>Dingin Pagi-pagi, paling enak minum kopi tapi lagi puasa</p>
</div>
</body>

Create container_fluid.html

Create container_fluid.html and insert this code:

<body>

<div class="container-fluid">
  <h1>Belajar container-fluid</h1>
  <h2>Memahami class "container-fluid" apa bedanya dengan class "container"</h2>
   <p>Dingin Pagi-pagi, paling enak minum kopi tapi lagi puasa</p>
</div>

</body>

Thanks for reading

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *