DEV Community

ASHWINTH
ASHWINTH

Posted on

Bootstrap :)

#css #beginners #webdev #frontend

What Is Bootstrap?

Bootstrap is a free and open-source CSS framework developed to make web development faster and easier. It includes pre-designed CSS classes, responsive layouts, UI components, and JavaScript plugins that help developers create modern websites without writing large amounts of custom CSS.

Bootstrap follows a mobile-first approach, meaning layouts are designed for smaller screens first and then scale up for larger devices.

Why Use Bootstrap?

Bootstrap offers several advantages that make it a favorite among developers:

Saves development time with ready-to-use components.
Provides a responsive grid system.
Ensures consistency across browsers.
Includes built-in utility classes.
Offers excellent documentation and community support.
Easy to learn and integrate into existing projects.
Getting Started with Bootstrap.The easiest way to use Bootstrap is by including its CDN links in your HTML file.Once Bootstrap is added, you can start using its classes immediately.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Example</title>

    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css"
      rel="stylesheet">
</head>

<body>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Bootstrap Grid System

One of Bootstrap's most powerful features is its 12-column responsive grid system.The grid automatically adjusts based on the screen size, making your website responsive without additional CSS.

Example:

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

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

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

    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Bootstrap Containers

Bootstrap provides two main container classes:

.container – Fixed-width container that changes size at different breakpoints.
.container-fluid – Full-width container that spans the entire viewport.

Example:

<div class="container">
    Content goes here
</div>
Enter fullscreen mode Exit fullscreen mode

Bootstrap Buttons

Bootstrap offers several button styles using predefined classes.

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

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

<button class="btn btn-danger">Danger</button>
Enter fullscreen mode Exit fullscreen mode

Available button styles include:

Primary -blue
Secondary-grey
Success-green
Danger-red
Warning-yellow
Info-skyblue
Light-white
Dark-black

Bootstrap Cards

Cards are flexible content containers used for displaying information.Cards are commonly used for blogs, products, portfolios, and dashboards.

<div class="card" style="width:18rem;">
    <div class="card-body">
        <h5 class="card-title">Bootstrap Card</h5>
        <p class="card-text">
            Cards are useful for displaying content in a clean layout.
        </p>
        <a href="#" class="btn btn-primary">Learn More</a>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Bootstrap Navbar

Creating a responsive navigation bar is simple with Bootstrap.
The navbar automatically adapts to different screen sizes.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

    <div class="container">

        <a class="navbar-brand" href="#">
            My Website
        </a>

    </div>

</nav>
Enter fullscreen mode Exit fullscreen mode

Bootstrap Utility Classes

Bootstrap includes many utility classes that reduce the need for custom CSS.
These utility classes help developers style elements quickly and consistently.

Examples:

<div class="text-center">
    Centered Text
</div>

<div class="mt-4">
    Margin Top
</div>

<div class="p-3">
    Padding
</div>

<div class="bg-primary text-white">
    Colored Background
</div>
Enter fullscreen mode Exit fullscreen mode

Conclusion

Bootstrap is one of the best front-end frameworks for building responsive, modern websites quickly. Its ready-made components, responsive grid system, and utility classes allow developers to focus on functionality instead of writing repetitive CSS.

Top comments (0)