Bootstrap

Front-end framework for building responsive and mobile-first websites

Lessons
  • Introduction to Bootstrap
  • Containers
  • Bootstrap Grid System
  • Buttons
  • Forms
  • Alerts .
  • Cards
  • Navbar
  • Modals
  • Utilities (Spacing, Colors, Text, etc.)
Introduction to Bootstrap

Bootstrap is a powerful front-end framework used to design responsive and mobile-first websites using HTML, CSS, and JavaScript.Bootstrap is a powerful front-end framework used to design responsive and mobile-first websites using HTML, CSS, and JavaScript.

Example:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"> </head> <body> <h1 class="text-primary">Hello, Bootstrap!</h1> </body> </html>

Example Description:

This example includes the Bootstrap CSS from a CDN and uses the text-primary class to style the <h1> element with a primary (blue) color.
Containers

Containers are the layout foundation in Bootstrap. They center and pad your content. Two main types: .container (fixed width) and .container-fluid (full width).

Example:
<div class="container"> <p>This content is inside a fixed-width container.</p> </div>

Example Description:

This creates a centered layout with padding. It adjusts the width based on screen size using Bootstrap’s grid system.
Bootstrap Grid System

Bootstrap's grid system uses 12 columns to create flexible layouts. You can define columns using classes like .col-4, .col-md-6, etc.

Example:
<div class="container"> <div class="row"> <div class="col-6 bg-light">Column 1</div> <div class="col-6 bg-secondary text-white">Column 2</div> </div> </div>

Example Description:

Two columns are created inside a row, each taking 50% width (6/12). The background and text colors are styled using Bootstrap utility classes.
Buttons

Bootstrap provides pre-styled buttons using classes like .btn, .btn-primary, .btn-danger, etc.

Example:
<button class="btn btn-success">Submit</button>

Example Description:

This button is styled with the btn class (basic styling) and btn-success (green color for success actions).
Forms

Bootstrap offers clean and responsive form layouts with various input types and validation support.

Example:
<form> <div class="mb-3"> <label for="email" class="form-label">Email address</label> <input type="email" class="form-control" id="email"> </div> </form>

Example Description:

This code creates a labeled email input field with Bootstrap styling. form-control makes the input full-width and styled properly.
Alerts .

Use alerts to show messages (success, warning, error, etc.) using classes like .alert-success, .alert-danger.

Example:
<div class="alert alert-warning" role="alert"> This is a warning alert! </div>

Example Description:

This displays a yellow alert box to indicate a warning message using alert-warning.
Cards

Cards are flexible content containers with options for headers, footers, images, and body content.

Example:
<div class="card" style="width: 18rem;"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is some text within a card.</p> </div> </div>

Example Description:

This creates a basic card layout with a title and body text. It's commonly used for displaying grouped information.
Navbar

The navbar is used to create responsive navigation bars with links, branding, togglers, and more.

Example:
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Brand</a> </nav>

Example Description:

This adds a light-colored navigation bar with a brand name. The navbar-expand-lg makes it responsive on large screens.
Modals

Modals are dialog boxes that pop up over the current page. Useful for alerts, forms, etc.

Example:
<!-- Button trigger --> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"> Launch Modal </button> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal Title</h5> </div> <div class="modal-body"> This is a modal body. </div> </div> </div> </div>

Example Description:

Clicking the button triggers a Bootstrap modal with a title and message. Bootstrap handles the animation and layout.
Utilities (Spacing, Colors, Text, etc.)

Bootstrap includes many utility classes for margin, padding, text alignment, display, colors, etc.

Example:
<p class="text-center text-danger mt-4">Centered red text with top margin</p>

Example Description:

This paragraph is centered (text-center), colored red (text-danger), and has a top margin of 1.5rem (mt-4).
You have completed the lesson . Add To Your Completed Course

You have a test for this course. Do you want to submit it to pass the course?