DEV Community

Anthony Bañon Arias
Anthony Bañon Arias

Posted on

1

Bootstrap

#bootstrap #frontend

💡 Mastering Bootstrap: All the Ways to Use It Professionally

Bootstrap is the most popular front-end framework in the world, used by developers to create responsive, mobile-first websites quickly and efficiently.

In this article, you'll learn:

  • What Bootstrap is
  • All the ways to include it in your project
  • How to use it with React, Angular, Laravel, Symfony
  • How to customize it with your own CSS or Sass
  • A practical tutorial and list of utilities & components

🚀 What Is Bootstrap?

Bootstrap is a front-end toolkit that provides:

  • A grid system for responsive layout
  • Predefined UI components like buttons, navbars, modals, and more
  • Hundreds of utility classes (margins, padding, colors, alignment, etc.)
  • JavaScript components with dynamic behaviors

📦 Ways to Use Bootstrap

There are several methods to include Bootstrap in a project. Each method depends on your setup and goals.

1. ✅ CDN (The Quickest Way)

Just paste the following into your HTML file:

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap JS with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

2. 📦 Using NPM (For Projects with Webpack, Vite, etc.)

If you're building a modern JavaScript project, install Bootstrap with:

npm install bootstrap
Enter fullscreen mode Exit fullscreen mode

Then import it in your JavaScript:

// JS (includes Popper)
import 'bootstrap/dist/js/bootstrap.bundle.min.js'

// Optionally: import CSS
import 'bootstrap/dist/css/bootstrap.min.css'
Enter fullscreen mode Exit fullscreen mode

You can also import SCSS for full customization:

// SCSS entry file
@import "node_modules/bootstrap/scss/bootstrap";
Enter fullscreen mode Exit fullscreen mode

3. 🔄 Integration with Frameworks

Bootstrap can be used in any web framework. Here's how:

🔹 React

Use react-bootstrap or import Bootstrap styles directly.

npm install react-bootstrap bootstrap
Enter fullscreen mode Exit fullscreen mode

In your app:

import 'bootstrap/dist/css/bootstrap.min.css'
import { Button } from 'react-bootstrap'

<Button variant="primary">Click me</Button>
Enter fullscreen mode Exit fullscreen mode

🔹 Angular

Use ng-bootstrap or manually include the styles:

npm install bootstrap
Enter fullscreen mode Exit fullscreen mode

In angular.json:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]
Enter fullscreen mode Exit fullscreen mode

🔹 Laravel / Symfony

Bootstrap is often included via Laravel Mix or Webpack Encore.

Laravel Example:

npm install bootstrap
Enter fullscreen mode Exit fullscreen mode

Then in your resources/js/app.js:

import 'bootstrap'
Enter fullscreen mode Exit fullscreen mode

And in your resources/sass/app.scss:

@import "~bootstrap/scss/bootstrap";
Enter fullscreen mode Exit fullscreen mode

Run:

npm run dev
Enter fullscreen mode Exit fullscreen mode

4. 🎨 Customization with SCSS (Professional Workflow)

Bootstrap is built with Sass. You can override variables and create a custom theme:

  • Copy Bootstrap’s _variables.scss
  • Change colors, font sizes, breakpoints, etc.
  • Import in your own SCSS file before the main import: 
// Your overrides
$primary: #ff5733;
$font-family-base: 'Inter', sans-serif;

@import "bootstrap/scss/bootstrap";
Enter fullscreen mode Exit fullscreen mode

This allows full control over your design system.

🧪 Quick HTML Tutorial 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light text-center p-5">

  <h1 class="text-primary">Bootstrap Works!</h1>
  <button class="btn btn-success">Click Me</button>

  <div class="alert alert-warning mt-4" role="alert">
    This is a warning alert!
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

🧱 Common Components

✅ Buttons 

<button class="btn btn-primary">Save</button>
<button class="btn btn-outline-danger">Cancel</button>
Enter fullscreen mode Exit fullscreen mode

✅ Cards 

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Title</h5>
    <p class="card-text">Some quick text.</p>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

✅ Navbar 

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">MyApp</a>
</nav>
Enter fullscreen mode Exit fullscreen mode

⚙️ Grid System Example

<div class="container">
  <div class="row">
    <div class="col-md-8">Main Content</div>
    <div class="col-md-4">Sidebar</div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

The grid uses 12 columns per row, and is fully responsive.

⚡ Utility Classes Cheat Sheet

Class Effect
m-3, mt-2 Margin (all or top only)
p-2, px-4 Padding (all or horizontal)
text-center Center-align text
bg-success, bg-warning Background color
text-danger, text-muted Text color
d-flex, justify-content-between Flexbox layout
rounded, shadow Rounded corners, box shadows

📘 Best Practices

  • Use utility-first classes instead of custom CSS when possible
  • Customize via SCSS if you need full branding
  • Use Bootstrap’s responsive classes like d-none d-md-block
  • Don’t forget accessibility: aria-* attributes, proper roles

🔗 Official Resources

  • 📘 Bootstrap Docs
  • 💡 Bootstrap GitHub
  • 🧱 Bootstrap Components
  • 🎨 Bootstrap Theming Guide

🙌 Conclusion

Bootstrap is more than just a CSS file — it’s a complete design and component system for fast, responsive, and professional websites. Whether you're building with plain HTML or a modern JavaScript framework, Bootstrap is always a reliable option.

profile
AWS
 Promoted

AWS Security LIVE! Stream

Streaming live from AWS re:Inforce

Join AWS Security LIVE! at re:Inforce for real conversations with AWS Partners.

Learn More

Top comments (1)

Collapse
 
mganga56 profile image
Mganga56 •

Am still learning it it's really perfect

profile
AWS
 Promoted

AWS Security LIVE! Stream

Streaming live from AWS re:Inforce

Tune into Security LIVE! at re:Inforce for expert takes on modern security challenges.

Learn More