Home > Courses > Bootstrap > Bootstrap Introduction & Setup

Bootstrap Introduction & Setup

Subject: Bootstrap
Bootstrap is a free, mobile-first (responsive) front-end framework for faster and easier web development. It includes HTML and CSS-based design templates for typography, forms, buttons, tables, navigation, and more, as well as vanilla JavaScript plugins (dropping jQuery entirely in version 5).

Bootstrap 5


We use the new Bootstrap 5 for this course:

Key Concepts to Remember
1. HTML5 Doctype: Bootstrap 5 requires the HTML5 doctype at the very beginning of your file. 
<!DOCTYPE html>

2. Mobile-First Design: Bootstrap 5 is designed to look good on all devices. To ensure proper rendering and touch zooming, you must include the viewport meta tag inside your :
<meta name="viewport" content="width=device-width, initial-scale=1">

What's New in Bootstrap 5
3. CDN Integration: You can easily add Bootstrap without downloading files by linking to a CDN (Content Delivery Network) like jsDelivr for both CSS and JavaScript.
4. Containers: Bootstrap requires a containing element to wrap site contents:
(a) .container: Provides a responsive, fixed-width container.
(b) .container-fluid: Provides a full-width container, spanning the entire width of the viewport.


Simple Code Example


Here is a clean, easy-to-understand starter template using a CDN and a responsive fixed-width container:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap 5 Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- Bootstrap 5 CSS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

    <div class="container mt-5">
        <h1>TEA Learn</h1>
        <p>This part is inside a .container class.</p>
        <p>The .container class provides a responsive fixed width container.</p>
    </div>

    <!-- Bootstrap 5 JavaScript Bundle CDN -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>


container mt-5


In Bootstrap 5, container mt-5 is a combination of two utility/layout classes used to style an HTML element:

container:
This creates a responsive, fixed-width container that centers your content horizontally on the page. It automatically adjusts its max-width at different screen sizes (breakpoints) to keep your layout looking neat. (Alternatively, container-fluid can be used to make it span the entire width of the screen).

mt-5:
This is a spacing utility class where m stands for margin, t stands for top, and 5 represents the size scale.

Bootstrap uses a spacing scale from 0 to 5, where 5 applies the largest standard margin space (typically 3rem or 48px) to push the element away from whatever is above it.

When you write <div class="container mt-5"> , you are telling the browser: "Wrap this content in a centered, responsive box and add a large margin (space) at the top so it doesn't stick to the top edge of the screen."










By: Benjamin Onuorah

Comments

No Comment yet!

Login to comment or ask question on this topic

Previous Topic Next Topic