How to create full width container using bootstrap?
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> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <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> <!--class container: max-width changes at each breakpoint All the text is pushed inside a container--> <div class="container"> <!--class jumbotron: to highlight how the class container works--> <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> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <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> <!--class container-fluid: 100% width--> <div class="container-fluid"> <!--class jumbotron: to highlight how the class container works--> <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
Please Login to comment...