Bootstrap 5 tutorial with frequently used classes

-

 

Bootstrap 5 Tutorial: Frequently Used Classes

Bootstrap 5 is a popular front-end framework that allows you to design responsive and modern web pages quickly and easily. It provides a wide range of pre-built components, utilities, and classes for layout, typography, forms, buttons, navigation, and more.

In this tutorial, we'll explore Bootstrap 5 with some of the most commonly used classes, covering layouts, typography, components, and utilities that will help you get started with building responsive web pages.

1. Setting Up Bootstrap 5

There are two primary ways to include Bootstrap in your project: using a CDN (Content Delivery Network) or downloading it.

Option 1: Using a CDN

Include the following links in your HTML file:

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

<!-- Bootstrap Bundle JS (includes Popper.js) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

Option 2: Downloading Bootstrap

Download Bootstrap from getbootstrap.com and link the CSS and JS files in your HTML.

2. Bootstrap 5 Layout

The layout system in Bootstrap 5 is based on a 12-column grid, which you can use to create responsive layouts. You can use containers, rows, and columns to organize content.

.container and .container-fluid

  • .container: Creates a fixed-width container (responsive at each breakpoint).
  • .container-fluid: A full-width container that spans the entire width of the viewport.
html
<div class="container">
  <h1>Fixed-width Container</h1>
  <p>This content is inside a fixed-width container.</p>
</div>

<div class="container-fluid">
  <h1>Fluid Container</h1>
  <p>This content is inside a full-width container.</p>
</div>

.row and .col (Grid System)

  • .row: Defines a row in the grid system.
  • .col: Defines columns within the row. You can specify how many columns each element should span using classes like .col-4, .col-md-6, etc.
html
<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>

3. Typography Classes

Bootstrap 5 offers various classes for typography to control font sizes, colors, and text alignment.

Headings

  • .display-1, .display-2, .display-3, .display-4: Large headings.
  • .h1, .h2, .h3, .h4, .h5, .h6: Standard headings.
html
<h1 class="display-1">Display 1 Heading</h1>
<h2 class="display-2">Display 2 Heading</h2>
<h3 class="display-3">Display 3 Heading</h3>
<h4 class="display-4">Display 4 Heading</h4>

Text Classes

  • .text-primary, .text-secondary, .text-muted, .text-center: Color and alignment classes.
html
<p class="text-primary">This text is blue (primary color).</p>
<p class="text-muted">This text is muted (lighter color).</p>
<p class="text-center">This text is centered.</p>

Font Weight

  • .fw-bold, .fw-normal, .fw-light: Change font weight.
html
<p class="fw-bold">This text is bold.</p>
<p class="fw-normal">This text is normal weight.</p>
<p class="fw-light">This text is light.</p>

4. Buttons

Bootstrap provides various button styles that are pre-styled and easy to use.

  • .btn: Base class for buttons.
  • .btn-primary, .btn-secondary, .btn-success, .btn-danger: Different button styles.
  • .btn-lg, .btn-sm: Button sizes.
  • .btn-block: Makes the button span the entire width.
html
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>
<button class="btn btn-success">Success Button</button>
<button class="btn btn-danger">Danger Button</button>
<button class="btn btn-lg btn-warning">Large Warning Button</button>
<button class="btn btn-sm btn-info">Small Info Button</button>
<button class="btn btn-block btn-dark">Full-Width Dark Button</button>

5. Forms

Bootstrap 5 provides a variety of form components and utilities for creating input fields, checkboxes, radios, and more.

.form-control

The .form-control class is used for form inputs like text fields, text areas, selects, etc.

html
<div class="mb-3">
  <label for="exampleInputEmail1" class="form-label">Email address</label>
  <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
</div>

<div class="mb-3">
  <label for="exampleInputPassword1" class="form-label">Password</label>
  <input type="password" class="form-control" id="exampleInputPassword1">
</div>

<div class="mb-3 form-check">
  <input type="checkbox" class="form-check-input" id="exampleCheck1">
  <label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>

<button type="submit" class="btn btn-primary">Submit</button>

.form-label

Used to style form labels.

html
<label for="exampleInputEmail1" class="form-label">Email Address</label>

6. Alerts

Bootstrap 5 comes with pre-styled alert components for displaying contextual messages.

  • .alert: Base class for alerts.
  • .alert-success, .alert-danger, .alert-warning, .alert-info: Contextual classes.
html
<div class="alert alert-success" role="alert">
  Success! Your action was completed.
