Bootstrap Features

One of the most important features of Bootstrap is responsive design. Bootstrap provides classes that allow a website layout to adapt to different screen sizes.

A Bootstrap website can be designed for mobile phones, tablets, laptops, and desktop computers.

Bootstrap follows a mobile-first approach. Styles are generally designed for smaller screens first and then enhanced for larger screens.

This approach helps developers create websites that work well on mobile devices.

Bootstrap provides a responsive grid system based on rows and columns. It makes it easier to create different page layouts.

<div class="container">
    <div class="row">

        <div class="col-md-6">
            Left Section
        </div>

        <div class="col-md-6">
            Right Section
        </div>

    </div>
</div>

Bootstrap provides responsive breakpoints that allow developers to control how elements behave at different screen widths.

Common Bootstrap breakpoint prefixes include:

• sm
• md
• lg
• xl
• xxl

Bootstrap provides many ready-made components. Developers can use these components instead of creating every interface element from scratch.

• Cards
• Alerts
• Buttons
• Navbar
• Modal
• Carousel
• Accordion

Bootstrap provides utility classes for frequently used CSS properties. These classes allow developers to style elements quickly.

<div class="text-center p-4 mt-3">
    Hello Bootstrap
</div>

Here, text-center centers the text, p-4 adds padding, and mt-3 adds top margin.

Bootstrap provides predefined button styles that can be applied using simple classes.

<button class="btn btn-primary">
    Primary
</button>

<button class="btn btn-success">
    Save
</button>

<button class="btn btn-danger">
    Delete
</button>

Bootstrap provides classes for controlling text alignment, font weight, text transformation, and other typography properties.

<p class="text-center">
    Center Text
</p>

<p class="fw-bold">
    Bold Text
</p>

Bootstrap provides predefined text and background color classes.

<p class="text-primary">
    Primary Text
</p>

<p class="text-success">
    Success Text
</p>

<div class="bg-dark text-white">
    Dark Background
</div>

Bootstrap provides margin and padding utility classes.

Examples include:

• m-3 – margin
• mt-3 – margin-top
• mb-3 – margin-bottom
• p-3 – padding
• px-3 – horizontal padding
• py-3 – vertical padding

Bootstrap provides different container classes for controlling content width and layout.

<div class="container">
    Fixed Responsive Width
</div>

<div class="container-fluid">
    Full Width
</div>

Bootstrap provides the img-fluid class for making images responsive.

<img src="image.jpg"
class="img-fluid"
alt="Example">

The image can scale according to the size of its container.

Bootstrap provides table classes for styling tables. Tables can also be made horizontally scrollable on smaller screens using table-responsive.

<div class="table-responsive">

    <table class="table">
        ...
    </table>

</div>

Bootstrap provides classes for creating clean and responsive forms.

<label class="form-label">
    Name
</label>

<input type="text"
class="form-control"
placeholder="Enter Name">

Bootstrap provides classes and styles that can be used to display validation states for forms.

<input type="text"
class="form-control is-valid">

<input type="text"
class="form-control is-invalid">

Bootstrap provides navigation components that help developers create menus and navigation systems.

• Navbar
• Nav links
• Tabs
• Pills
• Dropdowns

The Bootstrap navbar can be used to create website headers and navigation menus.

It can contain a brand, navigation links, dropdown menus, and buttons. It can also collapse on smaller screens.

Bootstrap provides dropdown components for displaying a list of options when a user interacts with a button or link.

<button class="btn btn-primary
dropdown-toggle"
data-bs-toggle="dropdown">
    Menu
</button>

A modal is a dialog box that appears above the current page. Bootstrap provides a ready-made modal component.

Modals are commonly used for login forms, confirmation messages, information, and other temporary content.

Bootstrap provides a carousel component for displaying a sequence of images or other content.

It can be used for banners, image slides, product showcases, and featured content.

The accordion component allows content to be expanded and collapsed.

It is commonly used for frequently asked questions, menus, and sections of information.

Bootstrap provides alert components for displaying important messages to users.

<div class="alert alert-warning">
    Please check your information.
</div>

Cards are flexible content containers. They can contain headings, text, images, buttons, links, and other content.

<div class="card">

    <div class="card-body">

        <h5>Web Development</h5>

        <p>
            Learn HTML, CSS and Bootstrap.
        </p>

        <button class="btn btn-primary">
            Learn More
        </button>

    </div>

</div>

Bootstrap provides utility classes based on CSS Flexbox for controlling alignment and layout.

<div class="d-flex
justify-content-center
align-items-center">

    Content

</div>

These classes can help align elements without writing custom CSS.

Bootstrap provides display utility classes that can change how an element is displayed.

<div class="d-none">
    Hidden Element
</div>

<div class="d-block">
    Block Element
</div>

<div class="d-flex">
    Flex Element
</div>

Bootstrap provides utility classes that can be used with CSS positioning concepts.

Examples include classes such as position-relative, position-absolute, and fixed-top.

Bootstrap provides utility classes for adding borders, rounded corners, and shadows.

<div class="border rounded shadow">
    Bootstrap Box
</div>

Bootstrap includes JavaScript-powered components that provide interactive functionality.

• Modal
• Dropdown
• Carousel
• Collapse
• Offcanvas
• Tooltip
• Popover
• Toast

Bootstrap provides many classes and customization options. Developers can combine Bootstrap classes with their own CSS when a project requires a custom design.

<button class="btn btn-primary custom-btn">
    My Button
</button>

A custom CSS class can be added along with Bootstrap classes to extend the default styling.

One of Bootstrap's biggest advantages is that it reduces the amount of CSS and JavaScript developers need to write for common interface patterns.

Instead of building every component from the beginning, developers can use Bootstrap's responsive grid, components, and utilities and then customize them according to their project.