h1 headline 

<h1>headline</h1>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac magna non augue porttitor scelerisque ac id diam. Mauris elit velit, lobortis sed interdum at, vestibulum vitae libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis ligula ut ipsum mattis viverra. Nulla a libero metus.

h2 headline

<h2>headline</h2>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac magna non augue porttitor scelerisque ac id diam. Mauris elit velit, lobortis sed interdum at, vestibulum vitae libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis ligula ut ipsum mattis viverra. Nulla a libero metus.

h3 Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac magna non augue porttitor scelerisque ac id diam. Mauris elit velit, lobortis sed interdum at, vestibulum vitae libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis ligula ut ipsum mattis viverra. Nulla a libero metus.

h4 headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac magna non augue porttitor scelerisque ac id diam. Mauris elit velit, lobortis sed interdum at, vestibulum vitae libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis ligula ut ipsum mattis viverra. Nulla a libero metus.

h5 headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac magna non augue porttitor scelerisque ac id diam. Mauris elit velit, lobortis sed interdum at, vestibulum vitae libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis ligula ut ipsum mattis viverra. Nulla a libero metus.

h6 headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac magna non augue porttitor scelerisque ac id diam. Mauris elit velit, lobortis sed interdum at, vestibulum vitae libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis ligula ut ipsum mattis viverra. Nulla a libero metus.

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 Joostrap

Lead text copy

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.

Paragraph text copy

<p>Lorem ipsum</p>

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div itemprop="articleBody">
<div class="row">
<div class="col-sm-6">
<div class="section-title">
<h3>Text</h3>
</div>
<h1>This is an H1 heading</h1>
<h2>This is an H2 heading</h2>
<h3>This is an H3 heading</h3>
<h4>This is an H4 heading</h4>
<h5>This is an H5 heading</h5>
<p class="lead">This is the lead text class</p>
<p>This is the normal paragraph text</p>
<h1>H1 heading with <small>Secondary text</small></h1>
<h2>H2 heading with <small>Secondary text</small></h2>
<h3>H3 heading with <small>Secondary text</small></h3>
<h4>H4 heading with <small>Secondary text</small></h4>
<h5>H5 heading with <small>Secondary text</small></h5>
</div>
<div class="col-sm-6">
<div class="section-title">
<h3>Miscellaneous Text</h3>
</div>
<p>This is <sup>superscript</sup> and <sub>subscript</sub> text<br /><em>This is emphasised text</em><br /><strong>This is strong text</strong><br /><abbr title="This is an abbr - &lt;abbr&gt;&lt;/abbr&gt;">This is an abbr</abbr><br /> <del>This is deleted text</del><br /><a href="#">This is a link</a></p>
<div class="section-title">
<h3>This is a section title</h3>
</div>
<h1>H1 heading with <span class="label label-default">Label</span></h1>
<h2>H2 heading with <span class="label label-default">Label</span></h2>
<h3>H3 heading with <span class="label label-default">Label</span></h3>
<h4>H4 heading with <span class="label label-default">Label</span></h4>
<h5>H5 heading with <span class="label label-default">Label</span></h5>
</div>
</div>

Columns on page (instead of tables)

<!-- two colums of each 6/12 wide -->
<div class="row">
  <div class="col-sm-6">
    <div>[Column content]</div>
  </div>
<!-- /.col-sm-6 -->
<div class="col-sm-6">
    <div>[Column content]</div>
  </div>
</div>

Tabs

<div><!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
<li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
<li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="tab1" class="tab-pane fade in active">Lorem ipsum etc.</div>
<div id="tab2" class="tab-pane fade">Anim pariatur cliche etc.</div>
<div id="tab3" class="tab-pane fade">Nihil anim keffiyeh etc.</div>
</div>
</div>

Toggle

