BOOTSTRAP REFERENCE

Abbreviation

WWW
RSS


Address

Some Company, Inc.
007 street
Some City, State XXXXX
P: (123) 456-7890
Full Name
mailto@somedomain.com



Alert

Success! Well done its submitted.
Info! take this info.
Warning ! Dont submit this.
Error ! Change few things.



Alert - Dismissal

Success! Well done its submitted.
Info! take this info.
Warning ! Dont submit this.
Error ! Change few things.



Alert - Links




Badges

Mailbox 50


Badges - Active Nav States

Example for Active State in Pill


Example for Active State in navigations




Blockquote

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.

This is a blockquote with a source title. Someone famous in Source Title
This is a blockquote aligned to the right. Someone famous in Source Title



Breadcrumb




Button - Addon





Button - Disabled State

Link Disabled Link

Primary link Disabled Primary link




Button - DropDown




Button - DropDown Size




Button - DropDown Split




Button - Group




Button - Nesting




Button - Segmented




Button - Size




Button - State




Button - Tags

Link


Button - Toolbar




Button - Types




Button - Vertical




Caret

Caret Example




Center Content Block

This is an example for center-block



Clearfix

Quick Float to left
Quick Float to right



Close Icon

Close Icon Example




Code

<header> is wrapped as an inline element.




Columns Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim




Column with Offset

Lorem ipsum dolor sit amet, consectetur adipisicing elit.




Columns with Nested Columns

First Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Second Column- Split into 4 boxes

Consectetur art party Tonx culpa semiotics. Pinterest assumenda minim organic quis.

sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.




Column Ordering (Push - Pull)

Before Ordering

I am on left
I am on right

After Ordering

I was on left
I was on right



Disabled Link

Disabled Link Example






DropDown




Emphasis

This content is within tag
This content is within tag
This content is within tag and is rendered as italics

Left aligned text.

Center aligned text.

Right aligned text.

This content is muted

This content carries a primary class

This content carries a success class

This content carries a info class

This content carries a warning class

This content carries a danger class




Float

Quick Float to left
Quick Float to right



Form - Basic

Example block-level help text here.




Form - Control Sizing




Form - Control States




Form - Help Text

Example of Help Text A longer block of help text that breaks onto a new line and may extend beyond one line.



Form - Horizontal




Form - Inline




Form - Static Control

email@example.com




Glyphicons




Headings

I'm Heading1 h1

I'm Heading2 h2

I'm Heading3 h3

I'm Heading4 h4

I'm Heading5 h5
I'm Heading6 h6



Images

Example

Example

Example


Inline Subheadings

I'm Heading1 h1. I'm secondary Heading1 h1

I'm Heading2 h2. I'm secondary Heading2 h2

I'm Heading3 h3. I'm secondary Heading3 h3

I'm Heading4 h4. I'm secondary Heading4 h4

I'm Heading5 h5. I'm secondary Heading5 h5
I'm Heading6 h6. I'm secondary Heading1 h6



Input

@

.00

$ .00



Input - Checkboxes and Radio





Input - Sizing

@

@

@



Jumbotron

Welcome to landing page!

This is an example for jumbotron.

Learn more


Welcome to landing page!

This is an example for jumbotron.

Learn more




Label

Example Heading Label

Example Heading Label

Example Heading Label

Example Heading Label


Default Label Primary Label Success Label Info Label Warning Label Danger Label


Lead Body Copy

Lead Example

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.




List

Example of Ordered List

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4

Example of UnOrdered List

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Example of Unstyled List

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Example of Inline List

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Example of Definition List

Description 1
Item 1
Description 2
Item 2

Example of Horizontal Definition List

Description 1
Item 1
Description 2
Item 2



List Group

  • Free Domain Name Registration
  • Free Window Space hosting
  • Number of Images
  • 24*7 support
  • Renewal cost per year



List Group - Badges

  • Free Domain Name Registration
  • Free Window Space hosting
  • Number of Images
  • New 24*7 support
  • Renewal cost per year
  • New Disocunt Offer



List Group - Linking Items

Free Domain Name Registration 24*7 support Free Window Space hosting Number of Images Renewal cost per year


List Group - Custom Content




Media

Media Object

Media heading

This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.
Media Object

Media heading

This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.
Media Object

Media heading

This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.



