bootstrap Archives - https://mitindia.in/tag/bootstrap/ Tue, 04 Apr 2017 07:48:29 +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 bootstrap Archives - https://mitindia.in/tag/bootstrap/ 32 32 Bootstrap panels https://mitindia.in/bootstrap-panels/ Tue, 04 Apr 2017 07:43:27 +0000 http://www.mitindia.in/?p=781 Creating Panels in Bootstrap The following example shows that how to create beautiful panels using Bootstrap.     Simply copy and paste the following code in notepad and save it as xyz.html (any file name but .html extension) and view in browser. <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Examples</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> […]

The post Bootstrap panels appeared first on .

]]> Creating Panels in Bootstrap

The following example shows that how to create beautiful panels using Bootstrap.

 

 

  1. Simply copy and paste the following code in notepad and save it as xyz.html (any file name but .html extension) and view in browser.
<!DOCTYPE html>
 <html lang="en">
 <head>
 <title>Bootstrap Examples</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/cs
 s/bootstrap.min.css">
 <script
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jque
 ry.min.js"></script>
 <script
 src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/b
 ootstrap.min.js"></script>

<table class="table table-striped table-hover ">
 <tr class="primary">

<td align="center"><div class="panel panel-primary">
 <div class="panel-heading">
 <h3 class="panel-title">Technical</h3>
 </div>
 <div class="panel-body">
 <img src="world128.png"><br>
 <button type="button" class="btn btn-primary">Go to
 blog</button>
 </div>
 </div></td>
 <td align="center"><div class="panel panel-warning">
 <div class="panel-heading">
 <h3 class="panel-title">Non-Technical</h3>
 </div>
 <div class="panel-body">
 <img src="people.png"> <br>
 <button type="button" class="btn btn-warning">Go to
 blog</button>

</div>
 </div></td>
 <td align="center"><div class="panel panel-success">
 <div class="panel-heading">
 <h3 class="panel-title">Trending topics</h3>
 </div>
 <div class="panel-body">
 <img src="vault128.png"><br>
 <button type="button" class="btn btn-success">Go to
 blog</button>

</div>
 </div></td>
 </tr>
 </table>
 </body>
 </html>

 

Output of the above code is…

Bootstrap Panels

Click here for Bootstrap on offline mode

 

Share

The post Bootstrap panels appeared first on .

]]> 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 .

]]> Bootstrap Navigation bar https://mitindia.in/bootstrap-navigation-bar/ Tue, 07 Mar 2017 11:31:39 +0000 http://www.mitindia.in/?p=757 Bootstrap Navigation Bar To create navigation bar for your website with using Bootstrap is quite easy. Just copy the following tag and paste it into notepad, save with .html extension. <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Examples</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/cs s/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jque ry.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/b ootstrap.min.js"></script> </head> <body> […]

The post Bootstrap Navigation bar appeared first on .

]]> Bootstrap Navigation Bar

To create navigation bar for your website with using Bootstrap is quite easy.

Just copy the following tag and paste it into notepad, save with .html extension.

<!DOCTYPE html>
<html lang="en">
<head>
 <title>Bootstrap Examples</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/cs 
s/bootstrap.min.css">
 <script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jque 
ry.min.js"></script>
 <script 
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/b 
ootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default">
 <div class="container-fluid">
 <div class="navbar-header">
 <a class="navbar-brand" href="#">MIT India</a>
 </div>
 <ul class="nav navbar-nav">
 <li class="active"><a href="#">Home</a></li>
 <li><a href="#">Courses</a></li>
 <li><a href="#">Blogging</a></li>
 <li><a href="#">Mobile Apps</a></li>
 </ul>
 </div>
</nav>
 
<div class="panel panel-primary">
 <div class="panel-heading">
 <h1 class="panel-title">Menubar and Panel 
Demo</h1>
 </div>
 <div class="panel-body">Bootstrap is a mobile-first 
design</div>
</div>
</body>
</html>

Output of the above program is…

You can also view other topic on bootstrap here.

Share

The post Bootstrap Navigation bar appeared first on .

]]> What is bootstrap https://mitindia.in/what-is-bootstrap/ Mon, 06 Mar 2017 11:01:52 +0000 http://www.mitindia.in/?p=749 Bootstrap Bootstrap is the complete mobile-first user interface design framework for websites and mobile applications. It is created by a designer and developer at twitter.com. It is one of the most popular front-end and open source tools in the world.  Bootstrap is fully responsive with mobile-first motto which is developed along with HTML, Javascript and […]

The post What is bootstrap appeared first on .

]]> Bootstrap

Bootstrap is the complete mobile-first user interface design framework for websites and mobile applications. It is created by a designer and developer at twitter.com. It is one of the most popular front-end and open source tools in the world. 

Bootstrap is fully responsive with mobile-first motto which is developed along with HTML, Javascript and css(cascading style sheet).

Why should we use Bootstrap?

  1. It increases development speed : if you’re a professional web/app developer you need it for faster completion of your project work.
  2. Responsiveness: with increase in number of internet user on mobile phones worldwide, there is a huge demand for it. Availability of readymade classes with lots of resolutions to fit in any device size.
  3. Customizable: It is fully tailor made according to your application requirements.

You can customize like:

  1. a) Custom css (font, forms, color, tables, buttons etc.)
  2. b) components (navigation bar, glyphicons, input elements, breadcrumbs etc.)
  3. c) javascript components (slider or carousel, modal, tooltips, dropdowns, animations etc.)
  1. Consistency: with consistency accross all devices.
  2. Support: There are many community of developer who help you always.

CDN sites for bootstrap supporting files

<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>

Simple Example

  1. Create a following bootstrap example 
     <html>

 <head>

 <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/cs

 s/bootstrap.min.css">

 <script

 src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jque

 ry.min.js"></script>

 <script

 src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/b

 ootstrap.min.js"></script>

 </head>

 <body>

 <h1> BootStrap Button example </h1>

 <button type="button" class="btn btn-default"> Default

 </button>

 <button type="button" class="btn btn-primary"> Primary

 </button>

 <button type="button" class="btn btn-success"> Success

 </button>

 <button type="button" class="btn btn-warning"> Warning

 </button>

 <button type="button" class="btn btn-danger"> Danger

 </button><hr>

 <h2> Code highlighter Example </h1>

 <h3> Web technologies: <code>html </code>, <code>

 php </code>, <code>mysql </code> etc. </h3>

 </body>

 </html>

2. View in browser (as following )

Bootstrap NavBar

Share

The post What is bootstrap appeared first on .

]]>