Bootstrap 4 Fluid Layout - GeeksforGeeks

24 Dec, 2021
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 many issues which we had once, one of which is the cross-browser compatibility issue.
The following class is used for fluid layout. It sets a width of 100% at all breakpoints.
Syntax:
.container-fluid, 
Bootstrap Fluid layout: In Bootstrap you can utilize the class “.container-fluid” to make fluid formats to use the 100% width of the viewport across all gadgets. The class “.container-fluid” essentially applies the “width:100%” rather than various widths for various viewport sizes. In any case, the design will be responsive and you can utilize the framework classes obviously. 
Example: This example will make a fluid design that covers 100% of the width of the screen 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 Fluid 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-fluid">        <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-fluid">      <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.
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
Tailwind CSS vs Bootstrap
How to keep gap between columns using Bootstrap?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?