Media - List

  • Generic placeholder image

    Media heading

    This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.

    Generic placeholder image

    Nested media heading

    This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.
    Generic placeholder image

    Nested media heading

    This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.
    Generic placeholder image

    Nested media heading

    This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.
  • Generic placeholder image

    Media heading

    This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.





Menu - DropUp




Navbar




Navbar - Buttons




Navbar - Component Alignment

<%--


Navbar - Fixed to Top

--%> <%--


Navbar - Fixed to Bottom

--%>


Navbar - Forms




Navbar - Inverted




Navbar - Non-Nav Links




Navbar - Responsive




Navbar - Text




Page Header

This is a sample text.This is a sample text.This is a sample text. This is a sample text.




Pager




Pager - Aligned Links




Pager - States




Pagination




Pagination - Sizing






Pagination - States




Panel

This is a Basic panel

Panel - Alternatives

Panel title

This is a Basic panel

Panel title

This is a Basic panel - Heading

Panel title

This is a Basic panel - Info

Panel title

This is a Basic panel - Warning

Panel title

This is a Basic panel - Danger



Panel - Footer

This is a Basic panel

Panel - Heading

Panel heading without title
Panel content

Panel With title

Panel content



Panel - List Group

Panel heading

This is a Basic panel content. This is a Basic panel content. This is a Basic panel content. This is a Basic panel content. This is a Basic panel content. This is a Basic panel content. This is a Basic panel content.

  • Free Domain Name Registration
  • Free Window Space hosting
  • Number of Images
  • 24*7 support
  • Renewal cost per year



Panel - Tables

Panel title

This is a Basic panel
Product Price
Product A 200
Product B 400
Panel Heading
Product Price
Product A 200
Product B 400



Pills

Pills Example




Pills - DropDown

Pills With Dropdown Example




Pills - Justified

Justified Nav Elements Example







Pills - Vertical

Vertical Pills Example




Pre

                        <article>
                        <h1>Article Heading</h1>
                        </article>
                    



Progress Bar

40% Complete



Progress Bar - Alternate

90% Complete (Sucess)
30% Complete (info)
20%Complete (warning)
10% Complete (danger)



Progress Bar - Animated

40% Complete



Progress Bar - Stacked

40% Complete
30% Complete (info)
20%Complete (warning)



Progress Bar - Striped

90% Complete (Sucess)
30% Complete (info)
20%Complete (warning)
10% Complete (danger)



Response Utilities

✔ Visible on x-small
✔ Visible on small
Medium ✔ Visible on medium
✔ Visible on large



Screen Reader Content




Select




Showing and Hiding Content

This is an example for show class



Table - Basic

Basic Table Layout
Name City
Tanmay Bangalore
Sachin Mumbai



Table - Bordered

Bordered Table Layout
Name City Pincode
Tanmay Bangalore 560001
Sachin Mumbai 400003
Uma Pune 411027



Table - Condensed

Condensed Table Layout
Name City Pincode
Tanmay Bangalore 560001
Sachin Mumbai 400003
Uma Pune 411027



Table - Contextual

Contextual Table Layout
Product Payment Date Status
Product1 23/11/2013 Pending
Product2 10/11/2013 Delivered
Product3 20/10/2013 In Call to confirm
Product4 20/10/2013 Declined



Table - Hover

Hover Table Layout
Name City Pincode
Tanmay Bangalore 560001
Sachin Mumbai 400003
Uma Pune 411027



Table - Responsive

Responsive Table Layout
Product Payment Date Status
Product1 23/11/2013 Pending
Product2 10/11/2013 Delivered
Product3 20/10/2013 In Call to confirm
Product4 20/10/2013 Declined



Table - Striped

Striped Table Layout
Name City Pincode
Tanmay Bangalore 560001
Sachin Mumbai 400003
Uma Pune 411027



Tabs

Tabs Example




Tabs - DropDown

Tabs With Dropdown Example




Thumbnail


Generic placeholder thumbnail

Thumbnail label

Some sample text. Some sample text.

Button Button

Generic placeholder thumbnail

Thumbnail label

Some sample text. Some sample text.

Button Button

Generic placeholder thumbnail

Thumbnail label

Some sample text. Some sample text.

Button Button

Generic placeholder thumbnail

Thumbnail label

Some sample text. Some sample text.

Button Button




Well

Hi, am in well !!

Well - Sizing

Hi, am in large well !!
Hi, am in small well !!

© 1997-2021    Codehacker - All Rights Reserved