DEV Community

ABISHEK M
ABISHEK M

Posted on

Bootstrap

#opensource #frontend

The Most Popular CSS Framework for Responsive Web Development

Building a website using only HTML and CSS can take a lot of time. Developers need to write CSS for buttons, forms, navigation bars, layouts, and many other elements. They also need to write media queries to make the website responsive on different screen sizes.

Bootstrap helps solve these problems.

Bootstrap is a free and open-source CSS framework that makes web development faster and easier. It provides ready-made CSS classes and JavaScript components that can be used to create responsive and attractive websites. Instead of writing large amounts of CSS, developers can simply use Bootstrap classes to style HTML elements.

To use Bootstrap, the Bootstrap CSS file must first be added to the HTML document using the Bootstrap CDN.

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

When the browser loads the webpage, it also loads the Bootstrap CSS file. This file contains predefined styles for buttons, forms, cards, navigation bars, layouts, and many other components. When an HTML element contains a Bootstrap class, the browser automatically applies the corresponding styles from the Bootstrap CSS file.

Button Example

Let's compare creating a button with and without Bootstrap.

Without Bootstrap

First, create the button using HTML.

<button>Login</button>
Enter fullscreen mode Exit fullscreen mode

Then write CSS to style the button.

button{
    background-color: blue;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
Enter fullscreen mode Exit fullscreen mode

Here, we need to write CSS to set the background color, text color, padding, border, and border radius.

With Bootstrap

After adding the Bootstrap CDN, the same button can be created with just one line of code.

<button class="btn btn-primary">Login</button>
Enter fullscreen mode Exit fullscreen mode

Here:

  • btn gives the button its basic Bootstrap styling.
  • btn-primary applies Bootstrap's primary blue color.

No separate CSS is required because Bootstrap already contains all the necessary styles. This makes development faster and keeps the code clean.

Another important feature of Bootstrap is its responsive grid system, which automatically adjusts layouts for different screen sizes such as mobile phones, tablets, laptops, and desktops. Bootstrap also includes many reusable components like navigation bars, cards, forms, tables, alerts, and modals.

Overall, Bootstrap is a powerful front-end framework that simplifies web development. It saves time, reduces CSS coding, and helps developers build modern, responsive, and professional-looking websites more efficiently.

Top comments (0)