bootstrap

What is Bootstrap?

Bootstrap is a CSS and JavaScript framework, basically made for twitter. It is essentially a collection of CSS and JavaScript files which enables you to create great-looking responsive websites. Responsive means the site looks completely different depending on the size of the user screen. That’s really important for web developers at the moment because the use of mobile phones is increasing very rapidly.

It is really easy to understand and to work on, but really powerful and actually powers a huge proportion of the Web. It is used to make websites that can look good on every screen size from a tiny phone to a massive computer screen.

Including Bootstrap in your Webpage

To use it on your website you just need to include the following code inside the <head></head> of the webpage.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

The above code includes the bootstrap.min.css file in your webpage. To include javascript file the following code should be used:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

The first <script> includes the Bootstrap’s jquery library jquery.min.js. The second <script> is used to include the javascript library bootstrap.min.js.

Note: The CSS file must be included very first, after that the jQuery and JavaScript file will be added. This is because the jQuery and JavaScript methods will be applied to the Bootstrap’s CSS components.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>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.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="jumbotron text-center">
        <h1>My First Bootstrap Page</h1>
        <p>Resize this responsive page to see the effect!</p>
    </div>
</body>
</html>

Note: The above links are shown with respect to version 3.4.0. You can get the latest version for your website from http://getbootstrap.com.

There are many alternatives to Bootstrap available on the web that works similarly.

Bootstrap alternatives

  1. Foundation
  2. Zimit
  3. Ink
  4. HTML KickStart
  5. KickStrap
  6. Pure CSS
  7. HTML5 Boilerplate
  8. YUI

For a detailed study on Bootstrap visit http://getbootstrap.com.

Leave a Reply

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