Bootstrap 4 Standard Components

Note: This page uses pure Bootstrap CSS. The Enhanced page and all LinGeo pages use the LinGeo CSS file in conjunction with Bootstrap and various Javascript files.

Bootstrap is a free front-end framework for faster and easier web development framework including HTML and CSS based design for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as builtin JavaScript files.
Bootstrap is fully responsive with a mobile first framework.

Alerts

Basic alerts

View code example
	
	<div class="alert alert-primary" role="alert">
	 A simple primary alert—check it out!
	</div>
	<div class="alert alert-secondary" role="alert">
	 A simple secondary alert—check it out!
	</div>
	<div class="alert alert-default" role="alert">
	 A simple secondary alert—check it out!
	</div>
	<div class="alert alert-info" role="alert">
	 A simple info alert—check it out!
	</div>
	<div class="alert alert-success" role="alert">
	  A simple success alert—check it out!
	</div>
	<div class="alert alert-warning" role="alert">
	 A simple warning alert—check it out!
	</div>
	<div class="alert alert-danger" role="alert">
	 A simple danger alert—check it out!
	</div>
	
	

Alert Links

View code example
	
	<div class="alert alert-primary" role="alert">
	 A simple primary alert with a link. Give it a click if you like.
	<a href="javascript: void(0)" class="alert-link float-right">Click me</a>
	</div>
	<div class="alert alert-secondary" role="alert">
	 A simple secondary alert with a link. Give it a click if you like.
	<a href="javascript: void(0)" class="alert-link float-right">Click me</a>
	</div>
	<div class="alert alert-default" role="alert">
	 A simple default alert with a link. Give it a click if you like.
	<a href="javascript: void(0)" class="alert-link float-right">Click me</a>
	</div>
	<div class="alert alert-info" role="alert">
	 A simple info alert with a link. Give it a click if you like.
	<a href="javascript: void(0)" class="alert-link float-right">Click me</a>
	</div>
	<div class="alert alert-success" role="alert">
	 A simple success alert with a link. Give it a click if you like.
	<a href="javascript: void(0)" class="alert-link float-right">Click me</a>
	</div>
	<div class="alert alert-warning" role="alert">
	 A simple warning alert with a link. Give it a click if you like.
	<a href="javascript: void(0)" class="alert-link float-right">Click me</a>
	</div>
	<div class="alert alert-danger" role="alert">
	 A simple danger alert with a link. Give it a click if you like.
	<a href="javascript: void(0)" class="alert-link float-right">Click me</a>
	</div>
	
	

Alert with Additional Content

View code example
	

	<div class="alert alert-primary py-5" role="alert">
	<h4 class="alert-heading font-weight-bold mb-3">Well done!</h4>
	<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer
	 so that you can see how spacing within an alert works with this kind of content.</p>
	<hr>
	<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
	</div>	
	
	

Badges

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
View code example
	
		<h2 class="h1 mb-3">Example heading
		 <span class="badge badge-success">New</span>
		</h2>
		<h2 class="h2 mb-3">Example heading
		  <span class="badge badge-success">New</span>
		</h2>
		<h3 class="h3 mb-3">Example heading
		  <span class="badge badge-success">New</span>
		</h3>
		<h4 class="h4 mb-3">Example heading
		  <span class="badge badge-success">New</span>
		</h4>
		<h5 class="h5 mb-3">Example heading
		  <span class="badge badge-success">New</span>
		</h5>
		<h6 class="h6">Example heading
		  <span class="badge badge-success">New</span>
		</h6>
	
	

Buttons

Basic Buttons

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

Button Tags

Link
View code example
	
		<a class="btn btn-primary" href="#" role="button">Link</a>
		<button class="btn btn-primary" type="submit">Button</button>
		<input class="btn btn-primary" type="button" value="Input">
		<input class="btn btn-primary" type="submit" value="Submit">
		<input class="btn btn-primary" type="reset" value="Reset">
	
	

Outline Buttons

View code example
	
		<button type="button" class="btn btn-outline-primary">Primary</button>
		<button type="button" class="btn btn-outline-secondary">Secondary</button>
		<button type="button" class="btn btn-outline-default">Default</button>
		<button type="button" class="btn btn-outline-success">Success</button>
		<button type="button" class="btn btn-outline-danger">Danger</button>
		<button type="button" class="btn btn-outline-warning">Warning</button>
		<button type="button" class="btn btn-outline-info">Info</button>
	
	

Button Blocks

View code example
	
		<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
		<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
	
	

Button Sizes

View code example
	
		<button type="button" class="btn btn-default btn-lg">Large button</button>
		<button type="button" class="btn btn-info btn-lg">Large button</button>
		<button type="button" class="btn btn-default btn">Normal button</button>
		<button type="button" class="btn btn-info btn">Normal button</button>
		<button type="button" class="btn btn-default btn-sm">Small button</button>
		<button type="button" class="btn btn-info btn-sm">Small button</button>
	
	

Button States

View code example
	
		<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
		<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>
	
	

Buttons Disabled

View code example
	
		<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
		<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>
	
	

Buttons With Icons

Uses fontawesome *See the Bootstrap Enhanced page for alternate set of icon fonts.

View code example
	
              <button type="button" class="btn btn-primary">
                <i class="fab fa-facebook"></i>
              </button>
              <button type="button" class="btn btn-secondary">
                <i class="fa fa-twitter"></i>
              </button>
              <button type="button" class="btn btn-default">
                <i class="fa fa-instagram"></i>
              </button>
              <button type="button" class="btn btn-info">
                <i class="fa fa-linkedin"></i>
              </button>
              <button type="button" class="btn btn-success">
                <i class="fa fa-snapchat"></i>
              </button>
              <button type="button" class="btn btn-warning">
                <i class="fa fa-cog"></i>
              </button>
              <button type="button" class="btn btn-danger">
                <i class="fa fa-envelope"></i>
              </button>
	
	

Cards

Card image cap

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Link To

Card with image in middle

And a subtitle

Card image cap

Some quick example text to build on the card title and make up the bulk of the card's content.

Link To

Card with list-group

Some quick example text to build on the card title and make up the bulk of the card's content.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
View Card w/image at top code
	
	<div class="col-sm-4">
		<div class="card">
		 <img class="card-img-top img-fluid" src="assets/img/site-images/img-01.jpg" alt="Card image cap">
		<div class="card-body">
		<h4 class="card-title-2">
			Card title
		</h4>
		<h4 class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</h4>
		<a href="#" class="btn btn-primary">Link To</a> 
		 </div>
	</div>
	
			
View Card w/image in middle code
		
		<div class="card">
		<div class="card-body">
		<h3 class="card-title-2">
			Card with image in middle
		</h3>
		<h6 class="card-subtitle text-muted">
			And a subtitle
		</h4>
		</div>
		<img class="img-fluid" src="assets/img/site-images/img-02.jpg" alt="Card image cap">
		<div class="card-body">
		<h4 class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</h4>
		<a href="#" class="btn btn-primary">Link To</a> 
		 </div>
		 </div>
		
			
View Card w/List-Group code
	
	<div class="card">
	<h4 class="card-header">
	Card with list-group
	</h4>
	<div class="card-body">
		<h4 class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</h4>
	</div>
		<ul class="list-group list-group-flush">
		<li class="list-group-item">Cras justo odio</li>
		<li class="list-group-item">Dapibus ac facilisis in</li>
		<li class="list-group-item">Vestibulum at eros</li>
		</ul>
	<div class="card-footer">
		<small class="text-muted">Updated: 17-Aug-Wed</small>
		</div>
	</div>
	
			

Card Content

Cards support a huge array of content and define their own helper classes for content.

.card-body

This class allows you to add padding to either the whole card or blocks of content within a card. This is really useful if some content needs to stretch to the edges (like images) and some not (like text).

.card-header + .card-footer

These classes apply padding, a background color and border radias properties to the card header or footer, useful for capping the top & bottom of a card. .card-header can also be applied directly to an h badge element to apply a similar effect.

.card-title

This simply applies a bottom margin to an item which should be considered the title of the card.

.card-text

This applies no effect on default cards and is only used when using the .card-inverse class (below).

.card-header-tabs + .card-header-pills

These classes should be applied to navigation elements shown in the card header.

Tabs

With supporting text below as a natural lead-in to additional content.

Link To

Pills

With supporting text below as a natural lead-in to additional content.

Link To

List groups .list-group-flush

This class allows you to include list groups within cards and have them stretch to the edge of the card.

List group in card

  • List group item
  • List group item
  • List group item

Other card content.

Link To

Card Images

Images can be added to cards either at the top, middle, bottom or even as a background image.
card-img-top, card-img-bottom, card-img, card-img-overlay

Card image cap

Card image top

Some quick example text to build on the card title and make up the bulk of the card's content.

Link To

Card image bottom

Some quick example text to build on the card title and make up the bulk of the card's content.

Link To
Card image cap

Card image middle

Card image cap

Some quick example text to build on the card title and make up the bulk of the card's content.

Link To
Card image cap

Card image background

Some quick example text to build on the card title and make up the bulk of the card's content.

Link To

Card Content Alignment

Cards support the standard text alignment utilities: .text-BREAKPOINT-ALIGN

Default alignment

With supporting text below as a natural lead-in to additional content.

Link To

Center alignment text-center

With supporting text below as a natural lead-in to additional content.

Link To

Right alignment text-right

With supporting text below as a natural lead-in to additional content.

Link To

Card Grids

Cards can be laid out using the grid system built into Bootstrap.

Card

With supporting text below as a natural lead-in to additional content.

Link To

Card

With supporting text below as a natural lead-in to additional content.

Link To

Card

With supporting text below as a natural lead-in to additional content.

Link To

Card

With supporting text below as a natural lead-in to additional content.

Link To

Card

With supporting text below as a natural lead-in to additional content.

Link To

Card

With supporting text below as a natural lead-in to additional content.

Link To

Card Groups

Groups will force all cards to be displayed on the same row as well as be the same width and height.

Simply wrap your card elements within a .card-group wrapper like this: <div class="card-group">...cards.....</div>

Card image cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card image cap

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card image cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago


Card Decks

Card decks work much like groups expect the cards are not attached to each other.

Card decks require 2 wrapper elements like this: <div class="card-deck-wrapper"><div class="card-deck">...cards.....</div></div>

Card image cap

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card image cap

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card image cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago


With Aligned Footers

Like card groups if cards contain .card-footer elements they will automatically get pulled to the bottom and aligned with the other card footers.

Card image cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Card image cap

Card title

This card has supporting text below as a natural lead-in to additional content.

Card image cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.


Card Columns

Cards can be set to display in Masonry-like columns just by adding a wrapper with the class .card-columns.

Card image cap

Card title that wraps to a new line

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Card image cap

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Someone famous in Source Title

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

Carousels

Bootstrap Carousels are, by default, set to run in "Autoplay. Unless the image slider is the only thing on your website (bad idea!), it’s not a good thing. It takes away attention from everything else. In the following examples, except of course in the Slides Only example, we have set our carousels to be manually controlled by the page User. data-interval="false"

We made three other changes to the basic Bootstrap Carousel configuration. 1. Changed the Indicator styling from a bar to a circle. .carousel-indicators li { width: 0.75rem; height: 0.75rem; -webkit-border-radius: 50%; border-radius: 50%; } 2. Changed the Indicators so they can be advance and/or reverse the slides by the User. li data-target= 3. Changed the carousel Caption font color and size. span style="color:#ffffff"

Note: It's best to make the carousel-indicator and font styling changes in the CSS stylesheet.

Slides only

View code example

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
 <div class="carousel">
  <div class="carousel-item active">
   <img class="d-block w-100" src="assets/img/site-images/img-15.jpg" alt="First slide">
  </div>
  <div class="carousel-item">
   <img class="d-block w-100" src="assets/img/site-images/img-14.jpg" alt="Second slide">
  </div>
   <div class="carousel-item">
  <img class="d-block w-100" src="assets/img/site-images/img-13.jpg" alt="Third slide">
  </div>
 </div>
</div>
	
	

With controls

View code example

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
 <div class="carousel">
  <div class="carousel-item active">
   <img class="d-block w-100" src="assets/img/site-images/img-12.jpg" alt="First slide">
  </div>
<div class="carousel-item">
 <img class="d-block w-100" src="assets/img/site-images/img-11.jpg" alt="Second slide">
  </div>
  <div class="carousel-item">
	<img class="d-block w-100" src="assets/img/site-images/img-10.jpg" alt="Third slide">
	</div>
	</div>
	<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
	<span class="carousel-control-prev-icon" aria-hidden="true"></span>
	<span class="sr-only">Previous</span>
	</a>
	<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
	<span class="carousel-control-next-icon" aria-hidden="true"></span>
	<span class="sr-only">Next</span>
	</a>
   </div>
  </div>
</div>
	
	

With Controls & Indicators

View code example

                <div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="false">
                  <ol class="carousel-indicators">
                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                  </ol>
                  <div class="carousel">
                    <div class="carousel-item active">
                      <img class="d-block w-100" src="assets/img/site-images/img-09.jpg" alt="First slide">
                    </div>
                    <div class="carousel-item">
                      <img class="d-block w-100" src="assets/img/site-images/img-08.jpg" alt="Second slide">
                    </div>
                    <div class="carousel-item">
                      <img class="d-block w-100" src="assets/img/site-images/img-07.jpg" alt="Third slide">
                    </div>
                  </div>
                  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                  </a>
                  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                  </a>
                </div>
	
	

With captions

View code example

	<div class="row mb-5">
		<div class="col-md-12">
	<div id="carousel-with-captions" class="carousel slide" data-ride="carousel" data-interval="false">
		<ol class="carousel-indicators">
			<li data-target="#carousel-with-captions" class="active"data-slide-to="0" ></li>
			<li data-target="#carousel-with-captions"> data-slide-to="1"></li>
			<li data-target="#carousel-with-captions"> data-slide-to="2"></li>
		</ol>
	<div class="carousel">
		<div class="carousel-item active">
			<img class="d-block w-100" src="assets/img/site-images/img-06.jpg" alt="First slide">
				<div class="carousel-caption d-none d-md-block">
                        <h3 class="font-weight-bold"><span style="color:#ffffff">First slide label</span></h3>
                        <h4><strong><span style="color:#ffffff">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span></strong></h4>
				</div>
	</div>
		<div class="carousel-item">
			<img class="d-block w-100" src="assets/img/site-images/img-05.jpg" alt="Second slide">
				<div class="carousel-caption d-none d-md-block">
                        <h4 class="font-weight-bold"><span style="color:#ffffff">Second slide label</span></h4>
                        <h4><strong><span style="color:#ffffff">Deserunt, magnam dolorum minus quidem molestiae dolorem.</span></strong></h4>
				</div>
		</div>
		<div class="carousel-item">
			<img class="d-block w-100" src="assets/img/site-images/img-04.jpg" alt="Third slide">
				<div class="carousel-caption d-none d-md-block">
                        <h4 class="font-weight-bold"><span style="color:#ffffff">Third slide label</span></h4>
                        <h4><strong><span style="color:#ffffff">Praesent commodo cursus magna, vel scelerisque nisl consectetur.</span></strong></h4>
				</div>
			</div>
		</div>
	<a class="carousel-control-prev" href="#carousel-with-captions" role="button" data-slide="prev">
		<span class="carousel-control-prev-icon" aria-hidden="true"></span>
		<span class="sr-only">Previous</span>
	</a>
	<a class="carousel-control-next" href="#carousel-with-captions" role="button" data-slide="next">
		<span class="carousel-control-next-icon" aria-hidden="true"></span>
		<span class="sr-only">Next</span>
	</a>
	</div>
	
	

Collapse

Basic

Click the buttons below to show and hide another element via class changes.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
View code example
	
                      <!-- Collapse buttons -->
                      <div class="mt-2">
                        <a class="btn btn-primary mr-1" data-toggle="collapse" href="#collapseExample12" aria-expanded="false" aria-controls="collapseExample12">
                          Link with href
                        </a>
                        <button class="btn btn-primary ml-1" type="button" data-toggle="collapse" data-target="#collapseExample12" aria-expanded="false"
                          aria-controls="collapseExample12">
                          Button with data-target
                        </button>
                      </div>
                      <!-- Collapse buttons -->
                      <!-- Collapsible element -->
                      <div class="collapse" id="collapseExample12">
                        <div class="m-3">
                          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica,
                          craft beer labore wes anderson cred nesciunt sapiente ea proident.
                        </div>
                      </div>
                      <!-- Collapsible element -->

	
	

Multiple Targets

A button or a can show and hide multiple elements by referencing them with a JQuery selector in its href or data-target attribute. Multiple button> or a can show and hide an element if they each reference it with their href or data-target attribute.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
View code example
	
	<!-- Collapse buttons -->
	<div>
	  <a class="btn btn-primary m-1" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
	  <button class="btn btn-primary m-1" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false"
		aria-controls="multiCollapseExample2">Toggle second element</button>
	<button class="btn btn-primary m-1" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false"
		aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
	</div>
	<!--/ Collapse buttons -->
	<!-- Collapsible content -->
		<div class="row mt-4">
		<div class="col">
			<div class="collapse multi-collapse" id="multiCollapseExample1">
			<div class="card card-body">
				Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica,
				craft beer labore wes anderson cred nesciunt sapiente ea proident.
			</div>
		</div>
	</div>
		<div class="col">
			<div class="collapse multi-collapse" id="multiCollapseExample2">
			<div class="card card-body">
				Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica,
				craft beer labore wes anderson cred nesciunt sapiente ea proident.
					</div>
				</div>
			</div>
		</div>
	<!--/ Collapsible content -->
	
	

Input Boxes

View code example
	
	<!-- Default input -->
	<label for="exampleForm2">Default input</label>
	<input type="text" id="exampleForm2" class="form-control">

	<!-- Placeholder input -->
	<label for="inputPlaceholderEx">Placeholder</label>
	<input placeholder="Placeholder" type="text" id="inputPlaceholderEx" class="form-control">	
	
View code example
	
	<!-- Textarea -->
	<label for="exampleFormControlTextarea1">Textarea</label>
	<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
	
	
View code example
	
	<!-- Password input -->
	<label for="exampleInputPassword1">Password</label>
	<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">

	<!-- Default input -->
	<label for="inputDisabledEx2" class="disabled">Example label</label>
	<input type="text" id="inputDisabledEx2" class="form-control" disabled>
	
	
Checkboxes & Buttons
Inline Checkboxes
Inline Radio Buttons
Horizontal Selects
Vertical Selects
View code example
	
		<h6><strong>Checkboxes &amp; Buttons</strong></h6>
      <label class="checkbox">
          <input type="checkbox" value="">
            Check this out!
      </label>
      <label class="radio">
          <input type="radio" name"optionsRadios" id="optionsRadios2" value="option2">
            Radio Button!
      </label>	
		  </div>
            <div class="col-sm">
		<h6><strong>Inline Checkboxes</strong></h6>
      <label for="option1" class="checkbox inline">
        <input id="option1" type="checkbox" id="inlineCheckbox1" value="option1"> 1
      </label>
      <label for="option2" class="checkbox inline">
        <input id="option2" type="checkbox" id="inlineCheckbox2" value="option2"> 2
      </label>
        <label for="option3" class="checkbox inline">
      <input id="option3" type="checkbox" id="inlineCheckbox3" value="option3"> 3
      </label>
		  </div>
            <div class="col-sm">
		<h6><strong>Inline Radio Buttons</strong></h6>
      <label for="option1" class="checkbox inline">
        <input id="option1" type="radio" id="inlineCheckbox1" value="option1"> 1
      </label>
      <label for="option2" class="checkbox inline">
        <input id="option2" type="radio" id="inlineCheckbox2" value="option2"> 2
      </label>
        <label for="option3" class="checkbox inline">
      <input id="option3" type="radio" id="inlineCheckbox3" value="option3"> 3
      </label>
		  </div>
	</div>
	
          <div class="row">
            <div class="col-sm">
		<h6><strong>Horizontal Selects</strong></h6>
      <select>
        <option>United States</option>
        <option>United Kingdom</option>
        <option>Bolivia</option>
        <option>Argentina</option>
        <option>New Zealand</option>
        </select>
		  </div>
            <div class="col-sm">
		<h6><strong>Vertical Selects</strong></h6>
        <select multiple="multiple">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        </select>
	
	

Jumbotron

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.


It uses utility classes for typography and spacing to space content out within the larger container.

Some action

View code example
	
	<div class="jumbotron">
		<h1 class="display-3">Hello, world!</h1>
			<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
		<hr class="my-2">
			<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
			<p class="lead"><a class="btn btn-primary btn-lg" href="#!" role="button">Some action</a></p>
	</div>
	
	

Media

Basic

Generic placeholder image
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
View code example
	
	<div class="media">
	  <img class="mr-3" height="70px" width="70px" src="assets/img/site-images/img-14.jpg" alt="Generic placeholder image">
	<div class="media-body">
	  <h5 class="font-weight-bold mt-0">Media heading</h5>
		Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
		vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia
		congue felis in faucibus.
	</div>
	</div>
	
	

Alignment

Generic placeholder image
Top-aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Generic placeholder image
Center-aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.


Generic placeholder image
Bottom-aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

View code example
	
	<div class="media">
		<img class="align-self-start mr-3" height="70px" width="70px" src="assets/img/site-images/img-14.jpg"
			alt="Generic placeholder image">
		<div class="media-body">
		<h5 class="font-weight-bold mt-0">Top-aligned media</h5>
			<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus
			odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
			Donec lacinia congue felis in faucibus.</p>
			<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus
			et magnis dis parturient montes, nascetur ridiculus mus.</p>
		</div>
	</div>

	<div class="media">
		<img class="align-self-center mr-3" height="70px" width="70px" src="assets/img/site-images/img-14.jpg"
			alt="Generic placeholder image">
		<div class="media-body">
		<h5 class="font-weight-bold mt-0">Center-aligned media</h5>
			<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus
			odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
			Donec lacinia congue felis in faucibus.</p>
			<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus
			et magnis dis parturient montes, nascetur ridiculus mus.</p>
		</div>
	</div>

	<div class="media">
		<img class="align-self-end mr-3" height="70px" width="70px" src="assets/img/site-images/img-14.jpg" alt="Generic placeholder image">
		<div class="media-body">
		<h5 class="font-weight-bold mt-0">Bottom-aligned media</h5>
			<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus
			odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
			Donec lacinia congue felis in faucibus.</p>
			<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus
			et magnis dis parturient montes, nascetur ridiculus mus.</p>
		</div>
	</div>
	
	

List

  • Generic placeholder image
    List-based media object
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  • Generic placeholder image
    List-based media object
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  • Generic placeholder image
    List-based media object
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
View code example
	
	<ul class="list-unstyled">
		<li class="media">
	<img class="mr-3" height="70px" width="70px" src="assets/img/site-images/img-14.jpg" alt="Generic placeholder image">
		<div class="media-body">
	<h5 class="font-weight-bold mt-0 mb-1">List-based media object</h5>
		Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
		vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia
		congue felis in faucibus.
	</div>
	</li>
	<li class="media my-4">
	<img class="mr-3" height="70px" width="70px" src="assets/img/site-images/img-14.jpg" alt="Generic placeholder image">
		<div class="media-body">
	<h5 class="font-weight-bold mt-0 mb-1">List-based media object</h5>
		Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
		vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia
		congue felis in faucibus.
	</div>
	</li>
	<li class="media">
	<img class="mr-3" height="70px" width="70px" src="assets/img/site-images/img-14.jpg" alt="Generic placeholder image">
		<div class="media-body">
	<h5 class="font-weight-bold mt-0 mb-1">List-based media object</h5>
		Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
		vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia
		congue felis in faucibus.
    </div>
		</li>
	</ul>
	
	

Modals

View code example
	
<!-- Small Modal -->
	<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-sm" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				<span aria-hidden="true">&times;</span>
				</button>
			</div>
		<div class="modal-body">
			...
	</div>
		<div class="modal-footer">
			<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			<button type="button" class="btn btn-primary">Save changes</button>
		</div>
			</div>
		</div>
	</div>
	<div class="pr-3">
		<!-- Button trigger modal -->
		<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
			Small modal
		</button>
	</div>

<!-- Default Size Modal -->
	<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel2" aria-hidden="true">
		<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel2">Modal title</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				<span aria-hidden="true">&times;</span>
				</button>
			</div>
		<div class="modal-body">
			...
	</div>
		<div class="modal-footer">
			<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			<button type="button" class="btn btn-primary">Save changes</button>
		</div>
			</div>
		</div>
	</div>
	<div class="pr-3">
		<!-- Button trigger modal -->
		<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal2">
			Default Size modal
		</button>
	</div>

<!-- Large Modal -->
	<div class="modal fade" id="exampleModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel3" aria-hidden="true">
		<div class="modal-dialog modal-lg " role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel3">Modal title</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				<span aria-hidden="true">&times;</span>
				</button>
			</div>
		<div class="modal-body">
			...
	</div>
		<div class="modal-footer">
			<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			<button type="button" class="btn btn-primary">Save changes</button>
		</div>
			</div>
		</div>
	</div>
	<div class="pr-3">
			<!-- Button trigger modal -->
			<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal3">
				Large modal
			</button>
	</div>
				</div>
			</div>
		</div>
	</div>
	
	
View code example
	
              <nav aria-label="Page navigation example">
                <ul class="pagination">
                  <li class="page-item">
                    <a class="page-link" href="#" aria-label="Previous">
                      <span aria-hidden="true">
                        <i class="fa fa-angle-left" style="font-size:20px;color:black;"></i>
                      </span>
                      <span class="sr-only">Previous</span>
                    </a>
                  </li>
                  <li class="page-item">
                    <a class="page-link" href="#">1</a>
                  </li>
                  <li class="page-item">
                    <a class="page-link" href="#">2</a>
                  </li>
                  <li class="page-item">
                    <a class="page-link" href="#">3</a>
                  </li>
                  <li class="page-item">
                    <a class="page-link" href="#" aria-label="Next">
                      <span aria-hidden="true">
                        <i class="fa fa-angle-right" style="font-size:20px;color:black;"></i>
                      </span>
                      <span class="sr-only">Next</span>
                    </a>
                  </li>
                </ul>
              </nav>

              <br>

              <nav aria-label="Page navigation example">
                <ul class="pagination">
                  <li class="page-item">
                    <a class="page-link" href="#" aria-label="Previous">
                      <span aria-hidden="true">
                        <i class="fa fa-angle-left" style="font-size:20px;color:black;"></i> Prev
                      </span>
                      <span class="sr-only">Prev</span>
                    </a>
                  </li>
                  <li class="page-item">
                    <a class="page-link" href="#">1</a>
                  </li>
                  <li class="page-item">
                    <a class="page-link" href="#">2</a>
                  </li>
                  <li class="page-item">
                    <a class="page-link" href="#">3</a>
                  </li>
                  <li class="page-item">
                    <a class="page-link" href="#" aria-label="Next">
                      <span aria-hidden="true">Next
                        <i class="fa fa-angle-right" style="font-size:20px;color:black;"></i>
                      </span>
                      <span class="sr-only">Next</span>
                    </a>
                  </li>
                </ul>
              </nav>

              <br>

              <!-- Subheading -->
              <h2 class="sh2 mb-4">Active</h2>

              <nav aria-label="Page navigation example">
                <ul class="pagination">
                  <li class="page-item">
                    <a class="page-link" href="#" tabindex="-1">Previous</a>
                  </li>
                  <li class="page-item">
                    <a class="page-link" href="#">1</a>
                  </li>
                  <li class="page-item active">
                    <a class="page-link" href="#">2
                      <span class="sr-only">(current)</span>
                    </a>
                  </li>
                  <li class="page-item">
                    <a class="page-link" href="#">3</a>
                  </li>
                  <li class="page-item">
                    <a class="page-link" href="#">Next</a>
                  </li>
                </ul>
              </nav>
              
	
	

Popovers

Basic

View code example
	
	<button type="button" class="btn btn-primary" data-toggle="popover" data-placement="top" title="popover on top" data-content="Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.">popover on top</button>
	<button type="button" class="btn btn-default" data-toggle="popover" data-placement="right" title="popover on right" data-content="Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.">popover on right</button>
	<button type="button" class="btn btn-secondary" data-toggle="popover" data-placement="bottom" title="popover on bottom" data-content="Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.">popover on bottom</button>
	<button type="button" class="btn btn-success" data-toggle="popover" data-placement="left" title="popover on left" data-content="Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.">popover on left</button>
	
	
		// popovers Initialization
		$(function () {
			$('[data-toggle="popover"]').popover()
		})
	
	

Dismiss on Next Click

View code example
	
	<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover"
	 data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
	
	
		// popovers Initialization
		$(function () {
			$('[data-toggle="popover"]').popover()
		})
	
	

Progress Bars

Basic

View code example
	
	<div class="progress progress my-3">
		<div class="progress-bar" role="progressbar" style="width: 0;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
	</div>
	<div class="progress progress my-3">
		<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
	</div>
	<div class="progress progress my-3">
		<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
	</div>
	<div class="progress progress my-3">
		<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
	</div>
	<div class="progress progress my-3">
		<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
	</div>
	
	

Height

View code example
	
    <div class="progress mb-3" style="height: 10px;">
        <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="progress" style="height: 30px;">
        <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
	
	

Labels

25%
75%
View code example
	
    <div class="progress mb-3">
        <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
    </div>
    <div class="progress">
        <div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
	
	

Background

View code example
	
    <div class="progress mb-3">
        <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="progress mb-3">
        <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="progress mb-3">
        <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
	
	

Striped

View code example
	
    <div class="progress mb-3">
        <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="progress mb-3">
        <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="progress mb-3">
        <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="progress mb-3">
        <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="progress mb-3">
        <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
	
	

Multiple Bars

View code example
	
    <div class="progress">
        <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
        <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
        <div class="progress-bar bg-danger" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
	
	

Animated

65%
View code example
	
    <div class="progress">
        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
    </div>
	
	

Shadows

Basic

No shadow
Small shadow
Regular shadow
Larger shadow
View code example
	
	<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
	<div class="shadow-sm p-3 mb-5 bg-white rounded">Small shadow</div>
	<div class="shadow p-3 mb-5 bg-white rounded">Regular shadow</div>
	<div class="shadow-lg p-3 mb-5 bg-white rounded">Larger shadow</div>
	
	

Tables

Basic

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
View code example
	
                      <table class="table">
                        <thead>
                          <tr>
                            <th scope="col">#</th>
                            <th scope="col">First</th>
                            <th scope="col">Last</th>
                            <th scope="col">Handle</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <th scope="row">1</th>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                          </tr>
                          <tr>
                            <th scope="row">2</th>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                          </tr>
                          <tr>
                            <th scope="row">3</th>
                            <td>Larry</td>
                            <td>the Bird</td>
                            <td>@twitter</td>
                          </tr>
                        </tbody>
                      </table>
	
	