</div>
<div class="alert alert-danger" role="alert">
  Error! Something went wrong.
</div>
<div class="alert alert-warning" role="alert">
  Warning! This is a cautionary message.
</div>
<div class="alert alert-info" role="alert">
  Info! This is an informational message.
</div>

7. Navbars

The navbar is a responsive navigation bar that can collapse on smaller screens.

  • .navbar: Base class for the navbar.
  • .navbar-brand: For branding/logo.
  • .navbar-nav: For the navigation links.
  • .navbar-toggler: For collapsing the navbar on mobile.
html
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
  </div>
</nav>

8. Cards

Cards are flexible content containers that can hold images, text, links, and other elements.

  • .card: Base class for cards.
  • .card-body: Content area of the card.
  • .card-title, .card-text: Title and text content.
html
<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is some text inside a card. Cards are flexible content containers.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

9. Utilities

Bootstrap 5 also includes a wide range of utility classes that help you customize the layout, spacing, alignment, and more.

  • Spacing: .m-1, .mt-2, .mb-3, .p-4 (for margin and padding)
  • Flexbox: .d-flex, .justify-content-center, .align-items-center
  • Display: .d-none, .d-block, .d-inline
html
<div class="d-flex justify-content-center">
  <button class="btn btn-success">Center Aligned Button</button>
</div>

Conclusion

This tutorial covered some of the most frequently used Bootstrap 5 classes for creating responsive layouts, styling text, forms, buttons, navigation bars, alerts, and more. Bootstrap 5 is a powerful, mobile-first framework that makes it easy to build modern and responsive web pages.

To explore more features and utilities, check out the official Bootstrap 5 documentation.

Comments

Post a Comment

Popular posts from this blog

PrimeNG tutorial with examples using frequently used classes

-
  PrimeNG Tutorial: Frequently Used Classes and Components PrimeNG is a comprehensive and flexible UI component library for Angular applications. It provides a wide range of ready-to-use components like forms, data tables, dialogs, buttons, and many others, all styled using Material Design principles. In this tutorial, we will explore some of the frequently used components and classes in PrimeNG , along with examples for creating interactive, modern, and responsive UIs. 1. Setting Up PrimeNG Before using PrimeNG components, you need to install PrimeNG in your Angular project. If you haven’t done so, follow these steps: Step 1: Install PrimeNG and PrimeIcons Run the following commands to install PrimeNG and PrimeIcons: bash Copy code npm install primeng npm install primeicons Step 2: Import Required Modules After installation, you need to import the relevant PrimeNG modules in your app.module.ts . Example of importing commonly used modules: typescript Copy code import { NgModule ...
Read more

Docker and Kubernetes Tutorials and QnA

-
 Docker and Kubernetes Tutorials: Detailed Guide Let's dive into detailed tutorials for Docker and Kubernetes, starting with their core concepts and progressing to hands-on examples. These tutorials are designed for both beginners and intermediate learners. Part 1: Docker Tutorial 1. Introduction to Docker Docker is a platform used to develop, ship, and run applications inside containers. Containers are lightweight, portable, and ensure consistent environments across different stages of the application lifecycle. They help solve the "works on my machine" problem. Key Concepts of Docker: Images : A blueprint for containers, containing everything needed to run an application (code, runtime, libraries, etc.). Containers : A runtime instance of an image, running isolated from the host system. Dockerfile : A script with a set of instructions to build Docker images. Docker Hub : A public repository of Docker images. Docker Compose : A tool to define and manage multi-container a...
Read more

Building strong foundational knowledge in frontend development topics

-
 These topics are essential for building strong foundational knowledge, and each comes with a simple solution or code snippet to illustrate the concept. 1. What is the difference between HTML, CSS, and JavaScript? Answer : HTML (Hypertext Markup Language) is used for structuring web content (headings, paragraphs, images, links, etc.). CSS (Cascading Style Sheets) is used for styling the layout, design, and appearance of the web content. JavaScript is used for adding interactivity and dynamic behavior to the website (e.g., form validation, animations, events). html <!-- HTML --> < div class = "box" > </ div > css /* CSS */ .box { width : 100px ; height : 100px ; background-color : blue; } javascript // JavaScript document . querySelector ( '.box' ). addEventListener ( 'click' , function ( ) { alert ( 'Box clicked!' ); }); 2. What are semantic HTML elements and why are they important? Answer : Semantic HTML elements cl...
Read more