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).
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>
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.
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
Top comments (0)