Bootstrap 4 Layout
What is Bootstrap 4 Layout
- Bootstrap 4 layout is a responsive grid system that allows you to create flexible and structured web page layouts.
- It is built on a 12-column grid system that uses a combination of rows and columns to align content.
Key features of Bootstrap 4 Layout
1. Container
- The
.containerclass is used to create a centered, fixed-width container, while.container-fluidprovides a full-width container that spans the entire width of the viewport.
2. Grid System
- Bootstrap 4 uses a 12-column grid layout that is responsive and can be customized for different screen sizes. Columns are created inside rows using the
.rowclass, and the number of columns is defined using.col-*classes. - Column classes are divided into different sizes:
.col-for extra small devices.col-small-for small devices.col-md-for medium devices.col-large-for large devices.col-xl-for extra-large devices
- These classes help create responsive layouts that adjust based on the screen size.
3. Breakpoints
- Breakpoints are predefined points where the layout adjusts based on the screen size. Bootstrap 4 defines breakpoints for each device size (extra small, small, medium, large, and extra-large).
4. Flex box
- Bootstrap 4 uses Flex box for its grid system, allowing more control over alignment, ordering, and spacing of grid items. Flex box makes it easier to create complex and responsive layouts.
5. Responsive Utilities
- Bootstrap 4 provides various utility classes to hide, show, or change the layout of elements based on the screen size. These classes include
.d-none,.d-sm-block, and more.
6. Nesting Columns
- You can nest columns within another column using another
.rowand set of.col-*classes. This is useful for creating more complex layouts.
7. Alignment and Ordering
- Bootstrap 4 allows you to align and order columns using Flex box utilities like
.align-items-*,.justify-content-*, and.order-*classes.
Example
basic example of a Bootstrap 4 layout:
<div class="container">
<div class="row">
<div class="col-md-4">Column 1</div>
<div class="col-md-4">Column 2</div>
<div class="col-md-4">Column 3</div>
</div>
</div>
This example creates a three-column layout that adjusts according to the screen size.
Bootstrap 4 Layout
- Bootstrap 4 is the latest version of the Bootstrap framework, an open-source and free-to-use CSS toolkit designed for responsive, mobile-first front-end web development.
- It offers a wide range of CSS and JavaScript-based design templates, including typography, forms, buttons, navigation, and other UI components. As one of the most popular frameworks for building responsive, mobile-first websites, Bootstrap 4 is available for free download and use.
Layouts in Bootstrap 4
In Bootstrap 4, container classes are commonly used to wrap content on a page. There are two main container classes, each serving a specific purpose:
.container: This class is used to create a fixed-width container, keeping your content centered within a defined width.
.container-fluid: This class creates a full-width container, allowing your content to span the entire width of the viewport.
container
- In Bootstrap 4, the
.containerclass is used to wrap page content with a fixed width, allowing it to be easily centered on the page. By applying the.containerclass, you can ensure that your content is neatly aligned in the center, as demonstrated in the example below.
Syntax.
<div class = "container">
</div>
Example
<!DOCTYPE html>
<html language="English">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</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>
Output
This is the Sample Container Class
This section is inside a. container class
The .container class gives a responsive fixed width container.
A user will have to resize the window of the browser to understand that is its width that
Fluid Container
- In this section, a user can create a full-width container using the
.container-fluidclass.
Syntax
<div class="container-fluid">
</div>
Example
<!DOCTYPE html>
<html language="English">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</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>
output
The Sample Fluid Container is shown here
This section is a part of a .container-fluid class
The .container-fluid class will give a full width container, that will span the entire width of the viewport.
