Bootstrap Grid Columns
What is Bootstrap Grid Columns?
In this lesson, we explore Bootstrap Grid Columns. This is an important concept in Bootstrap development that you will use frequently when building real-world projects. Understanding Bootstrap Grid Columns will help you write cleaner, more efficient code.
Syntax & Usage
The syntax and usage patterns for Bootstrap Grid Columns follow standard Bootstrap conventions. Below you will see code examples that demonstrate the most common use cases. Try modifying these examples in your own editor to experiment with different approaches.
Example
Here is a practical example demonstrating Bootstrap Grid Columns:
Tips & Best Practices
- Practice regularly to build muscle memory
- Read official documentation for the most accurate information
- Build real projects to solidify your understanding
- Use version control to track your progress
Summary
In this lesson you learned about Bootstrap Grid Columns. Practice writing code to reinforce these concepts and move on to the next lesson when you feel comfortable.
Examples
<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 class="row">
<div class="col-sm-6 col-lg-3">Responsive 1</div>
<div class="col-sm-6 col-lg-3">Responsive 2</div>
<div class="col-sm-6 col-lg-3">Responsive 3</div>
<div class="col-sm-6 col-lg-3">Responsive 4</div>
</div>
</div>
Related articles
- Bootstrap 3 Glyphicons May 31, 2020
- Bootstrap 3 May 31, 2020
- Bootstrap (Currently v4.5.0) May 26, 2020