Home >>Bootstrap Tutorial >Bootstrap Container
Bootstrap Container
Bootstrap Container
Bootstrap container is basically used in order to create a centered area that lies within the page and generally deals with the margin of the content and the behaviors that are responsible for the layout. It contains the grid system (the row elements and the row elements are the container of columns).
The advantage of container class is that it responsive and will place all our other HTML code.
There are two container classes available in bootstrap:
- container
- container-fluid
Let's understand both of the above two container classes :
Container
.container: The .container class will provide a fixed width container with responsiveness.It will not take the complete width of its viewport.
Let's take an example of the container class:
<!DOCTYPE html> <html> <head> <title>Bootstrap Container </title> <!-- Add Bootstrap Links --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container" style="background: #7fbbf0;"> <h1>welcome to phptpoint</h1> </div> </body> </html>
welcome to phptpoint
Container Fluid
.container-fluid: The .container-fluid class provides a full width container of the viewport and its width (max-width) will change (expand or shrink) on different screen sizes. It is also responsive just like a container.
Let's take an example of class container-fluid:
<!DOCTYPE html> <html> <head> <title>Bootstrap Container </title> <!-- Add Bootstrap Links --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid" style="background: #7fbbf0;"> <h1>welcome to phptpoint</h1> </div> </body> </html>