Skip to content
Related Articles

Related Articles

Bootstrap 4 Fixed Layout

Improve Article
Save Article
Like Article
  • 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=
   <link rel="stylesheet" 
         href=
   <script src=
    </script>
    <script src=
    </script>
    <script src=
    </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>

Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!