Bootstrap 4 Layouts

by Online Tutorials Library July 14, 2022

Bootstrap 4 – Layouts

Bootstrap 4 is the newest version of Bootstrap. The Bootstrap is a free to use and completely open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components which is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Bootstrap 4 is completely free to download and use.

Layouts in Bootstrap 4

In Bootstrap 4, there are container classes that are typically used to wrap the different contents in a page. There are basically two container classes that can be used for various different activities –

.container – this container class can be used to represent a fixed width container.
.container-fluid – this container can be used to represent a full width container.

Container

The .container class in Bootstrap 4 can be applied into a web page for the purpose of wrapping the page content with a fixed width. Moreover, by using the container class the content can be placed in the center very easily with the help of using the .container class as shown below.

The syntax of this class is given below:

The example of a simple web page that shows a fixed width container class can be seen in the code given below:

  <!DOCTYPE html>  <html lang=”en”>  <head>    <title>Bootstrap Example</title>    <meta charset=”utf-8″>    <meta name=”viewport” content=”width=device-width, initial-scale=1″>    <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css”>    <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>    <script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js”></script>    <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”></script>  </head>  <body>  <div class=”container”>    <h1>This is the Sample Container Class</h1>    <p>This section is inside a .container class</p>     <p>The .container class gives a responsive fixed width container.</p>    <p>A user will have to resize the window of the browser to understand that its width that is the max width will substitute at the various breakpoints.</p>  </div>  </body>  </html>  

Test it Now

The output of the following program is shown below –

Output:

Bootstrap 4 - Layouts

Fluid Container

In this section, a user can build a full width container with the help of a .container-fluid class.

The syntax is given below:

The example of this class is given below, the example below shows a simple web page that contains a full width container –

Example:

  <!DOCTYPE html>  <html lang=”en”>  <head>    <title>Bootstrap Example</title>    <meta charset=”utf-8″>    <meta name=”viewport” content=”width=device-width, initial-scale=1″>    <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css”>    <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>    <script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js”></script>    <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”></script>  </head>  <body>      <div class=”container-fluid”>    <h1>The Sample Fluid Container is shown here</h1>    <p>This section is a part of a .container-fluid class.</p>    <p>The .container-fluid class will give a full width container, that will span the entire width of the viewport.</p>             </div>   </body>  </html>  

Test it Now

The output of the following program is shown below –

Output:

Bootstrap 4 - Layouts

Next TopicBootstrap 4 Buttons

bootstrap 4 bootstrap 4 Buttons bootstrap 4 Dropdown bootstrap 4 Forms bootstrap 4 Images bootstrap 4 Jumbotron bootstrap 4 Layout bootstrap 4 Lists bootstrap 4 MCQ bootstrap 4 Navs bootstrap 4 Progress Bars bootstrap 4 Spinners bootstrap 4 Tables bootstrap 4 Tooltip bootstrap 4 tutorial what is bootstrap4

Bootstrap 4 Layouts

Bootstrap 4 – Layouts

Layouts in Bootstrap 4

Container

Fluid Container

AutoCAD LT Download

Boostrap3 sticky header

You may also like