DEV Community

Cover image for Bootstrap: Introduction to the Modern Front-end Framework
Ian Iversen
Ian Iversen

Posted on

Bootstrap: Introduction to the Modern Front-end Framework

What is Bootstrap?

Bootstrap is a front-end framework designed to make website development faster and more responsive to a user's device (desktop, tablet, phone).

Image description

Bootstrap is a framework built on top of CSS. Although not accurate, I think it is helpful to think of Bootstrap as React for styling--where React makes JavaScript "easier", Bootstrap makes CSS "easier".

Bootstrap began as an internal project at Twitter in 2011, aimed at simplifying design principles on web pages. Over the last decade, the framework has become free and open-source while also growing to be one of the most popular front-end frameworks.

Bootstrap is a framework built on top of CSS.

Cascading Style Sheets (CSS) is what bootstrap is based on, though HTML structure and underlying JavaScript are included in some Bootstrap components.

Though technically CSS provides you with the most flexibility and no installation is required, CSS takes more time to develop web applications.

Bootstrap is quicker to work with, installation is required, but can be avoided with jsDelivr. If you desire, you can have more flexibility by customizing the underlying CSS.

Importing Bootstrap

Developers can install Bootstrap using node in the corresponding project's console window.

npm install bootstrap

Or

Developers can also use jsDelivr to use a cached version of Bootstrap rather than download the framework.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Working with Bootstrap

Bootstrap uses a responsive grid, meaning that components you create will be displayed in somewhat fixed positions. These grids will be effectively re-rendered on other devices in stylistically pleasant ways with little effort required from the developer. This is referred to as the "responsiveness" of Bootstrap. Although you are building your site on a desktop, you can be confident that a mobile user's experience won't be drastically different.

Image description

Image description

Bootstrap contains pre-packaged HTML components that are immediately ready for use. Buttons, nav-bar, cards, drop-downs, and useful form components are all at the developer's fingertips.

Other great info

  • Bootstrap works across all modern browsers.
  • You can use bootstrap only knowing basic HTML and CSS.
  • Large developer community for documentation and 3rd party themes.
  • Like react, Bootstrap is actively developed, upgraded, and fixed.

Check Out Bootstrap

https://getbootstrap.com/

Image description

Image description

Top comments (0)