Bootstrap Grid
BOOTSTRAP GRID
Bootstrap Grid
<div class="container">
<div class="row">
<div class="col-md-6">Column 1</div>
<div class="col-md-6">Column 2</div>
</div>
</div>
Bootstrap Grid – Medium Devices
In this example, the col-md-6 class specifies that each column should take up 6 of the 12 available columns in the row, which means they will each take up half of the available width on medium devices and larger.
On small devices such as smartphones, the columns will stack vertically in the order they are defined. On medium and larger devices, they will display horizontally. You can also use the col-md-*-offset-* classes to offset columns, and the col-md-*-push-* and col-md-*-pull-* classes to re-order columns on medium devices.
For example, to create a row with two columns that are offset from each other by one column on medium devices, you can use the following HTML:
<div class="container">
<div class="row">
<div class="col-md-5 col-md-offset-1">Column 1</div>
<div class="col-md-5">Column 2</div>
</div>
</div>
In this example, the col-md-5 class specifies that each column should take up 5 of the 12 available columns in the row on medium and larger devices. On medium devices, the first column is also offset by one column and takes up 5 of the 12 available columns, while the second column takes up 5 of the 12 available columns. On small devices, the columns will stack vertically in the order they are defined.
Bootstrap Grid Introduction
Column Layouts: Bootstrap’s grid system is based on a 12-column layout, providing a flexible foundation for creating complex and visually appealing designs. On medium devices, the grid automatically adjusts to accommodate the screen size, ensuring that your content remains organized and visually appealing.
Responsive Classes: Bootstrap offers a range of responsive classes that allow you to control the layout and visibility of your content on medium devices. By using classes such as
col-md-, you can specify the number of columns each element should occupy, ensuring that your layout adapts seamlessly to different screen sizes.Offset and Nesting: In addition to column layouts, Bootstrap’s grid system supports offsetting and nesting of columns, giving you greater control over the arrangement of your content. Whether you need to create multi-column layouts or add spacing between elements, Bootstrap provides the flexibility you need to achieve your desired design.
Fluid Grid System: Bootstrap’s grid system is built on a fluid foundation, meaning that your layouts will automatically resize and reflow to fit the screen size of medium devices. This fluidity ensures that your content remains accessible and visually appealing, regardless of the device being used.
Viewport Breakpoints: Bootstrap’s grid system utilizes viewport breakpoints to define the size ranges for different devices. For medium devices such as tablets, Bootstrap applies specific styles and layout configurations to ensure an optimal viewing experience.
6. Customizable Breakpoints: Bootstrap allows developers to customize the breakpoints for medium devices, giving them the flexibility to define specific screen sizes where layout adjustments should occur. This customization ensures that the design remains consistent and visually pleasing across a wide range of medium devices, accommodating different resolutions and aspect ratios.
7. Optimized for Touch Interactions: Recognizing the prevalence of touch-enabled devices like tablets, Bootstrap’s grid system for medium devices is optimized for touch interactions. Elements within the grid are spaced appropriately to prevent accidental touches and ensure a smooth and intuitive user experience, enhancing usability and engagement on touch-enabled devices. Additionally, touch-friendly features such as larger tap targets and responsive navigation menus contribute to a seamless browsing experience on medium-sized devices.