Getting Started with Bootstrap 4
utopian-io·@agyapong·
0.000 HBDGetting Started with Bootstrap 4
#### What Will I Learn?
- How To install Bootstrap by downloading and from CDN
- You will get to know the difference between Bootstrap 3 and Bootstrap 4
- In this Tutorial you are going to learn the difference between .container and .container-fluid
#### Requirements
- Basic Knowledge in HTML
- Basic Knowledge in CSS
- Basic Knowledge in JAVASCRIPT
#### Difficulty
- Basic
#### Tutorial Contents
Bootstrap is a free and open-source framework for easier web development. It's the popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
What is Responsive Web Design?
RWD is creating a website for it to adjust itself on any device.
Bootstrap 3 vs. Bootstrap 4
Bootstrap 4 is the newest version of Bootstrap; with new components, faster stylesheet and more responsiveness.
Why Use Bootstrap 4?
Advantages of Bootstrap 4:
- Easy to use
- Responsive features
- Mobile-first approach
- Browser compatibility
Where to Get Bootstrap 4?
There are two ways to start using Bootstrap 4 on your own web site.
You can:
- Include Bootstrap 4 from a CDN
- Download Bootstrap 4 from getbootstrap.com
Bootstrap 4 CDN
If you don't want to download and host Bootstrap 4 yourself, you can include it from a CDN (Content Delivery Network).
MaxCDN provides CDN support for Bootstrap's CSS and JavaScript. You must also include jQuery:
MaxCDN:
```
<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<!-- jQuery library -->
<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.12.9/umd/popper.min.js"></script>
<!-- JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
```
Create First Web Page With Bootstrap 4
1. Add the HTML5 doctype
Bootstrap 4 uses HTML elements and CSS properties that require 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">
<head>
<meta charset="utf-8">
</head>
</html>
```
2. Bootstrap 4 is mobile-first
Bootstrap 4 is designed to be responsive to all mobile devices. 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">
```
3. Containers
Conainers are elements use to wrap the site. There are two container classes to choose from:
- The fixed container class provides a responsive fixed width container. As you resize your browser, its width remains intact.
- fluid container class provides a full width container, spanning the entire width of the viewport. It will expand and contract fluidly as you resize the browser.
**EXAMPLE:**
`
<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@agyapong/getting-started-with-bootstrap-4">Utopian.io - Rewarding Open Source Contributors</a></em><hr/>