Bootstrap

Introduction

  • Bootstrap is the most popular HTML and CSS front-end framework built for the developer to design elegant, powerful and responsive interfaces for web pages.

  • It provides a mobile-first design front-end framework to ensure web pages can adapt to fit any screen size to meet the responsive requirements of modern web interfaces.

  • At its base, Bootstrap allows for responsive web design and other features in a 12 column 940px wide grid.

  • It provides the base code CSS and web interface components to quickly start a web project.

  • To start a new project, you just need to include the bootstrap.css file and optionally, the boostrap.js file, and you’re ready to go!

 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <title>My First Bootstrap Template</title>
 5    <meta name="viewport" content="width=device-width, initial-scale=1">
 6    <link href="css/bootstrap.min.css" rel="stylesheet">
 7  </head>
 8  <body>
 9    <h1>Hello world!</h1>
10    <script src="js/bootstrap.min.js"/>
11  </body>
12</html>

  • The HTML provided above shows how to include bootstrap into your project.

  • Line 5 is optional but recommended to be included to take advantage of Bootstrap’s mobile-first framework for responsive web design. More information on this is provided at https://getbootstrap.com/docs/4.5/layout/overview/