Bootstrap 4 Fixed Layout

Last Updated : 01 Feb, 2022

Bootstrap is a free and open-source tool collection for creating responsive websites and web applications. This is the most popular HTML, CSS, and JavaScript framework for developing responsive websites. It solves the cross-browser compatibility issue.

The following class sets a maximum width at each responsive breakpoint.

Syntax:

.container

Bootstrap Fixed Layout: This type of layout makes website page designs dependent on a decent number of pixels, container width differs depending upon the viewport width and the format is responsive. The most common way of creating the fixed layout begins with the “.container” class. You can make a row with the “.row” class to wrap the even gatherings of segments. Rows will be inserted inside a “.container” (fixed-width) for legitimate arrangement and padding.

Example: The following example explains a fixed layout using Bootstrap 4.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
   <meta charset="utf-8"> 
   <meta name="viewport" 
         content="width=device-width,  
                  initial-scale=1,  
                  shrink-to-fit=no"> 
   <title>Bootstrap 4 Fixed Layout</title> 
   <link rel="stylesheet" 
         href= 
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> 
   <link rel="stylesheet" 
         href= 
"https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
   <script src= 
"https://code.jquery.com/jquery-3.5.1.min.js"> 
    </script> 
    <script src= 
"https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"> 
    </script> 
    <script src= 
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"> 
    </script> 
</head> 
<body> 
    <nav class="navbar navbar-expand-md 
                navbar-dark bg-success mb-3"> 
      <div class="container"> 
          <a href="#" class="navbar-brand mr-3">GeeksforGeeks</a> 
          <button type="button" 
                  class="navbar-toggler" 
                  data-toggle="collapse" 
                  data-target="#navbarCollapse"> 
            <span class="navbar-toggler-icon"></span> 
          </button> 
        <div class="collapse navbar-collapse"
             id="navbarCollapse"> 
          <div class="navbar-nav"> 
            <a href="#" class="nav-item nav-link active"></a> 
            <a href="#" class="nav-item nav-link">Courses</a> 
            <a href="#" class="nav-item nav-link">DSA</a> 
            <a href="#" class="nav-item nav-link">Articles</a> 
            <a href="#" class="nav-item nav-link">Jobs</a> 
            <a href="#" class="nav-item nav-link">Student</a> 
            <a href="#" class="nav-item nav-link">Tutorials</a> 
          </div> 
        </div> 
      </div>    
    </nav> 
    <div class="container"> 
      <div class="jumbotron"> 
         <h1>Get Hired With GeeksforGeeks and  
           <strong>Win Exciting Rewards!</strong> 
         </h1> 
        <p class="lead"> 
          Imagine a situation of visiting a game parlor 
          or adventure park, having ultimate fun there, 
          and coming back home without paying a single  
          penny there and in fact, receiving some exciting 
          rewards or cash benefits from them.   
        </p> 
  
        <p><a href="#" 
              target="_blank" 
              class="btn btn-success btn-lg"> 
          Register here</a> 
        </p> 
  
      </div> 
      <div class="row"> 
        <div class="col-md-4"> 
          <h2>Basic Concepts For Data Science</h2> 
          <p> 
            Data Scientist is one of the most lucrative  
            career options that offers immense  
            job satisfaction,insanely high salary,  
            global recognition, and amazing growth  
            opportunities 
          </p> 
  
          <p><a href="#" 
                class="btn btn-success"> 
            Read More »</a> 
          </p> 
  
        </div> 
        <div class="col-md-4"> 
          <h2>Stock Market APIs For Developers</h2> 
          <p> 
            Stock Market is all about the exchange of 
            stocks (also pronounced as Shares) 
             between various buyers and sellers. 
             Since stocks of variable prices are prone 
          </p> 
  
          <p><a href="#" 
                class="btn btn-success"> 
            Read More »</a> 
          </p> 
        </div> 
        <div class="col-md-4"> 
          <h2>Is Quick Sort Algorithm Adaptive or not</h2> 
          <p> 
            Pre-Requisites: Quick Sort Algorithm Adaptiveness 
            in the Quick Sort Algorithm refers to the decision 
            that if we are given an array that is already  
            sorted 
          </p> 
  
          <p><a href="#" 
                class="btn btn-success"> 
            Read More »</a> 
          </p> 
        </div> 
      </div> 
    </div> 
</body> 
</html>