How to create full width container using bootstrap?
Last Updated :
05 May, 2022
We can create full width container using “container-fluid” class of bootstrap
Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it’s 100% wide all the time). container-fluid class can be used to get full width container.
container-fluid class provides a full-width container which spans the entire width of the viewport. In the below example, the div with class “container-fluid” will take-up the complete width of the viewport and will expand or shrink when ever the viewport is resized.
Method:
Basically we have to create a <div></div> (not necessary to be a div but it’s better if we use div) to which we have to give a class container-fluid(or container depends, upon the width) and put all the text inside that div which we want collectively to be in a container
Syntax:
- .container- max-width changes at each breakpoint
<div class=”container”> <!– Content here –> </div>
- .container-fluid- 100% width
<div class="container-fluid">
<!-- Content here -->
</div>
Example:
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">
<link rel="stylesheet" href=
integrity=
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous">
<script src=
crossorigin="anonymous">
</script>
<title>Use of class container</title>
<style type="text/css">
.bottom-left {
left: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1 style="color: #006400;">
GeeksforGeeks
</h1>
<div>
<img src=
height="150">
</div>
<div class="position-relative"
style="color: green;">
<h1>Hey There..!!</h1>
<p><b>This is an Example..</b></p>
<p>
Here I have used class container
of bootstrap to put
everything inside a container.
</p>
<br/>
</div>
<div class="position-relative">
<div class="position-absolute bottom-left">
<button type="button"
class="btn btn-success">
Click me!
</button>
</div>
</div>
</div>
</div>
</body>
</html>
|
image showing class container
Here, class container is used inside the top div tag to confine all the text inside a container whose width is fixed
Example:
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">
<link rel="stylesheet" href=
integrity=
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous">
<script src=
crossorigin="anonymous">
</script>
<title>Use of class container-fluid</title>
<style type="text/css">
.bottom-left {
left: 0;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="jumbotron">
<h1 style="color: #006400;">
GeeksforGeeks
</h1>
<div>
<img src=
height="150">
</div>
<div class="position-relative"
style="color: green;">
<h1>Hey There..!!</h1>
<p><b>This is an Example..</b></p>
<p>
Here I have used class
container-fluid of bootstrap
to put everything inside a
container.
</p>
<br/>
</div>
<div class="position-relative">
<div class="position-absolute bottom-left">
<button type="button"
class="btn btn-success">
Click me!
</button>
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
image showing class container-fluid
Here class container-fluid is used to confine all the text in a container whose width is 10% of the screen
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...