Bootstrap is the simplest framework used to create both mobile and desktop friendly responsive websites without any prior programming language experience.
Mark Otto and Jacob Thornton, dLocation
evelopers from Twitter, developed an internal tool while working in twitter company. It was named as Twitter Blueprint. Months later, many developer from twitter started to contribute to this internal tool. Later it was renamed as Bootstrap and was released as an open source project in GitHub on 19th August 2011.
Compatibility with browsers and devices
Bootstrap is compatible with all the latest versions of web browsers namely Google Chrome, Microsoft Internet explorer, Microsoft Edge, Firefox, Safari, Android Browser and WebView.
Bootstrap can be included from the Content Delivery Network(CDN) into the webpage or it can be downloaded from the official website
Webpage should have HTML5 doctype
Viewport meta tag utilization
For internet explorer web browser,it should meet the latest rendering mode
Covering all above guidelines, Bootstrap template shouled look like below
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Responsive meta tag is added to ensure proper rendering and zooming on all the devices with different viewports.
History of bootstrap
Mark Otto and Jacob Thornton, dLocation
evelopers from Twitter, developed an internal tool while working in twitter company. It was named as Twitter Blueprint. Months later, many developer from twitter started to contribute to this internal tool. Later it was renamed as Bootstrap and was released as an open source project in GitHub on 19th August 2011.
Compatibility with browsers and devices
Bootstrap is compatible with all the latest versions of web browsers namely Google Chrome, Microsoft Internet explorer, Microsoft Edge, Firefox, Safari, Android Browser and WebView.
How to get the bootstrap?
Bootstrap can be included from the Content Delivery Network(CDN) into the webpage or it can be downloaded from the official website
Bootstrap usage guidelines
Webpage should have HTML5 doctype
Viewport meta tag utilization
For internet explorer web browser,it should meet the latest rendering mode
Covering all above guidelines, Bootstrap template shouled look like below
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Responsive meta tag is added to ensure proper rendering and zooming on all the devices with different viewports.
Pagination
Paging also known as pagination is the process of dividing contents into unique pages in sequential order. It helps for easier navigation. Webpage rendering pagination will have below look.<nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> </nav>