saftutorials.com
Getting Started

Bootstrap is a no 1 free CSS Framework in the World. You can make your website fully responsive that means mobile responsive using Bootstrap.


What is Bootstrap?

1. Bootstrap is free CSS Framework.

2. Bootstrap make a website responsive for all device like PC, Tablet, Mobile, and others device.

3. Bootstrap use HTML and CSS with JS for buttons, forms, table, nav menu, button, typography, navigation, modals, image carousels and more, like alternate of JavaScript.

4. Bootstrap has default CSS its make easy your web design.



Why use Bootstrap?

1. Because Bootstrap has huge default awesome CSS class that can make easy your web design life. You can`t believe that Bootstrap what change your design. 

2. Because Bootstrap makes your website fully mobile responsive.

3. Because you can get available huge free Bootstrap Template in the World.



Why make my/your Website responsive?

Last few year ago Google updates their Search Algorithm. Where Google declare that which website is responsive, Google shows their firstly.


How to Download Bootstrap?

You can download Bootstrap their Official Website, or download it from Github.


How to use Bootstrap without Downloading?

If you do not want to download. You can use it by CDN. 


Bootstrap CDN Minified.

<!-- Compiled and minified CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



Bootstrap CDN Unminified.

<!-- Unminified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
<!-- Unminified jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<!-- Unminified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>



Note: No need jquery if you don`t use modal, tooltip.



How to use Bootstrap?

Step 1: 

First, make your website HTML5. Because Bootstrap uses latest HTML and CSS elements. So you if you want to use Bootstrap you should make your web page doctype 


Step 2: 

Set Charset UTF-8


Step 3: 

Set viewport 

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


Step 4: 

Declare Container:

There is two container in Bootstrap. 

1) .container - this class make content 100% with left side and right side margin.

2) .container-fluid - this class makes content also 100% without left side and right side margin.


Basic Structure of Bootstrap with class .container


<!DOCTYPE html>
<html lang="en">
<head>
  <title>My First Boostrap Website</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<h1 class="text-center">Hello, This is my First Bootstrap Website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.q</p> 
</div>
</div>
</body>
</html>





Basic Structure of Bootstrap with class .container-fluid


<!DOCTYPE html>
<html lang="en">
<head>
  <title>My First Boostrap Website</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<h1 class="text-center">Hello, This is my First Bootstrap Website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.q</p> 
</div>
</div>
</body>
</html>



We think if you learn this topic completely you can start a fully responsive website using Bootstrap.

Find us on

Facebook Google Plus Twitter Pinterest YouTube

web statistic