BS3 Introduction





BS3 Introduction


What is Bootstrap?

  • Bootstrap is a widely used css library, that consist of too many css classes and we use those css classes to design our webpages.
  • Bootstrap is a free front-end framework that makes web-designing faster and easier.
  • It includes HTML and CSS designed templates with optional Javascript plugins.
  • Bootstrap provides us the ability to develop responsive web pages easily and fastly.

What is meant by Responsive designs?

A web page that automatically adjusts itself in diffrent device sizes from large desktop devices to small mobile devices.

Bootstrap Example

Below is bootstrap example in which you can see we attached bootstrap and jquery files, in bootstrap.min.css file there are all css classes used by bootstrap, and in bootstrap.min.js file there are all javascript functions used by bootstrap. 

<!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.1/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.1/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>
  
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

</body>
</html>

Output :

In above output you can see its fully responsive webpage, because we made this by using bootstrap. In above code you can also see we used some classes like jombotron , text-center , container , row , col-sm-4 these are all classes of css that are all defined in bootstrap file linked above, and you will learn about all these class names in next lectures.

About Bootstrap

Mark Otto and Jacob Thronton developed Bootstrap at Twitter In August,2011 Bootstrap was released on GitHUb as an opensource platform.

Why we use Bootstrap?

  • Easy to use: Anybody with just basic knowledge of HTML and CSS can start working on Bootstrap
  • Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops
  • Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework
  • Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Edge, Safari, and Opera)

How to link Bootstrap to our web page?

There are two ways by which we can link Bootstrap to our web pages:

  • By downloading library from Bootstrap offical site (getbootsrap.com).
  • Linking Bootsrap through CDN

Linking Bootstrap by downloading library:

Bootstrap library can be downloaded from getbootstrap.com.

Bootstrap through CDN:

We can also use Bootstrap through it saves us from downloading and hosting Bootstrap file.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
The advantage of using CDN over the self hosted library is that it is mostly used and often it is pre saved in the viewer's cache memory. As files in cache memory are not reloaded by the browser therefore it increases the speed of the web page.

First web page with Bootstrap

firstly, we have to write basic HTML syntax as shown below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
   <body>
   </body>
</html>

Bootstrap 3 is designed to be responsive to mobile devices. Mobile-first styles are part of the core framework.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">

We use initial-scale=1 to set the initial zoom level of the webpage when the browser reloads while width=device-width matches the width of the webpage with the device width.

Bootstrap always demands a container to wrap the webpage content. There are two classes of container exsists in bootstrap:

  • .container is used to have fixed width container.
  • .container-fluid is used to have a fullll width container. 

Here are two examples given below:

  • The .container class:
<!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.1/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.1/js/bootstrap.min.js"></script>
</head>
<body>
  
<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container class.</p> 
  <p>The .container class provides a responsive fixed width container.</p>           
</div>

</body>
</html>

Output :

  • The .container-fluid class :
<!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.1/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.1/js/bootstrap.min.js"></script>
</head>
<body>
  
<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>      
  <p>This part is inside a .container-fluid class.</p> 
  <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>           
</div>

</body>
</html>

Output :

 

 




Our Services

Below is the list of other services that we are providing to our valuable customers.

If you want to Grab any of our Service you can contact us on given contacts

  • Website Development
  • Software Development
  • Android Apps Development
  • Hosting + Domain
  • Search Engine Marketing (SEM)
  • Search Engine Optimization (SEO)
  • Social Media Marketing (SMM)
  • SMS Marketing
  • Email Marketing
  • Wordpress Development
  • PHP Open Cart Development
  • Digital Media Marketing
  • Digital Brand Promotion
  • Graphic Designing
  • Video Animation