Bootstrap - a popular CSS Framework for developing responsive and mobile-first websites.
Created for
Created by
Responsive Design Frameworks - Overview
Responsive Design Frameworks - Overview
- Building a responsive Web site from scratch, with pure HTML/CSS/JS was (and still is) a hard task.
- There is a lots of flexible libraries and frameworks which speeds the process of creating responsive, interactive and maintainable UIs
- Some of the most popular, among the hundreds, are: Bootstrap, Foundation, Semantic-UI, Tailwind CSS and lot's of material-design based, like MUI or Material-UI.
Introduction to Bootstrap
Introduction to Bootstrap
What is Bootstrap?
- Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.
- Developed in 2011, at Twitter, as a framework to encourage consistency across internal tools
- Bootstrap - official site.
Getting started
<!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://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 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.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
Bootstrap Components
Bootstrap Components
Overview
- Bootstrap provides tons of reusable components like buttons, navigation, alerts, carousel, and more.
- Bootstrap Components docs
Buttons
See the Pen Bootstrap: Buttons by Iva Popova (@webdesigncourse) on CodePen.
Page Navigation
See the Pen Bootstrap:Page navigation by Iva Popova (@webdesigncourse) on CodePen.
Carousel
See the Pen Bootstrap: Carousel by Iva Popova (@webdesigncourse) on CodePen.
The Bootstrap Grid System
The Bootstrap Grid System
Overview
- Bootstrap 4 grid system is an excellent way to create responsive layouts
- Reference: Grid System docs
The Basics - demo
See the Pen Bootstrap: Grid System by Iva Popova (@webdesigncourse) on CodePen.
The Basics
- The grid system of Bootstrap 4 allows you to divide a row into 12 columns of equal width.
- We can specify how many columns a column width should be (i.e. a column can span 2 columns or more)
- The grid can also be responsive and rearrange depending on the screen width or window size.
Responsive Grid Classes
There are five classes in Bootstrap 4 which define the responsiveness of the grid element:
.col-*:for screens narrower than 576px..col-sm-*:for screens wider than 576px..col-md-*:for screens wider than 768px..col-lg-*:for screens wider than 992px..col-xl-*:for screens wider than 1200px.
These classes can be combined so you can set layouts for different screen sizes. Each of these classes scale up, not down..
Bootstrap Resources & Plugins
Bootstrap Resources & Plugins
- Official Bootstrap Resources & Plugins
- BBBootstrap - House of cool snippets
These slides are based on
customised version of
framework