You can start using Bootstrap 4 in your website by including it from CDN(Content Delivery Network) or downloading from getbootstrap.com.
The Bootstrap 4 can be used in the website by including it from Content Delivery Network.
Use the below compiled Bootstrap's CDN of CSS and JS in your project.
Following are some components, which require jQuery −
Used for closable alerts
Toggle the states by using buttons and checkboxes/radio buttons and collapse for toggling content
Carousel for slides, controls, and indicators
Dropdowns (uses the Popper.js for perfect positioning)
Open and close the Modals
For collapsing the Navbar
Tooltips and popovers (uses the Popper.js for perfect positioning)
You can download the Bootstrap 4 from https://getbootstrap.com/docs/4.1/getting-started/download/. When you click on this link, you will get to see a screen as shown below −
Here you can see two buttons −
For better understanding and ease of use, we shall use precompiled version of Bootstrap throughout the tutorial. As the files are complied and minified, you don't have to bother every time including separate files for individual functionality.
Once the compiled version Bootstrap 4 is downloaded, extract the ZIP file, and you will see the following file/directory structure −
As you can see, there are compiled CSS and JS (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*).
If you have downloaded the Bootstrap 4 source code, then the file structure would be as follows −
The dist/ folder include everything listed in the precompiled download section above.
The docs/examples/, includes source code for Bootstrap documentation and examples of Bootstrap usage.
The below example specifies simple web page of Bootstrap 4 −
<html lang = "en"> <head> <!-- Meta tags --> <meta charset = "utf-8"> <meta name = "viewport" content = "width=device-width, initial-scale = 1, shrink-to-fit = no"> <!-- Bootstrap CSS --> <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity =" sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonymous"> <title>Bootstrap 4 Example</title> </head> <body> <h2>Hello, world!!! Welcome to Tutorialspoint...</h2> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <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.3/umd/popper.min.js" integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin = "anonymous"> </script> <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin = "anonymous"> </script> </body> </html>
It will produce the following result −