Bootstrap 4 Fixed Layout - GeeksforGeeks

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>
Output:
surindertarika1234
Bootstrap-4
Bootstrap-Questions
Picked
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
List group in bootstrap with examples
How to toggle password visibility in forms using Bootstrap-icons ?
BootStrap | Positioning an element with Examples
How to prevent inline-block divs from wrapping ?
How to use Bootstrap Datepicker to get date on change event ?
Express.js express.Router() Function
Installation of Node.js on Linux
How to set input type date in dd-mm-yyyy format using HTML ?
Differences between Functional Components and Class Components in React
How to create footer to stay at the bottom of a Web page?