Bootstrap/html Examples Based on Traversy Media

Typography-basic text, mostly html

This is the lead class on a paragraph

marked text emphesized or italic deleted text underlined text small text strong text


Alignment and Transformation

Aligned to the left Lorem ipsum dolor sit amet consectetur adipisicing elit.

Aligned to the right Ut veniam, esse eveniet aut molestias corrupti nulla assumenda.

Aligned to the center Ut veniam, esse eveniet aut molestias corrupti nulla assumenda.Voluptas molestias id voluptatem qui itaque.

Justified text Ut veniam, esse eveniet aut molestias corrupti nulla assumenda.Voluptas molestias id voluptatem qui itaque, at, quo non excepturi recusandae.

Text without wrap Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, quisquam esse ad eligendi impedit quod!

Everything in lower case Lorem ipsum dolor sit amet consectetur adipisicing elit.

Everything in uppercase Lorem ipsum dolor sit amet consectetur adipisicing elit.

First letter capitalized Lorem ipsum dolor sit amet consectetur adipisicing elit. .


Quick Floats

div floated to right
div floated to left

Blockquotes

This is a blockquote
Reverse Blockquote

Lists


Code

<h1>Heading Text<h1>
Give keyboard commands with ctrl + ,

Contextual Classes, ie, colors

Primary text

Success text

Info background-needs padding

Warning background-needs padding

Danger

Muted


Buttons

Primary Link

Forms

Only png and jpg allowed


Inline forms


Tables

First Name Last Name Age
Contextual classes require jquery Smith 50
John Doe 48
Mary Jane 24

List Group

A Menu

One Two Three

Panels

Panel Title

Panel Content

Wells

This is a well
This is a large well
This is a small well

Alerts


Progress bars

50%
An animated progress bar requiring jquery/js

Labels and Badges

Default

H1 Primary

Success Inbox 50

Images


Grids

8 column of grid

Note that the grid system isn't working properly.

4 column of grid

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

3 columns of grid

Note that the grid system isn't working properly. Lorem ipsum dolor, sit amet consectetur adipisicing elit.

3 columns of grid

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

3 columns of grid

Lorem ipsum dolor sit, amet consectetur adipisicing elit.


Nav Bar

Check documentation for the nav nav bar. It's huge code-wise and has many, many options. It's best to just steal their code.


This is a Jumbotron

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur eum odit minima porro autem velit doloremque repellendus mollitia, sed numquam voluptatum amet? Voluptatum, dolor quam. Distinctio ducimus a necessitatibus quia!

Back to the top