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.
<!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: