What is Bootstrap ?

Bootstrap is a free front-end framework for faster and easier web development.
Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins.
Bootstrap also gives you the ability to easily create Responsive designs.

BootStrap Logo

What is Responsive ?

Responsive Web design is the approach that proposes that design and development should be respond to the user’s behavior and environment based on the screen size, platform and orientation.
A Unique Site that can adapt to any screen size, today or in the future.
Automatically to resize, hide, shrink, or enlarge, a website, while using HTML and type CSS in responsive web design. To make it look better on all devices (desktops, tablets, and phones).

What is Responsive

Responsive vs Adaptive:

Responsive sites and adaptive sites are the same in that they both change presence based on the browser environment they are being viewed on (the most specific thing is the browser's width).
Responsive websites respond to the size of the browser at any given point. Browser width shouldn’t be considering the site is adjusts to the layout an optimized to the screen.
Adaptive websites at a specific point to be adapt width of the browser. In other words, the website is only concerned about the browser being a specific width, at which point it adapts the layout.

Responsive Vs Adaptive

Relative Units Vs Static Units:

The unit’s length is measured can be either absolute or static such as such as pixels, points and so on, or relative such as percentages (%) and em units.
The units are compulsory as non-zero values, because there is no default unit. Missing or ignoring a unit would be treated as an error. While if the value is 0, the unit could be omitted.
Relative length units require a length relative to another length property. Use the relative units such as em or percentage (%) can more easily scale from one output environment to another.
The absolute or static units are consisting of the physical units (in, cm, mm, pt, pc) and the px unit. It is highly dependent on the output medium.

Note: The length is a measurement containing a numeric value and a unit only such as 10px, 2em, 50% etc. The whitespace can't appear between the number and the unit.

Relative Vs Static Units

Read Also

Css Relative Mesaurement Units.

Vector Vs Images:

An image is generally such as jpg, gif, png, and are widely used on the web. An image has a specific number of pixels. When we increase the image file without changing the number of pixels, the image will blurry to see.
Vector graphics are created by vector software. Vector images are mathematical calculations from one point to another that form lines and shapes. When we zoom into a vector graphic it will always look the same.

Vector Vs Images

Boostrap Glyphicon:

Using as glyphicons in text, buttons, toolbars, navigation, or forms:

Bootstrap Glyphicon

Sample Code:

                                    
                                        <!DOCTYPE html>
<html lang="en">
<head>
  <title>Wikitechy Bootstrap Example</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.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2> Wikitechy Glyphicon Examples</h2>
  <p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>
  <p>Envelope icon as a link:
    <a href="#"><span class="glyphicon glyphicon-envelope"></span></a>
  </p>
  <p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
  <p>Search icon on a button:
    <button type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-search"></span> Search
    </button>
  </p>
  <p>Search icon on a styled button:
    <button type="button" class="btn btn-info">
      <span class="glyphicon glyphicon-search"></span> Search
    </button>
  </p>
  <p>Print icon: <span class="glyphicon glyphicon-print"></span></p>      
  <p>Print icon on a styled link button:
    <a href="#" class="btn btn-success btn-lg">
      <span class="glyphicon glyphicon-print"></span> Print 
    </a>
  </p> 
</div>

</body>
</html>

                                

Output:

Bootstrap Glyphicon

History of Bootstrap:

Bootstrap, initially named Twitter Blueprint, was developed by Mark Otto and Jacob Thornton at Twitter as a framework to inspire consistency across an internal tool.
It was by Bootstrap, an open source project released on August 19, 2011. It has continued to be kept by Mark Otto, Jacob Thornton, and a small group of core developers, as well as a large community of contributors.
Bootstrap 2 was released on January 31, 2012. Added the twelve-column grid layout and responsive design components, the existing components to be changes occurs.
The Bootstrap 3 released on 19 August 2013, the first approach to mobile and using a flat design.
The first alpha version of Bootstrap 4 was organized on August 19, 2015.

Histroy of Bootstrap

Where to Get Bootstrap:

Download Bootstrap from getbootstrap.com
Include Bootstrap from a CDN.

Bootstrap CDN

Bootstrap Grid System:

Bootstrap's grid system allows up to 12 columns across the page.
Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built by flexbox.

Bootstrap Grid System

Bootstrap's grid system is responsive, and the columns will be re-arrange depending on the screen size.
On a big screen good to see with the content organized in three columns, but on a small screen it would be better if the content items were stacked on top of each other.

Girid System

Bootstrap Grid Size Screen:

The classes can be combined to create more dynamic and flexible layouts.

.col- (extra small devices - screen width less than 576px)
.col-sm- (small devices - screen width equal to or greater than 576px)
.col-md- (medium devices - screen width equal to or greater than 768px)
.col-lg- (large devices - screen width equal to or greater than 992px)
.col-xl- (xlarge devices - screen width equal to or greater than 1200px)

Note: The same widths for sm and md.

Grid Screen Size

Bootstrap Stacked-to-horizontal Grid Example

Bootstrap Grid

Sample Code:

                                    
                                        <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Grid Example</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.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1>Wikitechy Grid Example </h1>     
  <div class="row">
    <div class="col-sm-6" style="background-color:yellow;">
       Welcome To Wikitechy Tutorials
    </div>
    <div class="col-sm-6" style="background-color:pink;">
      Welcome To Wikitechy Courses
    </div>
  </div>
</div>   
</body>
</html>

                                

Output:

Bootstrap Grid System

Read Also

Ionic Grid.

Bootstrap Fluid container Example

Bootstrap Grid

Sample Code:

                                    
                                        <!DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap Grid Example</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.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
  <h1>Wikitechy Grid Example </h1>
  
  <div class="row">
   <div class="col-sm-6" style="background-color:yellow;">
            Welcome To Wikitechy Tutorials
    </div>
    <div class="col-sm-6" style="background-color:pink;">
            Welcome To Wikitechy Courses    
    </div>
  </div>
</div>   
</body>
</html>

                                

Output:

Bootstrap Grid Example

Bootstrap Typography:

Using typography feature of Bootstrap, we can create headings, paragraphs, lists and other inline elements.

Bootstrap Typography

Bootstrap Button:

To achieve the button styles , Bootstrap have some following classes:

.btn
.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link

Bootstrap Buttons

Sample Code:

                                    
                                        <!DOCTYPE html>
<html lang="en">
<head>
  <title>Wikitechy Example</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.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2> Wikitechy Button Styles</h2>
  <button type="button" class="btn">Basic</button>
  <button type="button" class="btn btn-default">Default</button>
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-success">Success</button>
  <button type="button" class="btn btn-info">Info</button>
  <button type="button" class="btn btn-warning">Warning</button>
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-link">Link</button>      
</div>

</body>
</html>


                                

Output:

Bootstrap Buttons

Button Sizes:

Bootstrap classes define the different button sizes are:

.btn-lg
.btn-sm
.btn-xs

Bootstrap Buttons

Sample Code:

                                    
                                        <!DOCTYPE html>
<html lang="en">
<head>
  <title>Wikitechy Bootstrap Example</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.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Wikitechy Button Sizes</h2>
  <button type="button" class="btn btn-primary btn-lg">Large</button>
  <button type="button" class="btn btn-primary">Normal</button>    
  <button type="button" class="btn btn-primary btn-sm">Small</button>
  <button type="button" class="btn btn-primary btn-xs">XSmall</button>
</div>

</body>
</html>



                                

Output:

Bootstrap Buttons

Block Level Buttons

A block level button spans the complete width of the parent element.
.btn-block class is used to create a block level button.

Bootstrap Block Level Button

Sample Code:

                                    
                                        <!DOCTYPE html>
<html lang="en">
<head>
  <title> Wikitechy Bootstrap Example</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.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Wikitechy Block Level Buttons</h2>
  <button type="button" class="btn btn-primary btn-block">Button 1</button>
  <button type="button" class="btn btn-default btn-block">Button 2</button>

  <h2>Wikitechy Large Block Level Buttons</h2>
  <button type="button" class="btn btn-primary btn-lg btn-block">Button 1</button>
  <button type="button" class="btn btn-default btn-lg btn-block">Button 2</button>

  <h2>Wikitechy Small Block Level Buttons</h2>
  <button type="button" class="btn btn-primary btn-sm btn-block">Button 1</button>
  <button type="button" class="btn btn-default btn-sm btn-block">Button 2</button>
</div>

</body>
</html>
                                

Output:

Bootstrap Buttons

Active/Disabled Buttons

A button can be set to an active or a disabled buttons.

.active - It specifies that the button should be active or pressed.
.disabled- It specifies that the button should be disabled or unclickable

Active/Disable Button

Sample Code:

                                    
                                        <!DOCTYPE html>
<html lang="en">
<head>
  <title>Wikitechy Bootstrap Example</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.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2> Wikitechy Button States</h2>
  <button type="button" class="btn btn-primary">Primary Button</button>
  <button type="button" class="btn btn-primary active">Active Primary</button>
  <button type="button" class="btn btn-primary disabled">Disabled Primary</button>
</div>

</body>
</html>

                                

Output:

Bootstrap Buttons

Bootstrap Pager

Pager is a form of pagination. It provides previous and next buttons.
.pager - This class is used to create previous/next buttons.

Bootstrap Pager

Sample Code:

                                    
                                        <!DOCTYPE html>
<html lang="en">
<head>
  <title>Wikitechy Bootstrap Example</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.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Pager</h2>
                 
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</div>

</body>
</html>

                                

Output:

Bootstrap Pager

Bootstrap Align Buttons

.previous and .next classes is used to align each button to the sides of the page:

Bootstrap Pager

Sample Code:

                                    
                                        <!DOCTYPE html>
<html lang="en">
<head>
  <title>Align Buttons Example</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.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2> Pager</h2>
                   
  <ul class="pager">
    <li class="previous"><a href="#">Previous</a></li>
    <li class="next"><a href="#">Next</a></li>
  </ul>
</div>

</body>
</html>

                                

Output:

Bootstrap Pager

Bootstrap Tooltip

The Tooltip plugin is pop-up box that looks when the user moves the mouse pointer over an element.
Plugins can be involved separately (using Bootstrap's separate "tooltip.js" file), or all at once (using "bootstrap.js" or "bootstrap.min.js").

How to Create a Tooltip

If you want to create a tooltip, add the data-toggle="tooltip" attribute to an element.
title attribute is used to specify the text that must be displayed inside the tooltip.

Bootstrap Tooltip

Sample Code:

                                    
                                        <!DOCTYPE html>
<html lang="en">
<head>
  <title>How To Create a Tooltip Example</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.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h3>Tooltip Example</h3>
  <a href="#" data-toggle="tooltip" title="Wikitechy">  Hover over me </a>
</div>

<script>
$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip();   
});
</script>
</body>
</html>

                                

Output:

Bootstrap Tooltip

Positioning Tooltips

Tooltip will display on top of the element by default.
data-placement attribute is used to set the position of the tooltip on top, bottom, left or the right side of the element.

Positioning Tooltip

Sample Code:

                                    
                                        <!DOCTYPE html>
<html lang="en">
<head>
  <title>Wikitechy Bootstrap Example</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.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h3>Wikitechy Tooltip Example</h3>
  <ul class="list-inline">
    <li><a href="#" data-toggle="tooltip" data-placement="top" title="Wikitechy">Top</a></li>
    <li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Wikitechy">Bottom</a></li>
    <li><a href="#" data-toggle="tooltip" data-placement="left" title="Wikitechy">Left</a></li>
    <li><a href="#" data-toggle="tooltip" data-placement="right" title="Wikitechy">Right</a></li>
  </ul>
</div>

<script>
$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip();   
});
</script>

</body>
</html>

                                

Output:

Bootstrap Positioning Tooltip

Bootstrap Button

Bootstrap Dropdown

Bootstrap Modal

Bootstrap Popover

Bootstrap Tooltip

Bootstrap Tabs

What is Bootstrap ?