Bootstrap Grid
Bootstrap Grid
Bootstrap Grid System is a responsive grid layout system that forms the foundation of Bootstrap, a popular front-end framework for developing responsive and mobile-first websites and web applications. The grid system consists of a series of containers, rows, and columns, allowing developers to create flexible and responsive layouts for their web projects.
Containers: Bootstrap grid layouts are contained within a container. Containers are the outermost wrapper for grid layouts and ensure proper alignment and padding. Bootstrap offers two types of containers:
.containerand.container-fluid. The.containerclass creates a fixed-width container, while the.container-fluidclass creates a full-width container that spans the entire width of the viewport.Rows: Inside containers, developers can create rows to organize content horizontally. Rows are divided into 12 columns by default and are responsive, adjusting their layout based on the screen size. Rows ensure that columns are properly aligned and maintain consistent spacing.
Columns: Bootstrap grid layouts consist of up to 12 columns within each row. Developers can specify the width of columns by assigning them appropriate column classes such as
.col-,.col-sm-,.col-md-,.col-lg-, and.col-xl-. These classes define column widths at different breakpoints, ensuring responsive behavior across various devices.
Example 2: Three Columns on Small Devices, Two on Large Devices
This example creates a row with three columns that each take up a third of the available width on small devices, and two columns that each take up half of the available width on large devices.
<div class="container">
<div class="row">
<div class="col-sm-4 col-lg-6">Column 1</div>
<div class="col-sm-4 col-lg-6">Column 2</div>
<div class="col-sm-4">Column 3</div>
</div>
</div>
Example 3: Responsive Images
This example creates a row with two columns, one of which contains an image that resizes based on the screen size.
<div class="container">
<div class="row">
<div class="col-sm-6">
<h2>Heading</h2>
<p>Some text</p>
</div>
<div class="col-sm-6">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" class="img-responsive" data-lazy-src="image.jpg"><noscript><img decoding="async" src="image.jpg" class="img-responsive"></noscript>
</div>
</div>
</div>
In this example, the img-responsive class ensures that the image resizes to fit the available space on small devices and larger.
Example 4: Offset Columns
This example creates a row with two columns that each take up half of the available width on large devices, with the second column offset by one column.
<div class="container">
<div class="row">
<div class="col-lg-5">Column 1</div>
<div class="col-lg-5 col-lg-offset-1">Column 2</div>
</div>
</div>
In this example, the col-lg-5 class specifies that each column should take up 5 of the 12 available columns in the row on large devices, and the col-lg-offset-1 class offsets the second column by one column on large devices.
BOOTSTRAP GRID
Container: The grid system in Bootstrap is contained within a
.containeror.container-fluidelement. This container provides a fixed or fluid-width layout for the grid, depending on whether you use.containerfor fixed width or.container-fluidfor full width.Rows: Inside the container, you can create rows using the
.rowclass. Rows act as horizontal containers for columns and ensure proper alignment and padding.Columns: Columns are the building blocks of the Bootstrap grid system. You can divide each row into up to 12 columns using the
.col-{breakpoint}-{number}classes, where{breakpoint}specifies the screen size (e.g.,smfor small screens,mdfor medium screens,lgfor large screens,xlfor extra-large screens), and{number}specifies the number of columns the content should span.Responsive Design: One of the key features of the Bootstrap Grid System is its responsiveness. By utilizing different column classes for different screen sizes, developers can create layouts that adjust dynamically based on the device’s viewport width. This makes websites built with Bootstrap compatible with a wide range of devices, including desktops, tablets, and smartphones.
Offset and Nesting: Bootstrap also provides classes for offsetting columns (
offset-{breakpoint}-{number}) and nesting columns within other columns. This allows for more complex layouts and finer control over the arrangement of content.