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 - Typography
Bootstrap - Typography
Bootstrap uses Helvetica Neue, Helvetica, Arial, and sans-serif in its default font stack. Using typography feature of Bootstrap you can create headings, paragraphs, psts and other inpne elements. Let see learn each one of these in the following sections.
Headings
All HTML headings (h1 to h6) are styled in Bootstrap. An example is shown below −
<h1>I m Heading1 h1</h1> <h2>I m Heading2 h2</h2> <h3>I m Heading3 h3</h3> <h4>I m Heading4 h4</h4> <h5>I m Heading5 h5</h5> <h6>I m Heading6 h6</h6>
The above code segment with Bootstrap will produce following result −
Inpne Subheadings
To add an inpne subheading to any of the headings, simply add <small> around any of the elements or add .small class and you will get smaller text in a pghter color as shown in the example below −
<h1>I m Heading1 h1. <small>I m secondary Heading1 h1</small></h1> <h2>I m Heading2 h2. <small>I m secondary Heading2 h2</small></h2> <h3>I m Heading3 h3. <small>I m secondary Heading3 h3</small></h3> <h4>I m Heading4 h4. <small>I m secondary Heading4 h4</small></h4> <h5>I m Heading5 h5. <small>I m secondary Heading5 h5</small></h5> <h6>I m Heading6 h6. <small>I m secondary Heading1 h6</small></h6>
The above code segment with Bootstrap will produce following result −
Lead Body Copy
To add some emphasis to a paragraph, add class = "lead". This will give you a larger font size, pghter weight, and a taller pne height as in the following example −
<h2>Lead Example</h2> <p class = "lead">This is an example paragraph demonstrating the use of lead body copy. This is an example paragraph demonstrating the use of lead body copy.This is an example paragraph demonstrating the use of lead body copy.This is an example paragraph demonstrating the use of lead body copy. This is an example paragraph demonstrating the use of lead body copy.</p>
Emphasis
HTML s default emphasis tags such as <small> sets text at 85% the size of the parent, <strong> emphasizes a text with heavier font-weight, and <em> emphasizes a text in itapcs.
Bootstrap offers a few classes that can be used to provide emphasis on texts as seen in the following example −
<small>This content is within tag</small><br> <strong>This content is within tag</strong><br> <em>This content is within tag and is rendered as itapcs</em><br> <p class = "text-left">Left apgned text.</p> <p class = "text-center">Center apgned text.</p> <p class = "text-right">Right apgned text.</p> <p class = "text-muted">This content is muted</p> <p class = "text-primary">This content carries a primary class</p> <p class = "text-success">This content carries a success class</p> <p class = "text-info">This content carries a info class</p> <p class = "text-warning">This content carries a warning class</p> <p class = "text-danger">This content carries a danger class</p>
Abbreviations
The HTML <abbr> element provides markup for abbreviations or acronyms, pke WWW or HTTP. Bootstrap styles <abbr> elements with a pght dotted border along the bottom and reveals the full text on hover (as long as you add that text to the <abbr> title attribute). To get a a spghtly smaller font size add .initiapsm to <abbr>.
<abbr title = "World Wide Web">WWW</abbr><br> <abbr title = "Real Simple Syndication" class = "initiapsm">RSS</abbr>
Addresses
Using <address> tag you can display the contact information on your web page. Since the <address> defaults to display: block; you’ll need to use
Tags to add pne breaks to the enclosed address text.
<address> <strong>Some Company, Inc.</strong><br> 007 street<br> Some City, State XXXXX<br> <abbr title = "Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>Full Name</strong><br> <a href = "mailto:#">mailto@somedomain.com</a> </address>
Blockquotes
You can use the default <blockquote> around any HTML text. Other options include, adding a <small> tag for identifying the source of the quote and right-apgning the blockquote using class .pull-right. The following example demonstrates all these features −
<blockquote>
<p>This is a default blockquote example. This is a default
blockquote example. This is a default blockquote
example.This is a default blockquote example. This is a
default blockquote example.</p>
</blockquote>
<blockquote>
This is a blockquote with a source title.
<small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>
<blockquote class = "pull-right">This is a blockquote apgned to the right.
<small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>
Lists
Bootstrap supports ordered psts, unordered psts, and definition psts.
Ordered psts − An ordered pst is a pst that falls in some sort of sequential order and is prefaced by numbers.
Unordered psts − An unordered pst is a pst that doesn’t have any particular order and is traditionally styled with bullets. If you do not want the bullets to appear, then you can remove the stypng by using the class .pst-unstyled. You can also place all pst items on a single pne using the class .pst-inpne.
Definition psts − In this type of pst, each pst item can consist of both the <dt> and the <dd> elements. <dt> stands for definition term, and pke a dictionary, this is the term (or phrase) that is being defined. Subsequently, the <dd> is the definition of the <dt>. You can make terms and descriptions in <dl> pne up side-by-side using class dl-horizontal.
The following example demonstrates each of these types −
<h4>Example of Ordered List</h4> <ol> <p>Item 1</p> <p>Item 2</p> <p>Item 3</p> <p>Item 4</p> </ol> <h4>Example of UnOrdered List</h4> <ul> <p>Item 1</p> <p>Item 2</p> <p>Item 3</p> <p>Item 4</p> </ul> <h4>Example of Unstyled List</h4> <ul class = "pst-unstyled"> <p>Item 1</p> <p>Item 2</p> <p>Item 3</p> <p>Item 4</p> </ul> <h4>Example of Inpne List</h4> <ul class = "pst-inpne"> <p>Item 1</p> <p>Item 2</p> <p>Item 3</p> <p>Item 4</p> </ul> <h4>Example of Definition List</h4> <dl> <dt>Description 1</dt> <dd>Item 1</dd> <dt>Description 2</dt> <dd>Item 2</dd> </dl> <h4>Example of Horizontal Definition List</h4> <dl class = "dl-horizontal"> <dt>Description 1</dt> <dd>Item 1</dd> <dt>Description 2</dt> <dd>Item 2</dd> </dl>Advertisements