Bootstrap 4 – Environment Setup
Bootstrap 4 is the latest version of Bootstrap. In this section, it is shown how to download and setup Bootstrap 4.
There are two ways of using Bootstrap 4 in the Website:
- The first method that can be used is to start using Bootstrap 4 by inserting it from the CDN which stands for Content Delivery Network.
- And the second method is to download it from getbootstrap.com.
The Bootstrap 4 can be used in the website by inserting it from the CDN which is short for – Content Delivery Network.
The code given below can be used to compile the Bootstrap’s CDN of CSS and JS in the project.
There are some components that extensively require the jQuery. Following are some of these components –
- For using the closable alerts
- For toggling the states with the help of the buttons and the checkboxes or radio buttons and using the collapse for toggling content
- For the purpose of carousel for slides, controls, and indicators
- For using Dropdowns (the Popper.js can be used for perfect positioning)
- For opening and closing the Modals
- For collapsing the Navbar
- For using the tooltips and popovers (the Popper.js can be used for perfect positioning)
- For using various other components
Downloading Bootstrap 4:
The Bootstrap 4 can be downloaded from this link given below: https://getbootstrap.com/docs/4.0/getting-started/download/.
Once the link has been opened, a window will open:
- Sass compiler like Libsass or Ruby Sass is supported for compiling the CSS in the website.
- Autoprefixer for CSS vendor prefixing.
Precompiled Bootstrap 4
Once the compiled version Bootstrap 4 is downloaded, extract the ZIP file, and you will see the following file/directory structure –
There are compiled CSS and JS (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*).
Bootstrap 4 Source Code
- The dist/ folder consists of everything that is listed in the pre-compiled download section that is given above.
- The docs/examples/ only consists of the source code for Bootstrap documentation and examples of Bootstrap usage respectively.
- The less/ in the source code given above is basically responsible for the source code for the icon fonts in Bootstrap 4.
- Apart from that, the other included files provide support for other important components such as the packages, the information about the license, and anything related to development.
Creating the First Web Page with the help of Bootstrap 4:
The example given below can be used to create a very simple and easy to understand web page for Bootstrap 4 –
The following output will be visible, after compiling this code: