Components New Colours

Buttons

Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.

Default Primary Success Info Warning Danger Link

Default

<p>
 <a class="btn btn-default">Default</a>
 <a class="btn btn-primary">Primary</a>
 <a class="btn btn-success">Success</a>
 <a class="btn btn-info">Info</a>
 <a class="btn btn-warning">Warning</a>
 <a class="btn btn-danger">Danger</a>
 <a class="btn btn-link">Link</a>
</p>
<p>
 <a class="btn btn-default disabled">Default</a>
 <a class="btn btn-primary disabled">Primary</a>
 <a class="btn btn-success disabled">Success</a>
 <a class="btn btn-info disabled">Info</a>
 <a class="btn btn-warning disabled">Warning</a>
 <a class="btn btn-danger disabled">Danger</a>
 <a class="btn btn-link disabled">Link</a>
</p>
<p>
 <a class="btn btn-default btn-lg">Large button</a>
 <a class="btn btn-primary btn-lg">Large button</a>
</p>
<p>
 <a class="btn btn-default btn-sm">Small button</a>
 <a class="btn btn-primary btn-sm">Small button</a>
</p>
<p>
 <a class="btn btn-default btn-xs">Extra small button</a>
 <a class="btn btn-primary btn-xs">Extra small button</a>
</p>
<div class="btn-group">
 <a class="btn btn-default">Default</a> <a class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
 <ul class="dropdown-menu">
  <li><a>Action</a> </li>
  <li><a>Another action</a> </li>
  <li><a>Something else here</a> </li>
  <li class="divider"></li>
  <li><a>Separated link</a> </li>
 </ul>
</div>

Create block level buttons — those that span the full width of a parent — by adding .btn-block.

Block level button Block level button

<a class="btn btn-default btn-lg btn-block">Block level button</a>
<a class="btn btn-primary btn-lg btn-block">Block level button</a>

Box shadow

<div class="box-shadow">I'm in a box shadow</div>
<div class="well">I'm in a well</div>

Box shadow

I'm in a box shadow

Well box

I'm in a well

<div class="row"> 
  <div class="col-md-6"> 
    <div class="box-shadow"> 
    <div class="box-shadow-image"> <img src="http://placehold.it/450x250" border="0" /> </div>
      <h3 class="no-docs">Box Shadow with Image</h3>
      <p>Here we have a basic box shadow with image and content.</p>
    </div>
  </div>
</div>

Box Shadow with Image

Here we have a basic box shadow with image and content.

<div class="row"> 
  <div class="col-md-6"> 
    <div class="box-shadow block-link"> 
      <div class="box-shadow-image"> <img src="http://placehold.it/450x250" border="0" /> </div>
      <h3 class="no-docs">Box Shadow with Image and Link</h3>
      <p>This box is the same as above except it has a hover effect.</p>
	    <div class="btn btn-default" href="#"> 

    </div>
  </div>
</div>

Box Shadow with Image and Link

This box is the same as above except it has a hover effect.

<div class="col-md-6">
	<div class="box-grey"> 
		<h3>Box grey</h3>
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</p>
	</div>
</div>

Clear Box with Rectangular Image

<div class="row">
	<div class="col-md-6 "> <a href="#"><img class="image-responsive" src="https://via.placeholder.com/1100x480" alt="" border="0" /></a> </div>
	<div class="col-md-6 "><h3><a href="#">Item Heading</a> </h3>
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod, orem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</p>
	</div>
</div>

2 boxes layout

Item Heading

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod, orem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.

<div class="row">
	<div class="col-md-4 "> <a href="#">
		<img class="image-responsive" src="https://via.placeholder.com/700x300" alt="" border="0" /></a> 
				<h3><a href="#">Item Heading</a> </h3>
				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod, orem ipsum dolor sit amet, consetetur 	sadipscing elitr, sed diam nonumy eirmod.</p>
			</div>
		<div class="col-md-4 "> <a href="#"> 
			<img class="image-responsive" src="https://via.placeholder.com/700x300" alt="" border="0" /></a> 
			<h3><a href="#">Item Heading</a> </h3>
			<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod, orem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmodg.</p>
		</div>
			<div class="col-md-4 "> 
			<a hrefhref="#"><img class="image-responsive" src="https://via.placeholder.com/700x300" alt="" border="0" /></a> 
			<h3><a href="#">Item Heading</a> </h3>
			<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod, orem ipsum dolor sit amet.</p>
		</div>
	</div>

3 boxes layout

Item Heading

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod, orem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.

Item Heading

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod, orem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmodg.

Item Heading

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod, orem ipsum dolor sit amet.