Table Head

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

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
View code example
	
                      <table class="table">
                        <thead class="thead-dark">
                          <tr>
                            <th scope="col">#</th>
                            <th scope="col">First</th>
                            <th scope="col">Last</th>
                            <th scope="col">Handle</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <th scope="row">1</th>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                          </tr>
                          <tr>
                            <th scope="row">2</th>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                          </tr>
                          <tr>
                            <th scope="row">3</th>
                            <td>Larry</td>
                            <td>the Bird</td>
                            <td>@twitter</td>
                          </tr>
                        </tbody>
                      </table>

                      <table class="table">
                        <thead class="thead-light">
                          <tr>
                            <th scope="col">#</th>
                            <th scope="col">First</th>
                            <th scope="col">Last</th>
                            <th scope="col">Handle</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <th scope="row">1</th>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                          </tr>
                          <tr>
                            <th scope="row">2</th>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                          </tr>
                          <tr>
                            <th scope="row">3</th>
                            <td>Larry</td>
                            <td>the Bird</td>
                            <td>@twitter</td>
                          </tr>
                        </tbody>
                      </table>
	
	

Striped Rows

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
View code example
	
                      <table class="table table-striped">
                        <thead>
                          <tr>
                            <th scope="col">#</th>
                            <th scope="col">First</th>
                            <th scope="col">Last</th>
                            <th scope="col">Handle</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <th scope="row">1</th>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                          </tr>
                          <tr>
                            <th scope="row">2</th>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                          </tr>
                          <tr>
                            <th scope="row">3</th>
                            <td>Larry</td>
                            <td>the Bird</td>
                            <td>@twitter</td>
                          </tr>
                        </tbody>
                      </table>
	
	

Bordered Table

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
View code example
	
                      <table class="table table-bordered">
                        <thead>
                          <tr>
                            <th scope="col">#</th>
                            <th scope="col">First</th>
                            <th scope="col">Last</th>
                            <th scope="col">Handle</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <th scope="row">1</th>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                          </tr>
                          <tr>
                            <th scope="row">2</th>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                          </tr>
                          <tr>
                            <th scope="row">3</th>
                            <td colspan="2">Larry the Bird</td>
                            <td>@twitter</td>
                          </tr>
                        </tbody>
                      </table>
	
	

Borderless Table

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
View code example
	
                      <table class="table table-borderless">
                        <thead>
                          <tr>
                            <th scope="col">#</th>
                            <th scope="col">First</th>
                            <th scope="col">Last</th>
                            <th scope="col">Handle</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <th scope="row">1</th>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                          </tr>
                          <tr>
                            <th scope="row">2</th>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                          </tr>
                          <tr>
                            <th scope="row">3</th>
                            <td colspan="2">Larry the Bird</td>
                            <td>@twitter</td>
                          </tr>
                        </tbody>
                      </table>
	
	

Hoverable Rows

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
View code example
	
                      <table class="table table-hover">
                        <thead>
                          <tr>
                            <th scope="col">#</th>
                            <th scope="col">First</th>
                            <th scope="col">Last</th>
                            <th scope="col">Handle</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <th scope="row">1</th>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                          </tr>
                          <tr>
                            <th scope="row">2</th>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                          </tr>
                          <tr>
                            <th scope="row">3</th>
                            <td colspan="2">Larry the Bird</td>
                            <td>@twitter</td>
                          </tr>
                        </tbody>
                      </table>
	
	

Small Table

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
View code example
	
                      <table class="table table-sm">
                        <thead>
                          <tr>
                            <th scope="col">#</th>
                            <th scope="col">First</th>
                            <th scope="col">Last</th>
                            <th scope="col">Handle</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <th scope="row">1</th>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                          </tr>
                          <tr>
                            <th scope="row">2</th>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                          </tr>
                          <tr>
                            <th scope="row">3</th>
                            <td colspan="2">Larry the Bird</td>
                            <td>@twitter</td>
                          </tr>
                        </tbody>
                      </table>
	
	

Captions

List of users
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
View code example
	
                      <table class="table">
                        <caption>List of users</caption>
                        <thead>
                          <tr>
                            <th scope="col">#</th>
                            <th scope="col">First</th>
                            <th scope="col">Last</th>
                            <th scope="col">Handle</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <th scope="row">1</th>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                          </tr>
                          <tr>
                            <th scope="row">2</th>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                          </tr>
                          <tr>
                            <th scope="row">3</th>
                            <td>Larry</td>
                            <td>the Bird</td>
                            <td>@twitter</td>
                          </tr>
                        </tbody>
                      </table>
	
	

Responsive

# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell
View code example
	
                      <table class="table">
                        <thead>
                          <tr>
                            <th scope="col">#</th>
                            <th scope="col">Heading</th>
                            <th scope="col">Heading</th>
                            <th scope="col">Heading</th>
                            <th scope="col">Heading</th>
                            <th scope="col">Heading</th>
                            <th scope="col">Heading</th>
                            <th scope="col">Heading</th>
                            <th scope="col">Heading</th>
                            <th scope="col">Heading</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <th scope="row">1</th>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                          </tr>
                          <tr>
                            <th scope="row">2</th>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                          </tr>
                          <tr>
                            <th scope="row">3</th>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                          </tr>
                        </tbody>
                      </table>
	
	

Breakpoint Specific

# Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell

# Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell

# Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell

# Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell
View code example
	
                      <div class="table-responsive-sm">
                        <table class="table">
                          <thead>
                            <tr>
                              <th scope="col">#</th>
                              <th scope="col">Heading</th>
                              <th scope="col">Heading</th>
                              <th scope="col">Heading</th>
                              <th scope="col">Heading</th>
                              <th scope="col">Heading</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <th scope="row">1</th>
                              <td>Cell</td>
                              <td>Cell</td>
                              <td>Cell</td>
                              <td>Cell</td>
                              <td>Cell</td>
                            </tr>
                            <tr>
                              <th scope="row">2</th>
                              <td>Cell</td>
                              <td>Cell</td>
                              <td>Cell</td>
                              <td>Cell</td>
                              <td>Cell</td>
                            </tr>
                            <tr>
                              <th scope="row">3</th>
                              <td>Cell</td>
                              <td>Cell</td>
                              <td>Cell</td>
                              <td>Cell</td>
                              <td>Cell</td>
                            </tr>
                          </tbody>
                        </table>
                      </div>

                      <div class="table-responsive-md">
                        <table class="table">
                          <thead>
                            <tr>
                              <th scope="col">#</th>
                              <th scope="col">Heading</th>
                              <th scope="col">Heading</th>
                              <th scope="col">Heading</th>
                              <th scope="col">Heading</th>
                              <th scope="col">Heading</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <th scope="row">1</th>
                              <td>Cell</td>
                              <td>Cell</td>
                              <td>Cell</td>
                              <td>Cell</td>
                              <td>Cell</td>
                            </tr>
                            <tr>
                              <th scope="row">2</th>
                              <td>Cell</td>
                              <td>Cell</td>
                              <td>Cell</td>
                              <td>Cell</td>
                              <td>Cell</td>
                            </tr>
                            <tr>
                              <th scope="row">3</th>
                              <td>Cell</td>
                              <td>Cell</td>
                              <td>Cell</td>
                              <td>Cell</td>
                              <td>Cell</td>
                            </tr>
                          </tbody>
                        </table>
                      </div>

                      <div class="table-responsive-lg">
                        <table class="table">
                          <thead>
                            <tr>
                              <th scope="col">#</th>
                              <th scope="col">Heading</th>
                              <th scope="col">Heading</th>
                              <th scope="col">Heading</th>
                              <th scope="col">Heading</th>
                              <th scope="col">Heading</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <th scope="row">1</th>
                              <td>Cell</td>
                              <td>Cell</td>
                              <td>Cell</td>
                              <td>Cell</td>
                              <td>Cell</td>
                            </tr>
                            <tr>
                              <th scope="row">2</th>
                              <td>Cell</td>
                              <td>Cell</td>
                              <td>Cell</td>
                              <td>Cell</td>
                              <td>Cell</td>
                            </tr>
                            <tr>
                              <th scope="row">3</th>
                              <td>Cell</td>
                              <td>Cell</td>
                              <td>Cell</td>
                              <td>Cell</td>
                              <td>Cell</td>
                            </tr>
                          </tbody>
                        </table>
                      </div>

                      <div class="table-responsive-xl">
                        <table class="table">
                          <thead>
                            <tr>
                              <th scope="col">#</th>
                              <th scope="col">Heading</th>
                              <th scope="col">Heading</th>
                              <th scope="col">Heading</th>
                              <th scope="col">Heading</th>
                              <th scope="col">Heading</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <th scope="row">1</th>
                              <td>Cell</td>
                              <td>Cell</td>
                              <td>Cell</td>
                              <td>Cell</td>
                              <td>Cell</td>
                            </tr>
                            <tr>
                              <th scope="row">2</th>
                              <td>Cell</td>
                              <td>Cell</td>
                              <td>Cell</td>
                              <td>Cell</td>
                              <td>Cell</td>
                            </tr>
                            <tr>
                              <th scope="row">3</th>
                              <td>Cell</td>
                              <td>Cell</td>
                              <td>Cell</td>
                              <td>Cell</td>
                              <td>Cell</td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
	
	

Tabs

Basic

First title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?

Second title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?

Third title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?

View code example
	
	<ul class="nav nav-tabs" id="myTab" role="tablist">
	<li class="nav-item">
		<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
	</li>
	<li class="nav-item">
		<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
	</li>
	<li class="nav-item">
		<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
	</li>
	</ul>
	<div class="tab-content" id="myTabContent">
	<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
		<h2>First title</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis
		nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?</p>
	</div>
	<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
		<h2>Second title</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis
		nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?</p>
	</div>
	<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
		<h2>Third title</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis
		nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?</p>
	</div>
	</div>
	
	

Disabled Item

First title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?

Second title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?

Third title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?

View code example
	
	<ul class="nav nav-tabs" id="exampleTabs" role="tablist">
	<li class="nav-item">
		<a class="nav-link active" id="exampleHome" data-toggle="tab" href="#linkHome" role="tab" aria-controls="linkHome" aria-selected="true">Home</a>
	</li>
	<li class="nav-item">
		<a class="nav-link" id="exampleProfile" data-toggle="tab" href="#linkProfile" role="tab" aria-controls="linkProfile" aria-selected="false">Profile</a>
	</li>
	<li class="nav-item">
		<a class="nav-link disabled" id="exampleDisabled" data-toggle="tab" role="tab" aria-selected="false">Disabled</a>
	</li>
	<li class="nav-item">
		<a class="nav-link" id="exampleContact" data-toggle="tab" href="#linkContact" role="tab" aria-controls="linkContact" aria-selected="false">Contact</a>
	</li>
	</ul>
	<div class="tab-content" id="exampleTabsContent">
	<div class="tab-pane fade show active" id="linkHome" role="tabpanel" aria-labelledby="exampleHome">
		<h2>First title</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis
		nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?</p>
	</div>
	<div class="tab-pane fade" id="linkProfile" role="tabpanel" aria-labelledby="exampleProfile">
		<h2>Second title</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis
		nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?</p>
	</div>
	<div class="tab-pane fade" id="linkContact" role="tabpanel" aria-labelledby="exampleContact">
		<h2>Third title</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis
		nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?</p>
	  </div>
	</div>
	
	

Fill

First title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?

Second title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?

Third title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?

View code example
	
	<ul class="nav nav-tabs nav-fill" id="exampleTabsFill" role="tablist">
	<li class="nav-item">
		<a class="nav-link active" id="exampleHomeFill" data-toggle="tab" href="#linkHomeFill" role="tab" aria-controls="linkHomeFill"
		aria-selected="true">Home</a>
	</li>
	<li class="nav-item">
		<a class="nav-link" id="exampleProfileFill" data-toggle="tab" href="#linkProfileFill" role="tab" aria-controls="linkProfileFill"
		aria-selected="false">Profile</a>
	</li>
	<li class="nav-item">
		<a class="nav-link" id="exampleContactFill" data-toggle="tab" href="#linkContactFill" role="tab" aria-controls="linkContactFill"
		aria-selected="false">Contact</a>
	</li>
	</ul>
	<div class="tab-content" id="exampleTabsContentFill">
	<div class="tab-pane fade show active" id="linkHomeFill" role="tabpanel" aria-labelledby="exampleHomeFill">
		<h2>First title</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis
		nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?</p>
	</div>
	<div class="tab-pane fade" id="linkProfileFill" role="tabpanel" aria-labelledby="exampleProfileFill">
		<h2>Second title</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis
		nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?</p>
	</div>
	<div class="tab-pane fade" id="linkContactFill" role="tabpanel" aria-labelledby="exampleContactFill">
		<h2>Third title</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis
		nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?</p>
		</div>
	</div>
	
	

Justify

First title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?

Second title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?

Third title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?

Fourth title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?

View code example
	
	<ul class="nav nav-tabs nav-justified" id="exampleTabsJustify" role="tablist">
	<li class="nav-item">
		<a class="nav-link active" id="exampleHomeJustify" data-toggle="tab" href="#linkHomeJustify" role="tab" aria-controls="linkHomeJustify"
		aria-selected="true">Home</a>
	</li>
	<li class="nav-item">
		<a class="nav-link" id="exampleProfileJustify" data-toggle="tab" href="#linkProfileJustify" role="tab" aria-controls="linkProfileJustify"
		aria-selected="false">Profile</a>
	</li>
	<li class="nav-item">
		<a class="nav-link" id="exampleTestimonialsJustify" data-toggle="tab" href="#linkTestimonialsJustify" role="tab" aria-controls="linkTestimonialsJustify"
		aria-selected="false">Testimonials</a>
	</li>
	<li class="nav-item">
		<a class="nav-link" id="exampleContactJustify" data-toggle="tab" href="#linkContactJustify" role="tab" aria-controls="linkContactJustify"
		aria-selected="false">Contact</a>
	</li>
	</ul>
	<div class="tab-content" id="exampleTabsContentJustify">
	<div class="tab-pane fade show active" id="linkHomeJustify" role="tabpanel" aria-labelledby="exampleHomeJustify">
		<h2>First title</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis
		nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?</p>
	</div>
	<div class="tab-pane fade" id="linkProfileJustify" role="tabpanel" aria-labelledby="exampleProfileJustify">
		<h2>Second title</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis
		nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?</p>
	</div>
	<div class="tab-pane fade" id="linkTestimonialsJustify" role="tabpanel" aria-labelledby="exampleTestimonialsJustify">
		<h2>Third title</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis
		nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?</p>
	</div>
	<div class="tab-pane fade" id="linkContactJustify" role="tabpanel" aria-labelledby="exampleContactJustify">
		<h2>Fourth title</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid eos eum at repudiandae eius reiciendis
		nobis provident ab incidunt dolorem quae assumenda quasi modi quisquam iusto, amet fugit dolores?</p>
		</div>
	</div>
	
	

Tooltips

View code example
	
    <button type="button" class="btn btn-primary m-2" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
        Tooltip on top
    </button>
    <button type="button" class="btn btn-primary m-2" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
        Tooltip on right
    </button>
    <button type="button" class="btn btn-primary m-2" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
        Tooltip on bottom
    </button>
    <button type="button" class="btn btn-primary m-2" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
        Tooltip on left
    </button>
    
	
		// tooltips Initialization
		$(function () {
			$('[data-toggle="tooltip"]').tooltip()
		})
	
	

Typography

Display

Display 1

Display 2

Display 3

Display 4

View code example
	
	<h1 class="display-1">Display 1</h1>
	<h1 class="display-2">Display 2</h1>
	<h1 class="display-3">Display 3</h1>
	<h1 class="display-4">Display 4</h1>
	
	

Headings

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading

p. Bootstrap heading

View code example
	
	<h1>h1. Bootstrap heading</h1>
	<h2>h2. Bootstrap heading</h2>
	<h3>h3. Bootstrap heading</h3>
	<h4>h4. Bootstrap heading</h4>
	<h5>h5. Bootstrap heading</h5>
	<h6>h6. Bootstrap heading</h6>
	<p>p. Bootstrap heading</p>	
	
	

Sub-Headings

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

p. Bootstrap heading

View code example
	
	<p class="h1">h1. Bootstrap heading</p>
	<p class="h2">h2. Bootstrap heading</p>
	<p class="h3">h3. Bootstrap heading</p>
	<p class="h4">h4. Bootstrap heading</p>
	<p class="h5">h5. Bootstrap heading</p>
	<p class="h6">h6. Bootstrap heading</p>
	<p class="p">p. Bootstrap heading</p>
	
	

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
View code example
	
	<blockquote class="blockquote">
	 <p class="mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
	  <footer class="blockquote-footer">Someone famous in
	   <cite title="Source Title">Source Title</cite>
	  </footer>
	</blockquote>

	<blockquote class="blockquote text-center">
	 <p class="mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
	  <footer class="blockquote-footer">Someone famous in
	   <cite title="Source Title">Source Title</cite>
	  </footer>
	</blockquote>

	<blockquote class="blockquote text-right">
	 <p class="mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
	  <footer class="blockquote-footer">Someone famous in
	   <cite title="Source Title">Source Title</cite>
	  </footer>
	</blockquote>
	
	

Text alignment

Left aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

Right aligned text on all viewport sizes.

Left aligned text on viewports sized SM (small) or wider.

Left aligned text on viewports sized MD (medium) or wider.

Left aligned text on viewports sized LG (large) or wider.

Left aligned text on viewports sized XL (extra-large) or wider.

View code example
	
	<p class="text-left">Left aligned text on all viewport sizes.</p>
	<p class="text-center">Center aligned text on all viewport sizes.</p>
	<p class="text-right">Right aligned text on all viewport sizes.</p>

	<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
	<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
	<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
	<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
	
	

Text utilities

This text should overflow the parent.

Praeterea iter est quasdam res quas ex communi.
Praeterea iter est quasdam res quas ex communi.

This is in monospace

LoweRCased text.

Uppercased text.

capitalized text.

Bold text

Normal weight text

Light weight text

i tag can be used for Italicized text

u tag can be used for Underlined text

s tag can be used for Deleted text

View code example
	
	<div class="text-nowrap bd-highlight" style="width: 8rem;">
		This text should overflow the parent.
	</div>
	<!-- Block level -->
	<div class="row">
	  <div class="col-2 text-truncate">
		Praeterea iter est quasdam res quas ex communi.
	  </div>
	</div>
	<!-- Inline level -->
	<span class="d-inline-block text-truncate" style="max-width: 150px;">
		Praeterea iter est quasdam res quas ex communi.
	</span>
	<p class="text-monospace">This is in monospace</p>
	<p class="text-lowercase">LoweRCased text.</p>
	<p class="text-uppercase">Uppercased text.</p>
	<p class="text-capitalize">capitalized text.</p>
	<p><strong>Bold text</strong></p>
	<p>Normal weight text</p>
	<p class="font-weight-light">Light weight text</p>
	<p>i tag can be used for <i>Italicized</i> text</p>
	<p>u tag can be used for <u>Underlined</u> text</p>
	<p>s tag can be used for <s>Deleted</s> text</p>