Jan 19, 2018 Aaqib Javed

Get Started With Bootstrap 4 | A Basic Startup Web Page
4   9   26   Frameworks - Bootstrap 4

Facebook   Twitter   Google   Email


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)
  • Download bootstrap 4 from getbootstrap.com

From CDN

MaxCDN provides CDN support for bootstrap CSS files and JS files, you must also include jQuery.

Add the following link to your head tag:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

Add the following links to the bottom of your webpage just before the </body> tag.

<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Bootstrap 4 requires jquery popper.js for javascript components (like models, popovers, tooltips etc).

Download Bootstrap 4

  • You can download bootstrap 4 from its official website, just go to Download Bootstrap 4, and your download will start automatically (If not then go to official website of bootstrap).
  • To download jquery, go to this link Download JQuery, it gives you complete minified version of jquery. Copy that code and make a new file with '.js' extension and paste that code into it.
  • To download popper.js, go to this link Download Popper.js.

After getting files, give correct links inside Head Tag of your HTML file page.

Create Your First Web Page With Bootstrap 4

1. Add the HTML5 doctype

Always include the HTML5 doctype at the beginning of  the page, along with the lang attribute and the correct character set:

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8"> 

2. Add the Viewport <meta> Tag

As bootstrap is a mobile-friendly framework so to ensure proper rendering and touch zooming, add the following <meta> tag inside the <head> element:

<meta name="viewport" content="width=device-width, initial-scale=1"> 

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 viewport meta tag. 

I am using CDN for this example, you can include these files by downloading from its official website.

<!-- DOCTYPE -->
<!DOCTYPE html>
<html lang="en">
<!-- Give a proper title to your web page -->
<title>Bootstrap 4 Basic Web Page Template</title>
<meta charset="utf-8">
<!-- 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/css/bootstrap.min.css" />



<!-- To load page faster, place javascript links to the bottom of webpage -->

<!-- jQuery library CDN Link-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<!-- Popper JS CDN Link -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<!-- Latest Compiled and Minified Bootstrap JavaScript CDN Link -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></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.

Is this helpful?   Yes   No

Facebook   Twitter   Google   Email
Click to copy
Successfully copy the link to share

Leave a Comment

Comments (9)

Thank you for your feedback
You are now following
Request Sent! Wait for Approval
Removed From Following
Something wents wrong!
Thank you for your comment