Hey amazing people, welcome back to my blog! 👋
Introduction
Let's dive deep into understanding when and why you might choose Bootstrap or pure CSS Grid. This article will guide you through the nuances, provide visual aids, and offer practical examples to help you make informed decisions for your web projects.
What You'll Learn in This Article 🤓
Bootstrap Basics: Its grid system, customization, and real-world usage.
Pure CSS Grid: How it works, its latest features, and its advantages.
Visual Comparison: Layout examples to visually explain the concepts.
Real-World Applications: Case studies and scenarios.
Interactive Elements: Code examples for hands-on experience.
Tools and Resources: Where to learn more and get support.
Why Choose Bootstrap? 🤔
Speed: With ready-to-use classes, you can quickly build responsive layouts.
Consistency: Maintains a uniform design across different projects.
Community & Ecosystem: Extensive documentation, tutorials, and third-party extensions.
Bootstrap Grid System
Bootstrap's grid is based on a 12-column layout with responsive breakpoints:
html
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-8">Column 1</div>
<div class="col-sm-6 col-md-4">Column 2</div>
</div>
</div>
Visual:
+---+---+
| 1 |
+---+
| 2 |
+---+
Customization
TL-DR: Bootstrap can be customized via SCSS variables or by using the bootstrap-customize tool. Here's how you might change the default grid:
$grid-columns: 16;
$grid-gutter-width: 30px;
If you already know about customization skip the next part and continue to Real-World Use Case: E-commerce Template.
Customization Details :
Bootstrap offers a variety of ways to customize your website's look and behavior:
SCSS Variables
Bootstrap is built with SCSS, which allows for extensive customization through variables:
Colors: Change the primary color scheme, buttons, and background colors.
Typography: Adjust font sizes, families, and weights.
Spacings: Modify the default spacing scale or grid gutter width.
Example:
// _variables.scss
// Change primary color
$primary: #3498db;
// Adjust font size
$font-size-base: 1rem;
// Increase grid gutter width
$grid-gutter-width: 30px;
// Import Bootstrap
@import "bootstrap/scss/bootstrap";
Bootstrap Customize Tool
For those not comfortable with SCSS or for quick customization:
- Visit the Bootstrap Customizer where you can tweak variables, select components to include, or exclude, and download a custom build of Bootstrap.
Tips for Effective Customization
Start with Variables: If you're just beginning, changing variables is the easiest way to customize without deep diving into the framework.
Use the Customizer for Quick Prototypes: It's great for testing out different looks without altering the SCSS files.
Create a Custom Build: If you're working on a project with specific requirements, creating a custom build of Bootstrap can reduce file size by removing unused components.
Sass Partial Files: Bootstrap uses partial files for each component. You can override these by creating your own partials with the same name in your project.
By providing these additional details, readers get a clearer picture of the customization process, from simple variable changes to creating a more personalized version of Bootstrap.
Real-World Use Case: E-commerce Template 🛒
<div class="container">
<div class="row">
<div class="col-md-8">Product List</div>
<div class="col-md-4">Cart Sidebar</div>
</div>
</div>
Visual:
+--------+--------+
|Product |Cart |
|List |Sidebar |
+--------+--------+
Please check here on Codepen where I have the full example.
The HTML (in the Codepen example from above) uses Bootstrap classes to create a layout with:
- A fixed top navigation bar.
- A grid system within the main content area to split it into an 8-column product list and a 4-column sidebar for the cart.
- Custom CSS for additional styling like borders, padding, and background colors to enhance the look of the products and cart.
The custom styles provide some basic styling, but Bootstrap's default styles do most of the heavy lifting in terms of responsive design and component styling. Remember, Bootstrap is designed to be highly customizable, so you can easily modify these styles or use SCSS to change variables for a more tailored look.
Why Choose Pure CSS? 🤔
Control: Complete design freedom without framework constraints.
Performance: Smaller file sizes and no external dependencies.
Modern Features: Utilize the latest CSS capabilities like subgrid and container queries.
CSS Grid Setup: CSS Grid allows for complex layouts with minimal markup:
<div class="grid-container">
<header>Header</header>
<main>Main Content</main>
<aside>Sidebar</aside>
<footer>Footer</footer>
</div>
.grid-container {
display: grid;
grid-template-areas:
"header header"
"main sidebar"
"footer footer";
grid-template-columns: 2fr 1fr;
gap: 20px;
}
.grid-container > * {
background: #f0f0f0;
padding: 20px;
}
Visual:
+--------+--------+
| Header | Header |
+--------+--------+
| Main | Sidebar|
+--------+--------+
| Footer | Footer |
+--------+--------+
Latest CSS Features
Subgrid: TLDR For aligning nested grids within a parent grid.
Container Queries: TLDR For components that respond to their own size rather than the viewport.
Subgrid
Imagine you have a big grid where you've placed some boxes (like a photo frame on a wall). Now, you want to put smaller boxes inside one of those big boxes, but you want these smaller boxes to line up perfectly with the lines of the big grid.
Subgrid is like having a transparent grid paper inside your big box that matches the pattern of the big wall grid. This way, when you place your small boxes, they can align not just within the big box but also in relation to the whole wall.
Example:
<div class="parent-grid">
<div class="child-grid">
<div class="sub-item">Item 1</div>
<div class="sub-item">Item 2</div>
</div>
</div>
.parent-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.child-grid {
display: grid;
grid-template-columns: subgrid;
gap: 5px;
background: #e0e0e0;
padding: 10px;
}
.sub-item {
background: #f0f0f0;
padding: 10px;
}
Visual Concept:
+------+------+------+
| Parent Grid |
| +---+---+---+
| |Child Grid| <- Here, the child grid uses subgrid to align its items
| |+---+---+ |
| || Item 1||
| |+---+---+ |
| || Item 2||
| |+---+---+ |
| +---+---+---+
+-------------------+
Container Queries
Think of container queries like giving each box on your wall the ability to decide how it should look based on its own size, not just the size of the wall (viewport).
Usually, when you make a website responsive, you tell it to change based on the whole screen's width. But what if one part of your page, like a sidebar, gets wider or narrower? With container queries , this sidebar can adjust its own contents without affecting the rest of the page.
Example:
<div class="container">
<div class="sidebar">
<div class="sidebar-item">Item 1</div>
<div class="sidebar-item">Item 2</div>
</div>
</div>
.container {
container-type: inline-size;
}
.sidebar {
width: 300px; /* This can change */
background: #e0e0e0;
}
@container (inline-size < 200px) {
.sidebar-item {
display: none;
}
}
@container (inline-size >= 200px) {
.sidebar-item {
display: block;
}
}
Visual Concept:
+--------------------+
| Container |
| +----------------+ | <- Sidebar
| | Sidebar Item 1 | | <- If the sidebar gets too narrow, these items
| | Sidebar Item 2 | | <- can either hide or change layout
| +----------------+ |
+--------------------+
This means each component can adapt independently, making your design more modular and flexible.
Case Study: Personal Blog 💻
Bootstrap might be chosen for:
- Quick Setup : If you want to use a template or starter kit to launch quickly.
Pure CSS Grid would be preferable for:
- Custom Design : If you want a unique layout that doesn't fit Bootstrap's defaults.
Example on Codepen:
(Please check the link below, and get the code.)
The code on the Codepen example sets up a basic blog layout with a header, navigation bar, main content area, sidebar for recent posts, and a footer. It uses CSS Grid for the layout and includes a media query for responsiveness.
When to Choose Each Approach
Bootstrap : Perfect for projects needing quick deployment, where design consistency across various parts of the site is key, or when working in a team familiar with Bootstrap.
Pure CSS : Choose this when you seek full control over your design, want to reduce dependencies, or when you're ready to leverage the advanced features of modern CSS.
Tools and Resources 🔗
Bootstrap
Pure CSS Grid
Conclusion
Choosing between Bootstrap and pure CSS Grid isn't about which one is better but about what fits your project's needs and your skill level. Bootstrap offers a structured approach that's great for beginners or for projects requiring fast development. Pure CSS Grid provides the canvas for those who wish to paint their layouts with precision and creativity.
As you grow in your web development journey, you'll find that sometimes the best choice is blending both or transitioning from one to the other based on project demands.
Keep exploring, keep learning, keep coding! 🚀
👋 Hello, I'm Eleftheria, Community Manager, developer, public speaker, and content creator.
🥰 If you liked this article, consider sharing it.
Top comments (0)