Bootstrap Tutorial
Bootstrap with CSS
Bootstrap Layout Components
Bootstrap Plugins
Bootstrap Demos
Bootstrap Useful Resources
Selected Reading
Bootstrap with CSS
- Bootstrap - Responsive utilities
- Bootstrap - Helper Classes
- Bootstrap - Images
- Bootstrap - Buttons
- Bootstrap - Forms
- Bootstrap - Tables
- Bootstrap - Code
- Bootstrap - Typography
- Bootstrap - CSS Overview
- Bootstrap - Grid System
Bootstrap Layout Components
- Bootstrap - Wells
- Bootstrap - Panels
- Bootstrap - List Group
- Bootstrap - Media Object
- Bootstrap - Progress Bars
- Bootstrap - Alerts
- Bootstrap - Thumbnails
- Bootstrap - Page Header
- Bootstrap - Jumbotron
- Bootstrap - Badges
- Bootstrap - Labels
- Bootstrap - Pagination
- Bootstrap - Breadcrumb
- Bootstrap - Navbar
- Bootstrap - Navigation Elements
- Bootstrap - Input Groups
- Bootstrap - Button Dropdowns
- Bootstrap - Button Groups
- Bootstrap - Dropdowns
- Bootstrap - Glyphicons
Bootstrap Plugins
- Bootstrap - Affix Plugin
- Bootstrap - Carousel Plugin
- Bootstrap - Collapse Plugin
- Bootstrap - Button Plugin
- Bootstrap - Alert Plugin
- Bootstrap - Popover Plugin
- Bootstrap - Tooltip Plugin
- Bootstrap - Tab Plugin
- Bootstrap - Scrollspy Plugin
- Bootstrap - Dropdown Plugin
- Bootstrap - Modal Plugin
- Bootstrap - Transition Plugin
- Bootstrap - Plugins Overview
Bootstrap Demos
- Bootstrap - featured Demo
- Bootstrap - Icons Demo
- Bootstrap - Social Icons Demo
- Bootstrap - Calendar Demo
- Bootstrap - Map Demo
- Bootstrap - Caption Demo
- Bootstrap - Tabbed slider Demo
- Bootstrap - Ajax Demo
- Bootstrap - Admin Interface Demo
- Bootstrap - Alert Demo
- Bootstrap - Time line Demo
- Bootstrap - Slider Demo
- Bootstrap - Material Design Demo
- Bootstrap - Blog Demo
- Bootstrap - Navigation Demo
- Bootstrap - Responsive Demo
- Bootstrap - Images Demo
- Bootstrap - Buttons Demo
- Bootstrap - Form Demo
- Bootstrap - Table Demo
- Bootstrap - Grid Demo
Bootstrap Useful Resources
- Bootstrap - Discussion
- Bootstrap - Useful Resources
- Bootstrap - Quick Guide
- Bootstrap - Questions and Answers
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Bootstrap - Home
Bootstrap Tutorial
Twitter Bootstrap is the most popular front end framework in the recent time. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript. This tutorial will teach you the basics of Bootstrap Framework using which you can create web projects with ease. The tutorial is spanided into sections such as Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components and Bootstrap Plugins. Each of these sections contain related topics with simple and useful examples.
Why to Learn Bootstrap?
Mobile first approach − Bootstrap 3, framework consists of Mobile first styles throughout the entire pbrary instead them of in separate files.
Browser Support − It is supported by all popular browsers.
Easy to get started − With just the knowledge of HTML and CSS anyone can get started with Bootstrap. Also the Bootstrap official site has a good documentation.
Responsive design − Bootstrap s responsive CSS adjusts to Desktops, Tablets and Mobiles. More about the responsive design is in the chapter
Provides a clean and uniform solution for building an interface for developers.
It contains beautiful and functional built-in components which are easy to customize.
It also provides web based customization.
And best of all it is an open source.
Hello World using Bootstrap.
Just to give you a pttle excitement about Bootstrap, I m going to give you a small Bootstrap Program. You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<pnk href="https://cdn.jsdepvr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdepvr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<span class="container-fluid p-5 bg-primary text-white text-center">
<h1>Bootstrap Demo Page</h1>
<p>Resize this page to see the effect!</p>
</span>
<span class="container mt-5">
<span class="row">
<span class="col-sm-6">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing ept...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</span>
<span class="col-sm-6">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing ept...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</span>
</span>
</span>
</body>
</html>
Apppcations of Bootstrap
Scaffolding − Bootstrap provides a basic structure with Grid System, pnk styles, and background. This is is covered in detail in the section Bootstrap Basic Structure
CSS − Bootstrap comes with the feature of global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system. This is covered in detail in the section Bootstrap with CSS.
Components − Bootstrap contains over a dozen reusable components built to provide iconography, dropdowns, navigation, alerts, pop-overs, and much more. This is covered in detail in the section Layout Components.
JavaScript Plugins − Bootstrap contains over a dozen custom jQuery plugins. You can easily include them all, or one by one. This is covered in details in the section Bootstrap Plugins.
Customize − You can customize Bootstrap s components, LESS variables, and jQuery plugins to get your very own version.
Audience
This tutorial has been prepared for anyone who has a basic knowledge of HTML and CSS and has an urge to develop websites. After completing this tutorial you will find yourself at a moderate level of expertise in developing web projects using Twitter Bootstrap.
Prerequisites
Before you start proceeding with this tutorial, we are assuming that you are already aware about the basics of HTML and CSS. If you are not well aware of these concepts then we will suggest you to go through our short tutorial on HTML Tutorial and CSS Tutorial.
Advertisements