Bootstrap is a popular framework that can help build responsive mobile-first sites using Bootstrap CDN and templar starter page.
You can download Bootstrap from here. If you do not want to host Bootstrap, you can use a CDN to do that for you.
Bootstrap requires JS to run and, therefore, specific tags need to be added that enable these and ensure smooth usage. Append the following code within the head tag:
You can copy the CSS provided by the Bootstrap by adding the following to the head of the HTML page:
<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”>
This should be added before any other customized stylesheet is uploaded because it avoids overwriting any user-defined styles.
Add the HTML5 doctype and the language at the start of the page.
It is designed to be responsive to mobile devices, therefore, the following meta tag must be appended to ensure proper rendering.
<meta name=“viewport” content=“width=device-width, initial-scale=1, shrink-to-fit=no”>
width=device-width ensures that the page renders according to the width of the device, and the
initial-scale=1 informs the page how scaled it should be. The
shrink-to-fit=no informs the webpage not to shrink the webpage.
The framework works on containers. You can either use
.container, which is of fixed width, or you may use the
.container-fluid container that occupies 100% of the available page width.
You can simply append the following at the start of your program:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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.5.2/js/bootstrap.min.js"></script> </head> </html>
View all Courses