Bootstrap Layout
Duration : 00:03:00
Layout:
Bootstrap provides a responsive layout structure that adapts to various screen sizes. It uses a 12-column grid system for creating flexible layouts.Example:
<div class="container">
<div class="row">
<div class="col-md-6">Column 1</div>
<div class="col-md-6">Column 2</div>
</div>
</div>
Breakpoints:
Bootstrap's breakpoints define different screen sizes where your design might need adjustments. You can customize styles for each breakpoint.Example:
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">Column 1</div>
<div class="col-sm-6 col-md-8">Column 2</div>
</div>
</div>
Containers:
Containers in Bootstrap control the width of your content. You have the choice of using ‘.container’ for a fixed width or ‘.container-fluid’ for full width.Example:
<div class="container">
<!-- Content here -->
</div>
<div class="container-fluid">
<!-- Fluid content here -->
</div>
Grid:
The grid system helps create responsive layouts by arranging content in rows and columns.Example:
<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>
Columns:
Columns in Bootstrap automatically adjust their width based on the number of columns within a row.Example:
<div class="container">
<div class="row">
<div class="col-md-6">Half-width Column</div>
<div class="col-md-6">Half-width Column</div>
</div>
</div>
Gutters:
Gutters are the spacing between columns. Bootstrap provides classes to add or remove gutter spacing.Example:
<div class="container">
<div class="row g-3">
<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>
Utilities:
Bootstrap utilities offer a variety of helper classes for common tasks like text alignment, margin, padding, and more.Example:
<div class="container">
<div class="row">
<div class="col-md-6 text-center">Centered Content</div>
<div class="col-md-6 m-3">Margin</div>
</div>
</div>
Z-index:
Z-index controls the stacking order of elements. Higher values appear on top of lower values.Example:
.element {
position: relative;
z-index: 2;
}
Still have some questions? Let's discuss.
CONTACT US