Bootstrap 4 Get Started, Introduction, What is Bootstrap?
What is Bootstrap?
Bootstrap is a free front-end framework for faster and easier web development.
Bootstrap is used to create responsive designs very easily.
What is Responsive Web Design?
Responsive web design is a design for a website that can easily adjust to all devices, from small phones to large desktops.
History of Bootstrap:
Bootstrap was developed on Twitter by Mark Otto and Jacob Thornton and released in 2011 on GitHub as an open-source product.
In June 2014, Bootstrap was considered the No. 1 project on GitHub!
Why use bootstrap?
Advantages of Bootstrap:
Easy to use: Anyone who knows HTML and CSS can start using Bootstrap.
Responsive Feature: Bootstrap's Responsive CSS easily adjusts to phones, tablets, and desktops.
Mobile-First Priority: In Bootstrap (3), a part of the Mobile-First Style Core Framework.
Browser Support: Bootstrap supports almost all modern browsers (chrome, firefox, internet explorer, safari, and opera).
Where to find bootstrap?
There are two ways to use Bootstrap on your web site.
Download from getbootstrap.com
Adds bootstrap from CDN
If you want to download and host your own bootstrap, go to getbootstrap.com, and follow the steps.
If you do not want to manually download and host, you can add it from CDN (CDN = Content Delivery Network).
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
An advantage of using Bootstrap CDN:
Bootstrap is downloaded from MaxCDN when users visit other sites. As a result, when they visit your website it will load from the cache which will ensure faster loading.
Create the first web page with bootstrap
1. Add HTML (5) DOCTYPE.
HTML elements and CSS properties are used in Bootstrap, for which it is mandatory to set HTML (5) DOCTYPE.
Always add HTML (5) DOCTYPE at the beginning of the page
2. Bootstrap (3) Mobile-First
Bootstrap (3) has been made more responsive to mobile devices. Mobile-first style, a part of the core framework.
Confirm the <meta> tag in the <head> element for proper output and touch zooming:
<meta name="viewport" content="width=device-width, initial-scale=1">
Width=device-width is used to set the page width based on the screen-width of the device (depending on the device).
Initial-scale=1 is used to set the initial zoom of the page when it is first loaded by the browser.
The element in the bootstrap needs to be placed in a container.
There are two types of containers in Bootstrap. Save the container according to your needs:
Use the .container class to create responsive fixed-width containers.
Use the .container-fluid class to measure the full width of the viewport to a full-width container.
Note: Containers are not nestable (you cannot place containers in containers if you wish).
Two basic bootstrap pages
The following example shows the basic page of Bootstrap with code:
- <!doctype html>
- <html lang="en">
- <!-- here Required meta tags -->
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
- <!-- here Bootstrap CSS -->
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
- <title>Bootstrap, Hello, world!</title>
- <h1>Bootstrap, Hello, world!</h1>
- <!-- here jQuery first, then Popper.js, then Bootstrap JS -->
- <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
Bootstrap, Hello, world!
bootstrap download, bootstrap install, bootstrap 4 installs, bootstrap 4 downloads, bootstrap setup, bootstrap 4 setups, bootstrap 4 CDN
Facebook Comments (0)
So nice post, Thank You.