Bootstrap is world’s most popular front-end component library for developing responsive, mobile-first sites with HTML, CSS, and JS. It is free and open source framework. You can download the files
from here.
Bootstrap v4 is the newest version of Bootstrap with new components which is completely free to download and use! Click here to know what's new in Bootstrap v4.
Either you can download Bootstrap v4 form here, or you can directly include requires files from MaxCDN
<!-- Latest bootstrap v4 file --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <!-- jQuery library file --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <!-- bootstrap v4js file --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
Bootstrap requires the use of the HTML5 doctype.
<!doctype html> <html lang="en"> ... </html>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
For improved cross-browser rendering, bootstrap v4 use Reboot to correct irregularity across browsers and devices while providing slightly more options to common HTML elements.
Bootstrap 4 provides two container classes, .container and .container-fluid
.container This provides a responsive fixed width container
.container-fluid This provides a full width container, spanning the entire width of the viewport
.container<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap v4 container Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Latest bootstrap v4 file --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <!-- jQuery library file --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <!-- bootstrap v4js file --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>Bootstrap v4 Page with container</h1> <p>Lorem ipsum </p> </div> </body> </html>
.container-fluid<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap v4 container-fluid Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Latest bootstrap v4 file --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <!-- jQuery library file --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <!-- bootstrap v4 js file --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>Bootstrap v4 Page with container-fluid</h1> <p>Lorem ipsum dolor sit amet</p> </div> </body> </html>
