Bootstrap 4 Tutorial
What is Bootstrap?
Bootstrap is a CSS (Cascading Style Sheets) framework, which is used to develop a responsive website. It is an open-source and mobile-first front-end framework. It has design templates that are based on HTML and for typography, buttons, forms, navigation, etc.
Bootstrap is a web framework that aims to make easier and faster development of web pages. It also consists of many Javascript components, which are in the form of jQuery plugins. These plugins provide many other user interface elements like tooltips, dialog boxes, and carousel.
History of Bootstrap
Bootstrap, previously known as Twitter Blueprint, was developed by Mark Otto and Jacob Thornton as a framework on Twitter to make it compatible with other internal tools. Bootstrap was released as an open-source project on 19 august 2011.
Why use Bootstrap?
Save time - Bootstrap consists of predefined design templates and classes that can be used for saving time and effort.
Responsiveness - Bootstrap helps in developing responsive websites that are automatically adjustable according to the device size.
Browser compatibility - Bootstrap is compatible with almost every browser like Google Chrome, Mozilla Firefox, Internet Explorer, etc.
Open-source – It is an open-source framework, which means it is freely available to everyone.
Bootstrap 4
Bootstrap 4 is the latest version of Bootstrap that consist of new components, new stylesheets, and more responsiveness. The first alpha version of Bootstrap 4 was released on 19 august 2015, and the first beta version was released on 10 August 2017.
Where to get Bootstrap?
There are two ways of using Bootstrap 4; either you can include Bootstrap 4 from CDN (Content Delivery Network) or download Bootstrap 4 from the official site https://getbootstrap.com.
Environment Setup for Bootstrap 4 CDN
CSS (Cascading style sheets)
You have to put the CSS <link> into the <head> tag. The link is givenbelow:-
Compiled and minified CSS
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
JS (JavaScript)
Some components need JavaScript to perform the task. They especially need jQuery, Popper.js, and JavaScript plugins.
You have to place the <script> just before the </body> tag is close. The link is given below:-
jQuery library
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
Popper JS
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
Latest compiled Java Script
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
Create Web page using Bootstrap 4
- Add the HTML5 DOCTYPE
Bootstrap 4 needs HTML 5 DOCTYPE because it uses HTML elements and CSS properties.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> </html>
- Bootstrap 4 is mobile first
Bootstrap is designed so that websites are responsive on mobile.
<meta name =”viewport” content=”width=device-width, initial-scale=1”>
Example
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> </head> <body> <div class="container"> <h1>Welcome</h1> <p>This is the first page of Bootstrap</p> <p>The .container class provides a responsive fixed width container.</p> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </body> </html>
Output
Bootsrtap Index
- Bootsrtap introduction
- Bootsrtap Layout
- Bootsrtap Grid system
- Bootsrtap Content
- Bootsrtap Colors
- Bootstrap 4 Tables
- Bootstrap 4 Images
- Bootstrap 4 Jumbotron
- Bootstrap 4 Alerts
- Bootstrap 4 Buttons
- Bootstrap 4 Button Group
- Bootstrap 4 Badges
- Bootstrap 4 Pagination
- Bootstrap 4 Progressbar
- Bootstrap 4 Spinners
- Bootstrap 4 dropdowns
- Bootstrap 4 Cards
- Bootstrap 4 List Groups
- Bootstrap 4 Collapse
- Bootstrap 4 Navs
- Bootstrap 4 Navbars
- Bootstrap 4 Forms
- Bootstrap 4 Inputs
- Bootstrap 4 Input Groups
- Bootstrap 4 Custom Forms
- Bootstrap 4 Carousel
- Bootstrap 4 Modal
- Bootstrap 4 Tooltip
- Bootstrap 4 Popover
- Bootstrap 4 Toast
- Bootstrap 4 Scrollspy
- Bootstrap 4 Utilities
- Bootstrap 4 Flex
- Bootstrap 4 Icons
- Bootstrap 4 Media objects
- Bootstrap 4 Filters
- Bootstrap 4 Card
- Bootstrap 4 Navbar
- Bootstrap 4 Margin classes