Set up your basic web page structure with Bootstrap 4.
Hello everyone, this is my 2nd article in this category called 'Bootstrap' and now, I am going to tell you how you will set up your very first web page with Bootstrap 4. This is very easy you have to just follow my instructions and finally, you will get better results.
Before going to the actual topic, I want to tell you that Bootstrap 3 is the most stable version of bootstrap because it's completely built, and also its team still support for bug fixing. Bootstrap 4 is the latest release, currently in beta version (very close to the final version). I will use Bootstrap 4 in my articles because it's the latest release and getting popularity day by day.
Where to get Bootstrap 4?
There are two ways to get started with bootstrap.
You can include bootstrap 4 from a CDN (Content Delivery Network)
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1 part sets the initial zoom level when the page is first loaded by the browser.
Quick start with a basic web page
Use following code for a basic web page template in Bootstrap 4. This template contains all necessary HTML tags, links to CSS and JS files, as well as the viewportmeta tag.
I am using CDN for this example, you can include these files by downloading from its official website.
<!-- DOCTYPE -->
<!-- Give a proper title to your web page -->
<title>Bootstrap 4 Basic Web Page Template</title>
<!-- Viewport Meta Tag -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS CDN Link-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous" />
<!-- YOUR PAGE CONTENT STARTS HERE -->
<!-- YOUR PAGE CONTENT ENDS HERE -->
<!-- jQuery library CDN Link-->
<script src="src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Popper JS CDN Link -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
As you see, how easy it is to set up your first basic web page structure with bootstrap 4. But still, if you feel any difficulty in making your web page, just tell me your question in the comment section below. I will let you know as soon as possible.