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

Top 200 telagu words in hindi daily life?

-
 Here’s a list of 200 common Telugu words along with their Hindi meanings that can be used in daily life: Common Telugu Words and Their Hindi Meanings Telugu Word Hindi Meaning 1. నమస్కారం (Namaskaaram) नमस्कार 2. ధన్యవాదాలు (Dhanyavadalu) धन्यवाद 3. ఎలా (Ela) कैसे 4. నేను (Nenu) मैं 5. నువ్వు (Nuvvu) तुम 6. ఆయన (Aayana) वह (पुरुष) 7. ఆమె (Aame) वह (महिला) 8. ఇక్కడ (Ikkada) यहाँ 9. అక్కడ (Akkada) वहाँ 10. వెళ్లి (Velli) जाना 11. రాండి (Raandi) आइए 12. తీసుకోండి (Teesukondi) ले लो 13. ఇది (Idi) यह 14. అది (Adi) वह 15. వస్తువు (Vastuvu) चीज़ 16. పుస్తకం (Pustakam) किताब 17. ఆహారం (Aahaaram) खाना 18. నీళ్లు (Neellu) पानी 19. మంచి (Manchi) अच्छा 20. చెడు (Chedu) बुरा 21. ఆశ (Aasha) उम्मीद 22. సంతోషం (Santhosham) खुशी 23. కష్టం (Kashtam) कठिनाई 24. పని (Pani) काम 25. రోజు (Roju) दिन 26. సాయంత్రం (Saayantram) शाम 27. రాత్రి (Raatri) रात 28. ఉదయం (Udayam) सुबह 29. కోపం (Kopam) गुस्सा 30. ప్రేమ (Prema) प्यार 31. కోరిక (Korika) इच्छा 32. బాబు (Babu) बच्चा 33. అమ్మ (Amma) माँ 34. నాన్న (Nann...
Read more

List of AI certificates which are valid in IT industry

-
 There are several AI certifications that are highly recognized and valid in the IT industry. These certifications are offered by leading tech organizations, and they demonstrate knowledge and skills in artificial intelligence, machine learning, and data science. Below is a list of some of the most widely respected AI-related certifications: 1. Google Cloud Professional Machine Learning Engineer Certification Offered by : Google Cloud Overview : This certification validates expertise in designing, building, and deploying machine learning models using Google Cloud technologies. Topics : Machine learning algorithms, data pipelines, TensorFlow, and Google Cloud AI tools. 2. Microsoft Certified: Azure AI Fundamentals Offered by : Microsoft Overview : An entry-level certification for those who are new to AI and cloud computing, focusing on Azure AI services. Topics : Machine learning, computer vision, natural language processing, and AI workloads on Microsoft Azure. 3. IBM AI Engineerin...
Read more

Online platforms to code in react, Angular

-
 If you're looking for online platforms to code in React, there are several excellent tools available that allow you to write, test, and deploy React applications directly in your browser, without needing to set up a local development environment. Below are some of the best platforms to code in React online: 1. CodeSandbox CodeSandbox is one of the most popular online IDEs for React development. It provides a rich environment with live previews, GitHub integration, and the ability to share projects with others. Features: Supports React , Vue , Angular , and more. Instant live preview of your code. GitHub integration for importing/exporting projects. Automatic updates with hot reloading. Can also be used for full-stack development with Node.js. How to Use: Create a new project by selecting "React" from the templates. Start coding in the editor, and see your changes live in the preview pane. 2. JSFiddle JSFiddle is a lightweight, web-based IDE for HTML, CSS, and JavaScr...
Read more