Bootstrap Introduction


What is Bootstrap?

Bootstrap is a front-end open source framework for web application design which consists of HTML, CSS and JavaScript for developing responsive, mobile-first website. Bootstrap, originally named Twitter Blueprint framework and was developed by Mark Otto and Jacob Thornton at Twitter. Bootstrap is completely free to download and use!

It maintains UI consistency, encourage consistency across internal tools. By using Bootstrap, you can create attractive web components like alert, tabs, carousel, and menu etc using CSS and JavaScript.

History

Bootstrap original name was Twitter Blueprint framework and developed by Mark Otto and Jacob Thornton at Twitter. Bootstrap is completely free to download and use! It was released as an free open source product in August 2011 on GitHub.

Why Use Bootstrap?

  • Designed for everyone, everywhere.
  • Bootstrap support to all latest browsers like Google Chrome, Firefox, IE, Opera and Safari.
  • Bootstrap makes front-end web development faster and easier.
  • Millions of amazing sites across the web are being built with Bootstrap.
  • Bootstrap is open source and can be downloaded from GitHub.
  • Easy to setup and enables developers to quickly develop web pages using its HTML, CSS and JavaScript components.
  • Bootstrap supports responsive web designing.
  • Bootstrap provides a uniform, modern appearance for formatting text, tables and form elements.
  • Bootstrap framework consists of Mobile first styles.

Bootstrap Package Includes

  • Components - Bootstrap provides built-in reusable components that provide alerts, navigation, iconography, dropdowns etc.
  • JavaScript Plugins - Bootstrap provides many custom jQuery plug-in. You can use them to increase functionality.
  • CSS - Bootstrap provides extensible classes, CSS setting including advanced grid system.
  • Customization - Bootstrap allows you to customize Bootstrap components and jQuery plug-in to build your own version.

Test Bootstrap Code Online

This Bootstrap tutorial includes many Bootstrap code examples with online editing facility. You can edit or write a code and click on a Run button to view the code result. You will find a Try Now button at the bottom of the example code. Use it to verify the code and check the output with different options.

Bootstrap Example

<!DOCTYPE html>
<html lang="en">
<head> <!-- www.techstrikers.com-->
  <title>First Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- Bootstrap -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" 
rel="stylesheet">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>      
</head>
<body>

<div class="jumbotron text-center">
  <h1>Welcome to Bootstrap Tutorial</h1>
  <p>My first responsive page!</p>
</div>
  
<div class="container">
  <div class="row">
    <div class="col-sm-4">
     <form>
  <div class="form-group">
    <label for="email1">Email address</label>
    <input type="email" class="form-control" id="email1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" id="password" placeholder="Password">
  </div> 
  <button type="submit" class="btn btn-default">Submit</button>
</form>
    </div>
  </div>
</div>
</body>
</html>

Try Now


See Also

AngularJS Built-in Filters
AngularJS Built-in Directives
AngularJS Expression
AngularJS Built-in Events
AngularJS Scope Methods
AngularJS Built-in Services
AngularJS Controller Inheritance
AngularJS Custom Directives



 
 
SHARE THIS IF YOU LIKE!
submit to reddit

SUBSCRIBE FOR LATEST UPDATES
HAVE WE CONNECTED ON FACEBOOK?
TOP TUTORIALSTOP CODE EXAMPLESTOP LIVE DEMOLINKSSTAY CONNECTED
HTML Tutorial
HTML5 Tutorial
Bootstrap3 Tutorial
Javascript Tutorial
TypeScript Tutorial
AngularJS Tutorial
CSharp Tutorial
PHP Tutorial
Developer Tools
Javascript
AngularJS
Google MAP API V3
ASP.NET
Javascript
AngularJS
Google MAP API V3
Contact Us
Advertise with Us
Privacy Policy
Disclaimer
Stay connected. We actually like you. If you want to get up to the minute updates, then connect with us on your fav below.
 
Twitter   Linkedin   Facebook   Google+    RSS   Pinterest
 
Protected by Copyscape Original Content Checker
 
 
Copyright ©2017 www.techstrikers.com Unauthorized reproduction/replication of any part of this site is prohibited.