BS4 Introduction





BS4 Introduction


What is Bootstrap?

  • -  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 devices ranges from large desktops to small mobile devices.

Bootstrap 4 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/4.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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.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>

Bootstrap 3 vs Bootstrap 4

Bootstrap 4 is the latest version of the Bootstrap . It has new components and enables faster style sheet and more responsive.Bootstrap 4 supports all browsers fresh stable release.Therefore, IE 9 and old browsers are not supported .

Bootstrap 3 is the most stable version of the Bootstrap because it is well supported by all the browsers.Moreover, no new features will be added to it.

Bootstrap 4 does not support Glyphicons used in Bootstrap 3. Therfeore, Fontawesome and some other kind of icons are used. 

About Bootstrap

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

Why use Bootstrap?

  • Easy to use: Anybody with just basic knowledge of HTML and CSS can start using 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 4 library can be downloaded from getbootstrap.com.

Bootstrap 4 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/4.4.1/css/bootstrap.min.css">

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

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.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>
</html>

Bootstrap 4 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>
  • 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>

 

 




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