offline bootstrap Archives - https://mitindia.in/tag/offline-bootstrap/ Thu, 16 Mar 2017 10:35:03 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 https://mitindia.in/wp-content/uploads/2023/03/cropped-android-chrome-512x512-1-32x32.png offline bootstrap Archives - https://mitindia.in/tag/offline-bootstrap/ 32 32 Bootstrap on local or offline https://mitindia.in/bootstrap-local-offline/ Fri, 10 Mar 2017 11:29:52 +0000 http://www.mitindia.in/?p=767 Using bootstrap on local PC In the previous post you’ve learnt how to create NavBar in bootstrap. In this post you’ll be able to run bootstrap on local or offline PC / Laptop first you need to download the supporting files for bootstrap from here. After downloading from above link, extract the zipped folder and use […]

The post Bootstrap on local or offline appeared first on .

]]> Using bootstrap on local PC

In the previous post you’ve learnt how to create NavBar in bootstrap.

In this post you’ll be able to run bootstrap on local or offline PC / Laptop first you need to download the supporting files for bootstrap from here.

After downloading from above link, extract the zipped folder and use as following.

  1. inside the <head> tag 
    <link rel="stylesheet" href="bootstrap-3.3.7/dist/css/bootstrap.min.css">

<link rel="stylesheet" href="bootstrap-3.3.7/dist/css/bootstrap-theme.css">
  2. inside the <body> tag 
    <script src="bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>

Complete program is as following with Column, Block quote, Buttons and jumbotron tags.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="bootstrap-3.3.7/dist/css/bootstrap.min.css">

<link rel="stylesheet" href="bootstrap-3.3.7/dist/css/bootstrap-theme.css">

</head>
<body>
<script src="bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>

<h1> BootStrap Locally! <small> with secondary text </small></h1>
<hr>

<div class="container">
<div class="jumbotron"><h1> Om Gajanana Prasanna</h1> <p>by mitindia </p> 
<code> web </code>
</div>
</div>

<button type="button" class="btn btn-default">Ganesh </button>
<button type="button" class="btn btn-primary">Ganesh </button>
<button type="button" class="btn btn-success">Ganesh </button>
<button type="button" class="btn btn-warning">Ganesh </button>


 <div class="row">
 <div class="col-xs-9 col-md-7" style="background-color:khaki;">Big Column</div>
 <div class="col-xs-3 col-md-5" style="background-color:magenta;">Another column</div>
 </div>

<div class="row">
 <div class="col-xs-6 col-md-10" style="background-color:teal;">Very Big Column!</div>
 <div class="col-xs-6 col-md-2" style="background-color:lightgrey;">Small column</div>
 </div>
 <div class="row" style="background-color:khaki;">
 <div class="col-xs-6"><img src="yeshodhanand.jpg">Bootstrap cloumns</div>
 <div class="col-xs-6"><img src="yeshodhanand.jpg">with perfect aligment!</div>
 </div>
</div>

<h2> <mark>Block</mark>quote </h2>
<blockquote><p>Cleanliness is next to Godliness </p>
<footer> by sk-mitindia </footer>
</blockquote>

<p class="text-primary"> This is text foreground </p>
<p class="bg-primary"> This is text background </p>

</body>
</html>

 See the output as following

bootstrap offline

 

What is Bootstrap?

Share

The post Bootstrap on local or offline appeared first on .

]]>