bootstrap

Bootstrap

Bootstrap is very popular framework now a days for developing responsive websites. It is free to download http://getbootstrap.com/

Bootstrap includes forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins. It is compatible with all modern browsers such as Chrome, Firefox, Internet Explorer, Safari, and Opera

My First Bootstrap page

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Technologies Axis 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.3.7/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>
</head>
<body>
<div class=”container”>
<h1>Technologies Axis Bootstrap Page</h1>
<p>Complete web solution company</p>
</div>
</body>
</html>

Some main Classes used in bootstrap

.container :- for responsive fixed width container
.container-fluid :- for responsive full width container

In above example I showed “container” class you can try with “container-fluid” class as well you just need to change this text ‘<div class=”container”>’ to ‘<div class=”container-fluid”>’ (Line 12)

In this way you will come to know the difference between these two classes

Bootstrap Grid System

Bootstrap grid system is really simple. It is divided into 12 columns

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Technologies Axis 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.3.7/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/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”>
<div class=”col-md-12″>
<div class=”col-md-4″>Column 1</div>
<div class=”col-md-4″>Column 2</div>
<div class=”col-md-4″>Column 3</div>
</div>
</div>
<div class=”row”>
<div class=”col-md-12″>
<div class=”col-md-3″>Column 1</div>
<div class=”col-md-3″>Column 2</div>
<div class=”col-md-3″>Column 3</div>
<div class=”col-md-3″>Column 4</div>
</div>
</div>
<div class=”row”>
<div class=”col-md-12″>
<div class=”col-md-2″>Column 1</div>
<div class=”col-md-2″>Column 2</div>
<div class=”col-md-2″>Column 3</div>
<div class=”col-md-2″>Column 4</div>
<div class=”col-md-2″>Column 5</div>
<div class=”col-md-2″>Column 6</div>
</div>
</div>
</div>
</body>
</html>

  • (1-12) depict a portion of the total width of any div
  • dives divided into 12 columns
  • we include two col-md-6 in col-md-12

<div class=”col-md-12″>
<div class=”col-md-6″>Column 1</div>
<div class=”col-md-6″>Column 2</div>
</div>

here class col-md-6 will automatically takes the half width

If you worked according to this it will automatically adjust in all the devices such as desktop, Mobile, Tab etc

Default sizes for heading

We use h1,h2,h3,h4,h5,h6 tags for heading.

h1 Technologies Axis (36px)

h2 Technologies Axis (30px)

h3 Technologies Axis (24px)

h4 Technologies Axis (18px)

h5 Technologies Axis (14px)
h6 Technologies Axis (12px)

It will automatically adjust on all the devices

Bootstrap Tables

As we know Tables consists of rows and columns. Lets check how to implement responsive tables in bootstrap. Here is the code

<!DOCTYPE html>
<html>
<head>
<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.1.1/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>
</head>
<body>

<div class=”container”>
<h2>Technologies Axis Table</h2>
<div class=”table-responsive”>
<table class=”table”>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sandeep Verma</td>
<td>sandeep_verma1985@yahoo.com</td>
<td>647-575-9815</td>
</tr>
</tbody>
</table>
</div>
</div>

</body>
</html>

You just need to add class “table-responsive” to make the tables responsive

Responsive images

<img class=”img-responsive” src=”…..” alt=”Technologies Axis”> to make the image responsive you just need to add “img-responsive” class

Image in the center of div

<img class=”img-responsive center-block” src=”…..” alt=”Technologies Axis”> to place image in the center you just need to add “center-block” class

Image Circle

img-circle

Image Rounded Corner

img-rounded

Thumbnail

img-thumbnail

Bootstrap Alerts

<div class=”alert alert-success”>
<strong>Success!</strong> Technologies Axis Success
</div>
<div class=”alert alert-info”>
<strong>Info!</strong> Technologies Axis Success Info
</div>
<div class=”alert alert-warning”>
<strong>Warning!</strong> Technologies Axis Warning
</div>
<div class=”alert alert-danger”>
<strong>Danger!</strong> Technologies Axis Danger
</div>

You just need to show divs according to the message

So this is the basic functionality of bootstrap. If you want to read in detail then click here

Real ALL

 

Bootstrap

You May Also Like

One thought on “Bootstrap

Leave a Reply

Your email address will not be published. Required fields are marked *