Open In App

Bootstrap 4 Fluid Layout

Improve
Improve
Like Article
Like
Save
Share
Report

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=
       <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-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:

 



Last Updated : 24 Dec, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads