Bootstrap 4 - Layout

user-pcr user-pcr
Feb 7, 2022 - 23:46
0 37
Bootstrap 4 - Layout

Bootstrap 4 uses container classes to wrap page content. It contains two container classes −

  • .container - Represents a fixed width container.

  • .container-liquid is a full width container.

.container - Represents a fixed width container.

.container-liquid is a full width container.

Container

The .container class is used to wrap the content of the page with a fixed width, and the content can be easily centered using the .container class as shown below.

<div class="container">
   ...
</div>

example

The example below specifies a simple web page with a fixed width container −

<html lang = "en" > <head> <!-- Meta tags --> <meta charset = "utf-8" > <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit=no" >   
   
      
         
            
      
      <!-- Bootstrap CSS --> <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity = "sha384-MCw98/ SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonymous" > <title> Bootstrap 4 Example </title> <style> . container { 
            background : #a52c644a; 
            text - align : center ; 
            padding - top :
          
            
            
           
      
      
           
            padding - bottom : 100px ; } </style> </head> 
            
      
   
   
   <body> <div class = "container" > <h2> Fixed Width Container </h2>
         
         
         This is a simple web page with fixed width container by using
         <code> .container </code> class.
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384- q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous" > </script>
          
            
           
      
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin = "anonymous" > </script>    
            
           
      
      
      < / script > _ _ _ _ _ _ _ _    
            
           
      
      
   </body> </html>

This will give the following result −

Exit

Liquid container

You can create a full width container using the .container-liquid class as shown below.

<div class="container-fluid">
   ...
</div>

The example below specifies a simple web page with a full width container.  

<html lang="en">
   <head>
      <!-- Meta tags -->
      <metacharset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      
      <!-- Bootstrap CSS -->
      <link rel="stylesheet"
         href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
         crossorigin="anonymous">
      <title>Bootstrap 4 Example</title>
       <style>
         .container-fluid {
            background: #a52c644a;
            text-align: center;
            padding-top: 100px;
            padding-bottom: 100px
         }   
      </style>
   </head>
   
   <body>
      <div class="container-fluid">
         <h2>Full Width Container</h2>
         This is a simple web page with full width container by using
         <code>.container-fluid</code> class.
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
         crossorigin="anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
         integrity =" sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
         crossorigin="anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
         crossorigin="anonymous">
      </script>
      
   </body>
</html>

This will give the following result −