<div id="accordion" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#collapseOne" class="panel-toggle active" data-toggle="collapse" data-parent="#accordion"> 100% Responsive </a></h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">Anim pariatur etc.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#collapseTwo" class="panel-toggle" data-toggle="collapse" data-parent="#accordion"> Clean &amp; Professional Design </a></h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">Anim pariatur etc.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#collapseThree" class="panel-toggle" data-toggle="collapse" data-parent="#accordion"> Collapsible Group Item #3 </a></h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">Anim pariatur cliche etc.</div>
</div>
</div>
</div>

Alerts

<div class="alert alert-warning">Warning!</div>
<div class="alert alert-danger">Danger!</div>
<div class="alert alert-success">Success</div>
<div class="alert alert-info">Info</div>

<div class="alert alert-warning"><button type="button" class="close" data-dismiss="alert">Warning with dismiss</div>
<div class="alert alert-danger"><button type="button" class="close" data-dismiss="alert">Danger with dismiss</div>
<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert">Success with dismiss</div>
<div class="alert alert-info"><button type="button" class="close" data-dismiss="alert">Info with dismiss</div>

Duis non lectus sit amet est imperdiet cursus elementum vitae eros. Cras quis odio in risus euismod suscipit. Fusce viverra ligula vel justo bibendum semper. Nulla facilisi. Donec interdum, enim in dignissim lacinia, lectus nisl viverra lorem, ac pulvinar nunc ante at neque. Proin et dui eros, at aliquet est. Pellentesque consectetur lectus quis enim mollis ut convallis urna malesuada. Sed tincidunt interdum sapien vel gravida. Nulla a tellus lectus, in aliquet tellus. Donec aliquam.

 <ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>

• Dapibus ac facilisis in
• Cras sit amet nibh libero
• Porta ac consectetur ac
• Vestibulum at eros

<div class="jumbotron">
<h1>Jumobtron example</h1>
<p>This is a showcase of Bootstrap 3 Typography examples included with the Joostrap templates.</p>
</div>

Jumobtron example

This is a showcase of Bootstrap 3 Typography examples included with the Joostrap templates.

Buttons

<button type="button" class="btn btn-lg btn-default">Default</button> <button type="button" class="btn btn-lg btn-primary">Primary</button> <button type="button" class="btn btn-lg btn-success">Success</button> <button type="button" class="btn btn-lg btn-info">Info</button> <button type="button" class="btn btn-lg btn-warning">Warning</button> <button type="button" class="btn btn-lg btn-danger">Danger</button> <button type="button" class="btn btn-lg btn-link">Link</button>

<button type="button" class="btn btn-lg btn-default">Default large button</button>
<button type="button" class="btn btn-default">Normal Default button</button>
<button type="button" class="btn btn-sm btn-default">Small Default button</button>
<button type="button" class="btn btn-xs btn-default">Extra small Default</button>

Default Primary Success Info Warning Danger Link

Default Primary Success Info Warning Danger Link

Default Primary Success Info Warning Danger Link

Default Primary Success Info Warning Danger Link

Tables

<table class="table">

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<table class="table table-striped">

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<table class="table table-bordered">

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
	Mark	Otto	@TwBootstrap
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-bordered">

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Images

<img src="/" class="img-rounded" />
<img src="/" class="img-circle" />
<img src="/" class="img-thumbnail" />

Labels

Default Primary Success Info Warning Danger

Default Primary Success Info Warning Danger

Default Primary Success Info Warning Danger

Default Primary Success Info Warning Danger

Default Primary Success Info Warning Danger

Default Primary Success Info Warning Danger

Default Primary Success Info Warning Danger

Badges

Inbox 42

• Home 42
• Profile
• Messages 3

Alerts

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it's not super important.

Warning! Best check yo self, you're not looking too good.

Oh snap! Change a few things up and try submitting again.

Progress bars

60% Complete

40% Complete (success)

20% Complete

60% Complete (warning)

80% Complete (danger)

60% Complete

35% Complete (success)

20% Complete (warning)

10% Complete (danger)

List groups

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac
• Vestibulum at eros

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Panels

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">Panel content</div>
</div>

variations: primary, success, info, warning, danger

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Wells

<div class="well">Lorem ipsum etc.</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.