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.
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
- .container- max-width changes at each breakpoint
<!– Content here –>
- .container-fluid- 100% width
<div class="container-fluid"> <!-- Content here --> </div>
Here, class container is used inside the top div tag to confine all the text inside a container whose width is fixed
Here class container-fluid is used to confine all the text in a container whose width is 10% of the screen
- How to create full width container in bootstrap5?
- How to create responsive website zoomed out to full width on mobile using Bootstrap?
- How to design full width dropdown Navbar using Bootstrap ?
- Font scaling based on width of container using CSS
- How to change font size depending on width of container?
- HTML width/height Attribute vs CSS width/height Property
- How to validate if input in input field has full width string only using express-validator ?
- Include Bootstrap in AngularJS using ng-bootstrap
- How to configure modal width in Bootstrap?
- How to change the width and height of Twitter Bootstrap's tooltips?
- How Specify Length and Width of Square Grid Picture System in Bootstrap?
- How to design Responsive card-deck with fixed width in Bootstrap ?
- How to Set full height in box-inner div using bootstrap 4 ?
- How to auto-resize an image to fit a div container using CSS?
- How to position a div at the bottom of its container using CSS?
- How to Rotate Container Background Image using CSS ?
- How to define a container for an external (non-HTML) application using HTML5?
- Difference between bootstrap.css and bootstrap-theme.css
- Difference Between Bootstrap 3 and Bootstrap 4
- Difference between Bootstrap 4 and Bootstrap 5
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.