Bootstrap 4 Enhanced


Bootstrap Enhanced takes the basic components of Bootstrap and customizes them to give a template a custom look over the standard framework. Included on this page are numerous examples for customizing buttons, cards, carousels, dividers, images, modals, typography and more. The code changes are in master-style.css in assets/css.

Notice that the typography classes have changed. We found Bootstrap 4 font sizes to be too large and felt the font lacked pizzazz. We reduced the font sizes and used Google Font's Roboto. See the typography section on this page. We also reduced the starkness of the font color using #3f3f3f and changed the page background to #fbfbfb to be easier on the eyes.

You'll find more ideas to spice up a website on the LinGeo Templates.


Theme Color Coordinated Alerts

Add the class .alert alert-theme-dark or .alert alert-theme-light to tags.

Theme Color Coordinated Badges

Styles

Add the class .badge badge-theme-dark or badge badge-theme-light to tags.

.badge-theme dark .badge-theme light

Pill Style

Add the class .badge-pill to tags to make them display like a "pill".

.badge-theme dark .badge-theme light

Theme Color Coordinated Buttons

Solid

Use the class btn btn-default-drk or btn btn-default-lgt

Theme Light

Outline

Use the class btn btn btn-default-outline to tags to make them display like a "pill".

Theme Color Coordinated Button Sizes & Shapes

The large, medium and small sizes are standard. LinGeo adds a border along with extra large and extra small sizes.

Large Sizes

Use the class "btn btn-default-lgt btn-xlg or btn btn-default-drk btn-xlg



Rounded Sizes

Use the class "btn btn-default-drk btn-round-xlg or btn btn-default-lgt btn-round-xlg

Extra Small

Use the class btn btn-default-drk btn-xs or btn btn-default-lgt btn-xs



Extra Small Rounded

Use the class btn btn-default-drk btn-round-xs or btn btn-default-lgt btn-round-xs

Cards

Product Card

photo
WORKSPACE HEALTH COMFORT

About Shoes & More

by @SomeOne

09/01/2018 in Arkansas

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas.

Order Now

Product Card 2

photo

Rating 4 1/2

Available in five different colors

Personal Card

Card image

Ann White

V.P. Marketing

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas.

  • Dallas, TX
  • 123 456 789
  • example@example.com
View Code Examples
	
              <h2 class="sh2 mb-4">Product Card</h2>
              <div class="card">
                <div class="view">
                  <img src="assets/img/ecomm-images/img-01-sml.jpg" class="card-img-top" alt="photo">
                </div>
                <div class="card-body">
                  <span class="badge badge-primary p-2 my-1">WORKSPACE</span>
                  <span class="badge badge-warning p-2 my-1 text-white">HEALTH</span>
                  <span class="badge badge-danger p-2 my-1">COMFORT</span>
                  <h4>About Shoes &amp; More</h4>
                  <p class="card-subtitle">by @SomeOne</p>
                  <p class="mt-1">
                    <small>09/01/2018 in
                      <a href="#">Arkansas</a>
                    </small>
                  </p>
                  <p class="card-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
                    rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
                    explicabo. Nemo enim ipsam voluptatem quia voluptas.</p>
                  <a href="#" class="text-primary">Order Now
                    <i class="mi mi-ChevronRight"></i>
                  </a>
                </div>
                <div class="card-footer bg-transparent d-flex justify-content-around">
                  <span class="text-muted">
                    <i class="mi mi-Comment"></i>121</span>
                  <span class="text-muted">
                    <i class="mi mi-facebook"></i>66</span>
                  <span class="text-muted">
                    <i class="mi mi-twitter"></i>19</span>
                </div>
              </div>
            </div>

            <div class="col-lg-4 col-md-6 mb-4">
              <h2 class="sh2 mb-4">Product Card 2</h2>
              <div class="card">
                <div class="view">
                  <img src="assets/img/ecomm-images/img-02-sml.jpg" class="card-img-top" alt="photo">
                </div>
                <div class="card-body">
                  <h4>Rating 4 1/2</h4>
                  <i class="mi mi-FavoriteLegacy text-danger"></i>
                  <i class="mi mi-FavoriteLegacy text-danger"></i>
                  <i class="mi mi-FavoriteLegacy text-danger"></i>
                  <i class="mi mi-FavoriteLegacy text-danger"></i>
                  <i class="mi mi-HalfStarLeft text-danger"></i>
                  <p class="card-text">
                    Available in five different colors </br>
                    <span style="width:10px;height:10px" class="d-inline-block rounded-circle bg-primary"></span>
                    <span style="width:10px;height:10px" class="d-inline-block rounded-circle bg-secondary"></span>
                    <span style="width:10px;height:10px" class="d-inline-block rounded-circle bg-dark"></span>
                    <span style="width:10px;height:10px" class="d-inline-block rounded-circle bg-danger"></span>
                    <span style="width:10px;height:10px" class="d-inline-block rounded-circle bg-success"></span>
			   </p>
                  <div class="text-right">
                    <button class="btn btn-block btn-primary">
                      Buy now
                      <i class="mi mi-ChevronRight"></i>
                    </button>
                  </div>
                </div>
                <div class="card-footer bg-transparent d-flex justify-content-between">
                  <span>Now
                    <strong class="font-weight-bold">75% off</strong>
                  </span>
                  <div>
                    <del class="text-muted mr-2">$300</del>
                    <strong class="text-primary font-weight-bold">$75</strong>
                </div>
              </div>
            </div>
		</div>

            <div class="col-lg-4 col-md-6 mb-4">
              <h2 class="sh2 mb-4">Personal Card</h2>
              <div class="card shadow">
                <div class="view">
                    <img class="card-img-top" src="assets/img/site-images/user-04.jpg" alt="Card image">
                  </div>
                <div class="card-body elegant-color">
                  <p class="card-subtitle"><strong>Ann White</strong></p>
                  <p class="mt-1">
                    <p>V.P. Marketing</p>
                  </p>
                  <p class="card-text mt-2 mb-3">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
                    rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
                    explicabo. Nemo enim ipsam voluptatem quia voluptas.</p>
                  <ul class="clear">
                    <li class="d-flex justify-content-between">
                      <i class="mi mi-MapPin2"></i>
                      <span>Dallas, TX</span>
                    </li>
                    <li class="d-flex justify-content-between">
                      <i class="mi mi-Phone"></i>
                      <span>123 456 789</span>
                    </li>
                    <li class="d-flex justify-content-between">
                      <i class="mi mi-Mail"></i>
                      <span>example@exmaple.com</span>
                    </li>
                  </ul>
                </div>
                <div class="card-footer bg-transparent d-flex justify-content-between">
                  <a href="#">
                    <i class="mi mi-instagram" style="color:#BF0077;"></i>
                  </a>
                  <a href="#">
                    <i class="mi mi-dribbble" style="color:#E3008C;"></i>
                  </a>
                  <a href="#">
                    <i class="mi mi-vimeo" style="color:#0078D7;"></i>
                  </a>
                  <a href="#">
                    <i class="mi mi-reddit-alien" style="color:#EF6950;"></i>
                  </a>
                </div>
              </div>
          </div>
	</div></div></div>
	
			

Collapse Cards

Ideal for concealing data until the user clicks on the button.

Card image

Charles Jones

CEO

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas.

View code example
	
				<div class="card card-body bg-white animated sk2">
					<div class=" text-info text-center mb-3 mt-3">
				</div>
					<img class="card-img-top" src="assets/img/site-images/user-01.jpg" alt="Card image">
                  </div>
		<div class="card-body elegant-color">
			<h3 class="card-subtitle"><strong>Charles Jones</strong></h3>
                    <h3>CEO</h3>
			<h3 class="card-text mt-2 mb-3">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
                    rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
                    explicabo. Nemo enim ipsam voluptatem quia voluptas.</h3>
	<a class="btn btn-block btn-success mb-3 collapsed" data-toggle="collapse" href="#collapseCard1" role="button" aria-expanded="false" aria-controls="collapseCard1">Contact Charles Jones <i class="fa fa-chevron-down fa-lg" aria-hidden="true"></i></a>

	<div class="collapse" id="collapseCard1" style="">
		<div class="card card-body bg-white text-dark text-left">
			<div class="row">
				<div class="col-md-12">
					<ul class="clear">
						<li class="d-flex justify-content-between">
						<i class="mi mi-MapPin2"></i>
						<span>Dallas, TX</span></li>
						<li class="d-flex justify-content-between">
						<i class="mi mi-Phone"></i>
						<span>123 456 789</span></li>
						<li class="d-flex justify-content-between">
						<i class="mi mi-Mail"></i>
						<span>example@example.com</span></li>
					</ul>
				</div>
	<div class="card-footer bg-transparent d-flex">
		<a style="padding-right: 2em; href="#">
			<i class="mi mi-instagram" style="color:#BF0077;"></i>
		</a>
		<a style="padding-right: 2em; href="#">
			<i class="mi mi-dribbble" style="color:#E3008C;"></i>
		</a>
		<a style="padding-right: 2em; href="#">
			<i class="mi mi-vimeo" style="color:#0078D7;"></i>
		</a>
		<a href="#">
			<i class="mi mi-reddit-alien" style="color:#EF6950;"></i>
		</a>
			</div>
		</div>
	</div>
	
	
  • Dallas, TX
  • 123 456 789
  • example@example.com
Card image
WORKSPACE HEALTH COMFORT View code example
	
	<div class="col-sm-6 mt-3">
		<div class="card card-body bg-white animated sk2">
			<div class=" text-info text-center mb-3 mt-3">
		</div>
			<img class="card-img-top" src="assets/img/ecomm-images/img-03-sml.jpg" alt="Card image">
		</div>
			<div class="card-body elegant-color">
                  <span class="badge badge-primary p-2 my-1">WORKSPACE</span>
                  <span class="badge badge-warning p-2 my-1 text-white">HEALTH</span>
                  <span class="badge badge-danger p-2 my-1">COMFORT</span>
		<a class="btn btn-block btn-primary mt-3 mb-3 collapsed" data-toggle="collapse" href="#collapseCard2" role="button" aria-expanded="false" aria-controls="collapseCard2">Buy Now <i class="fa fa-chevron-down fa-sm" aria-hidden="true"></i></a>

	<div class="collapse" id="collapseCard2" style="">
		<div class="card card-body bg-white text-dark text-left">
			<div class="row">
				<div class="col-md-12">
				<h4>Rating 4 1/2</h4>
					<i class="mi mi-FavoriteLegacy text-danger"></i>
					<i class="mi mi-FavoriteLegacy text-danger"></i>
					<i class="mi mi-FavoriteLegacy text-danger"></i>
					<i class="mi mi-FavoriteLegacy text-danger"></i>
					<i class="mi mi-HalfStarLeft text-danger"></i>
				<p class="card-text">
					Available in five different colors </br>
					<span style="width:10px;height:10px" class="d-inline-block rounded-circle bg-primary"></span>
					<span style="width:10px;height:10px" class="d-inline-block rounded-circle bg-secondary"></span>
					<span style="width:10px;height:10px" class="d-inline-block rounded-circle bg-dark"></span>
					<span style="width:10px;height:10px" class="d-inline-block rounded-circle bg-danger"></span>
					<span style="width:10px;height:10px" class="d-inline-block rounded-circle bg-success"></span>
				</p>
			<div class="text-right">
				<button class="btn btn-block btn-primary">
                      Buy now
                      <i class="mi mi-ChevronRight"></i>
				</button>
			</div>
		</div>
	<div class="card-footer bg-transparent d-flex justify-content-between">
		<span>Now
			<strong class="font-weight-bold">75% off</strong>
		</span>
	<div>
		<del class="text-muted mr-2">$300</del>
			<strong class="text-primary font-weight-bold">$75</strong>
	</div>
					</div>
				</div>
			</div>
	
	

Rating 4 1/2

Available in five different colors

Card Carousel

Note the various text and image configurations and card heights.
We have placed the Card Carousel and a Full-Width Carousel on the same page here. This causes erratic behavior with the way the Full-Width Carousel moves from slide to slide. Until this issue can be resolved we advise not using the Card Carousel with another carousel on the same page.

Flip Card Horizontal & Vertical

Ideal for showing two views of an image or details of an image or statement.

Horizontal Flip Card

On Click

Niki Running Shoes on SALE

Niki Running Shoes

Rating 4 1/2

Available in five different colors

Use .yflipcard

Vertical Flip Card

On Hover
This is Header #1

Card Title

This is a card component with header and footer. This is a card component with header and footer. This is a card component with header and footer. This is a card component with header and footer. This is a card component with header and footer. This is a card component with header and footer. This is a card component with header and footer. This is a card component with header and footer. This is a card component with header and footer. This is a card component with header and footer. This is a card component with header and footer. This is a card component with header and footer. This is a card component with header and footer.

Info Button
Use .xflipcard

Borderless Card

photo

Serenity

by @SomeOne

View code example
	
	<div class="card border-0">
		<div class="view">
		<img src="assets/img/site-images/img-06.jpg" class="card-img-top" alt="photo">
		</div>
	<div class="card-body">
		<h2 class="sh2 mb-4">Serenity</h2>
		<p class="card-subtitle">by @SomeOne</p>
		<p class="mt-1">
	</div>
	<div class="card-footer bg-transparent d-flex justify-content-around">
		<span class="text-muted">
			<h4>Rating 3 1/2</h4>
                  <i class="mi mi-FavoriteLegacy text-danger"></i>
                  <i class="mi mi-FavoriteLegacy text-danger"></i>
                  <i class="mi mi-FavoriteLegacy text-danger"></i>
                  <i class="mi mi-HalfStarLeft text-danger"></i>
			</div>
	</div>	
	
	

Card with Enlarge Image

View code example
	
	<div class="card">
		<a href="assets/img/site-images/img-07.jpg" data-lightbox="single-07"
			data-title="Ocean Cliffs">
			<img src="assets/img/site-images/img-07.jpg" class="img-fluid" />
		</a>
	<div class="card-footer">
		Ocean Cliffs
	</div>
	
	

Bootstrap Carousel Full-Width

For the Full Width Carousel to function correctly it needs to be the only carousel on the page.
It also needs to have special css specific to the page so as not to interfer with other Bootstrap carousels on a site.


We have placed the Card Carousel and a Full-Width Carousel on the same page here. This causes erratic behavior with the way the Full-Width Carousel moves from slide to slide. Until this issue can be resolved we advise not using the Card Carousel with another carousel on the same page.
View code example
	
	
	
		// full width CSS
		.carousel-item img {
		max-height: 100vh; 
		object-fit: cover;
		}
	
	
<div id="carouselExampleIndicators" 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-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="assets/img/site-images/img-01.jpg" alt="First slide"> <div class="carousel-caption d-none d-md-block"> <h4><strong>Title</strong></h4> <h6>Text goes here</h6> </div> </div> <div class="carousel-item"> <img class="d-block w-100" src="assets/img/site-images/img-02.jpg" alt="Second slide"> <div class="carousel-caption d-none d-md-block"> <h4><strong>Title</strong></h4> <h6>Text goes here</h6> </div> </div> <div class="carousel-item"> <img class="d-block w-100" src="assets/img/site-images/img-03.jpg" alt="Third slide"> <div class="carousel-caption d-none d-md-block"> <h4><strong>Title</strong></h4> <h6>Text goes here</h6> </div> </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>

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>
	
	

Full Width Jumbotron

Fluid Jumbotron

The jumbotron occupies the entire horizontal width of screen.

Use class="jumbotron-lingeo"> Image link is specified in the stylesheet.

Modals

Modals come in handy when needing to conserve space on a page Here are 5 variations.

Open Modal from an Image w/2 Columns

Open Modal w/Full-Width Image

View code examples
	
<!-- First Modal -->
<a data-toggle="modal" href="#myFirstModal" >
    <img src="assets/img/site-images/img-03.jpg" class="img-fluid" alt="" title="" />
</a>

<!-- Modal -->
<div class="modal fade" id="myFirstModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="margin-top: 100px; margin-bottom:50px;"> 
    <div class="modal-content-detail">
      <div class="modal-header-detail">
        <button type="button" class="modal-close" data-dismiss="modal">Close</button>
        <h4 class="modal-title" id="myModalLabel">Modal off Image</h4>
      </div>
      <div class="modal-body-detail">
		<h2 class="header-title"><strong>Modal off Image</strong></h2>
	<div class="container-fluid">
                     <div class="row">
                      <div class="col-xs-12">
                      <hr>
				<div class="modal-body">
                      <div class="row">
                        <div class="col-sm-4">
                            <img src="assets/img/site-images/img-03.jpg" class="img-fluid" />
                        </div>
                        <div class="col-md-8"> <!-- col 8 is max -->
                            <h4><strong>Text Body</strong></h4>
                            <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</br>
					   </br>
					   Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis.</br>
					   </br>
					   Sed non leo nisl, ac euismod nisi.</br>
					   </br>
					   Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis.</br>
					   </br>
					   Sed non leo nisl, ac euismod nisi.
					   </br>
					   Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis.</br>
					   </br>
					   Sed non leo nisl, ac euismod nisi.</br>
					   </br>
					   </br>
					   Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis.</br>
					   </br>
					   Sed non leo nisl, ac euismod nisi.</br>
					   </br>
					   </br>
					   Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis.</br>
					   </br>
					   Sed non leo nisl, ac euismod nisi.</br>
					   </br>
					    </h4>
                        </div>
				</div>
			</div>
		</div>
	</div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-blue btn-sm" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
	</div></div>

<!-- Second Modal -->
	<div class="col-sm-6">
					<h4><strong>Open Modal w/Full-Width Image</strong></h4>
					<span class="line"></span>
		<div class="mixed column-text">
          </div>
<!-- Second Modal -->
<a data-toggle="modal" href="#mySecondModal" >
<button type="button" class="btn btn-default-drk btn-sm">With Full-width Image</button></a>
			
<!-- Modal -->
<div class="modal fade" id="mySecondModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="margin-top: 100px; margin-bottom:50px;"> 
    <div class="modal-content-detail">
      <div class="modal-header-detail">
        <button type="button" class="modal-close" data-dismiss="modal">Close</button>
        <h4 class="modal-title" id="myModalLabel">Modal off Button with Full-width Image</h4>
      </div>
      <div class="modal-body-detail">
		<h2 class="header-title"><strong>Modal off Button with Full-width Image</strong></h2>
	<div class="container-fluid">
                     <div class="row">
                      <div class="col-xs-12">
                      <hr>
                            <img src="assets/img/site-images/img-04.jpg" class="img-fluid" />
                        </div>
                            <h4><strong>Title</strong></h4>
                            <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis. Sed non leo nisl, ac euismod nisi.
					    </br></br>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis. Sed non leo nisl, ac euismod nisi.
					    </br></br>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis. Sed non leo nisl, ac euismod nisi.
					    </br></br>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis. Sed non leo nisl, ac euismod nisi.
					    </br></br>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis. Sed non leo nisl, ac euismod nisi.
					    </br></br>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis. Sed non leo nisl, ac euismod nisi.
					    </br></br>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis. Sed non leo nisl, ac euismod nisi.
					    </h4>
                        </div>
				</div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-blue btn-sm" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
	</div></div>
	
	

Modal with Text Only

Modal with Text Wrap

View code examples
	
<!-- Third Modal -->
		<div class="container mt-5">
		<div class="row">
	<div class="col-sm-6">
					<h4><strong>Modal with Text Only</strong></h4>
					<span class="line"></span>
<!-- Button trigger modal -->
<a data-toggle="modal" href="#ThirdModal" >
<button type="button" class="btn btn-default-drk btn-sm">Text Only</button></a>
			
<!-- Modal -->
<div class="modal fade" id="ThirdModal" tabindex="-1" role="dialog" aria-labelledby="ThirdModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="margin-top: 100px; margin-bottom:50px;"> 
    <div class="modal-content-detail">
      <div class="modal-header-detail">
        <button type="button" class="modal-close" data-dismiss="modal">Close</button>
        <h4 class="modal-title" id="ThirdModalLabel">Modal with Text Only</h4>
      </div>
      <div class="modal-body-detail">
		<h2 class="header-title"><strong>Modal with Text Only</strong></h2>
	<div class="container-fluid">
                     <div class="row">
                      <div class="col-xs-12">
                      <hr>
        	<h3>Website ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
        <br /><br />
        	Website ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
        <br /><br />
        	Website ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
		</h3>
                        </div>
				</div>
			</div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-blue btn-sm" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

<!-- Fourth Modal -->
	<div class="col-sm-6">
					<h4><strong>Modal with Text Wrap</strong></h4>
					<span class="line"></span>
<!-- Button trigger modal -->
<a data-toggle="modal" href="#FourthModal" >
<button type="button" class="btn btn-default-drk btn-sm">Text Wrap</button></a>
			
<!-- Modal -->
<div class="modal fade" id="FourthModal" tabindex="-1" role="dialog" aria-labelledby="FourthModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="margin-top: 100px; margin-bottom:50px;"> 
    <div class="modal-content-detail">
      <div class="modal-header-detail">
        <button type="button" class="modal-close" data-dismiss="modal">Close</button>
        <h4 class="modal-title" id="FourthModalLabel">Modal with Text Wrap</h4>
      </div>
      <div class="modal-body-detail">
		<h2 class="header-title"><strong>Modal with Text Wrap</strong></h2>
	<div class="container-fluid">
                     <div class="row">
                      <div class="col-xs-12">
                      <hr>
		<div class="col-md-12">
  <img src="assets/img/site-images/img-xs-01.jpg" alt="..." class="pull-left wrap mr-2" class="img-fluid">
    <div class="article-boxed short-image text-to-the-right">
        	<h3>Website ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
        <br />
        	Website ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
		</h3>
                        </div>
				</div>
			</div>
		</div>
	</div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-blue btn-sm" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
	
	

Modal for Team Member

Charles Jones, CEO

Login Modal w/Forgot Password Modal

View code examples
	
<!-- Fifth Modal -->
	<div class="container mt-3">
		<div class="row">
			<div class="col-sm-6">
				<h4><strong>Modal for Team Member</strong></h4>
		<div class="mixed column-text">

<!-- First Modal -->
<!-- Button trigger modal -->
<a data-toggle="modal" href="#myFifthModal" >
    <img src="assets/img/site-images/user-01.jpg" class="rounded-circle" alt="" title="" />
</a>	</center>
			
<!-- Modal -->
<div class="modal fade" id="myFifthModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="margin-top: 100px; margin-bottom:50px;"> 
    <div class="modal-content-detail">
      <div class="modal-header-detail">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Our Team</h4>
      </div>
      <div class="modal-body-detail">
		<h2 class="header-title"><strong>Charles Jones, CEO</strong></h2>
	<div class="container-fluid">
                     <div class="row">
                      <div class="col-xs-12">
                      <hr>
                        <div class="col-xs-3 pull-left">
                            <img src="assets/img/site-images/user-01.jpg" class="img-fluid" />
                        </div>
                        <div class="col-xs-6 float-right">
                            <h4><strong>Charles Jones, CEO</strong></h4>
                            <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis. Sed non leo nisl, ac euismod nisi.</h4>
                        </div>
				</div>
			</div>
		</div>
			<hr>
				<div class="row">
			<div class="col-sm-6">
	    <div class='wrapper text-center'>
			<div class="btn-block inline pull-right">
				<a class="btn btn-default-drk btn-xs" href="###"><i class="fa fa-cog"></i> Learn More About Me</a>
				<a class="btn btn-default-drk btn-xs" href="###"><i class="fab fa-facebook"></i> Follow Me</a>
					</div>
				</div>
			</div>
		</div>
			<hr>
                  <div class="modal-footer-detail">
                    <button type="button" class="btn btn-default-alt btn-xs" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
	<div class="container">
		<div class="mixed column-text">
		<h5><strong>Charles Jones, CEO</strong></h5>
	</div>
				</div>
			</div>
		</div>

<!-- Sixth Modal -->
	<div class="col-sm-6">
		<h4><strong>Login Modal w/Forgot Password Modal</strong></h4>
			<span class="line"></span>
		<div class="mixed column-text">
	</div>
      <div class="container">
      <!-- Trigger the modal with a button -->
      <button type="button" class="btn btn-default-drk btn-lg" data-toggle="modal" data-target="#ModalLogin">Open Modal</button>
      <!---- Forgot Password Popup --->
      <div class="modal fade" id="ModalForgotPassword" role="dialog">
         <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
               <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h4 class="modal-title">Forgot Password</h4>
               </div>
               <div class="modal-body">
                  <form>
                     <div class="form-group">
                        <label for="exampleInputEmail1">Email address</label>
                        <input type="email" class="form-control" id="exampleInputEmai1" aria-describedby="emailHelp" placeholder="Enter email">                        
                     </div>
                     <button type="submit" class="btn btn-primary">Submit</button>
                  </form>
               </div>
            </div>
         </div>
      </div>
      <!---- Forgot Password Popup --->
      <!---- Login Popup --->
      <div class="modal fade" id="ModalLogin" role="dialog">
      <div class="modal-dialog">
         <!-- Modal content-->
         <div class="modal-content">
            <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal">&times;</button>
               <h4 class="modal-title">Login</h4>
            </div>
            <div class="modal-body">
               <form id="loginForm">
                  <div class="form-group">
                     <label for="exampleInputEmail1">Email address</label>
                     <input type="email" class="form-control" id="email" name="email" aria-describedby="emailHelp" placeholder="Enter email">
                  </div>
                  <div class="form-group">
                     <label for="exampleInputPassword1">Password</label>
                     <input type="password" class="form-control" id="password" name="password" placeholder="Password">
                  </div>
                  <div class="form-check">
                     <a href="#" data-dismiss="modal" data-toggle="modal" id="forgotPassword" data-target="#ModalForgotPassword" class="form-check-label">Forgot Password?</a>
                     <br><br>
                  </div>
                  <button type="button" (click)="login()" class="btn btn-success">Login</button> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
               </form>
            </div>
         </div>
      </div>
	</div></div></div></div>
      <!---- Login Popup --->	
	

Pagination

Default Size

Align Left with "active" state on page 3
Pagination aligned to the Left Side of page is the default.

Align Right
Add pagination-right to align the navaigation to right side.

View Pagination code
		
	<div class="pagination">
		<nav>
			<ul class="pagination">
		<li class="page-item">
		<a href="#" class="page-link" aria-label="Previous">
		<span aria-hidden="true">&laquo;</span>
		</a>
		</li>
		<li class="page-item"><a href="#" class="page-link">1</a></li>
		<li class="page-item"><a href="#" class="page-link">2</a></li>
		<li class="page-item active"><a href="#" class="page-link">3</a></li>
		<li class="page-item"><a href="#" class="page-link">4</a></li>
		<li class="page-item"><a href="#" class="page-link">5</a></li>
		<li class="page-item">
		<a href="#" class="page-link" aria-label="Next">
		<span aria-hidden="true">&raquo;</span>
		</a>
		</li>
			</ul>
		</nav>
		</div>
		
		

Align Center
Add pagination-centered to align the navaigation to right side.

Large
Add pagination-lg to the ul class for large pagination.

Small
Add pagination-sm to the ul class for smaller pagination.

Prepend / Append

Prepend Text

$

Append Text

.00

Prepend Botton

Append Button

Prepend & Append Text

$ .00

Prepend & Append Button

View code example
	
<!-- START Prepend and Append Items Row 1 -->
    <div class="container">
				<div class="row">
				<div class="col-sm-6">
					<h4>Prepend Text</h4>
      <div class="input-prepend">
        <span class="add-on">$</span>
          <input id="prependedInput" type="text" placeholder="Amount">
      </div>
				</div>
				<div class="col-sm-6">
					<h4>Append Text</h4>
      <div class="input-append">
        <input id="appendedInput" type="text" placeholder="Amount">
        <span class="add-on">.00</span>
      </div>
				</div>
			</div>
	</div>

<!-- START Prepend and Append Items Row 2 -->
    <div class="container">
				<div class="row">
				<div class="col-sm-6">
					<h4>Prepend Botton</h4>
          <div class="input-group">
              <span class="input-group-btn">
                  <button type="submit" class="btn btn-default-drk">Search</button>
              </span>
              <input type="text" class="form-control " placeholder="Text input">
      </div>
				</div>
				<div class="col-sm-6">
					<h4>Append Button</h4>
          <div class="input-group">
              <input type="text" class="form-control " placeholder="Text input">
              <span class="input-group-btn">
                  <button type="submit" class="btn btn-default-lgt">Search</button>
              </span>
      </div>
				</div>
			</div>
	</div>

<!-- START Prepend and Append Items Row 3 -->
    <div class="container">
				<div class="row">
				<div class="col-md-6">
					<h4>Prepend &amp; Append Text</h4>
      <div class="input-prepend input-append">
        <span class="add-on">$</span>
        <input id="appendedPrependedInput" type="text" placeholder="Amount">
        <span class="add-on">.00</span>
      </div>
				</div>
				<div class="col-sm-6">
					<h4>Prepend &amp; Append Button</h4>
          <div class="input-group">
              <span class="input-group-btn">
                  <button type="submit" class="btn btn-default-lgt">Options</button>
              </span>
              <input type="text" class="form-control " placeholder="Text input">
              <span class="input-group-btn">
                  <button type="submit" class="btn btn-default-drk">Search</button>
              </span>
		  </div>
		</div>
	</div></div>
	
	

Table Heading

Add theme color and an icon to table heading

AR Widget Company

View code example
	
	
	
	<div class="table">
		<h4 class="table-title"><i class="fa fa-list"></i> AR Widget Company</h4>
	</div>
	
	

Tabs

Product Description

Ad fere hos quidem usitas virtus vulpes. Acsi cui nulla nutus olim rusticus. Comis iustum letalis veniam. Aliquam erat ille neo occuro odio sed sino sudo vel.
Jugis lucidus suscipit vel. Imputo loquor odio pneum quibus tum. Aptent commoveo consequat pneum qui quidem. Abico et fere gravis iriure macto mauris qui tincidunt ullamcorper.
Elit os persto. Abico commoveo gravis imputo jugis luptatum voco. Persto sed tamen. Brevitas camur gravis illum jus luptatum occuro scisco verto.

Product Specification

Abluo conventio ille illum metuo sagaciter singularis. Ex facilisi iriure iustum os quae refero sagaciter saluto. Capto comis commodo consequat occuro vulpes.

# Size Color Width
1 7-12 Orange Medium & Wide
2 7-12 Green Medium & Wides
3 7-12 Black Narrow thru Extra Wide

Product Reviews

10 reviews
    • August 20, 2017
    • Steve
    Porta risus porttitor facilisis sit dapibus
    Porta risus porttitor facilisis sit dapibusPorta risus porttitor facilisis sit dapibusPorta risus porttitor facilisis sit dapibusPorta risus porttitor facilisis sit dapibus

    • August 26, 2017
    • Kevin
    Porta risus porttitor facilisis sit dapibus
    Porta risus porttitor facilisis sit dapibusPorta risus porttitor facilisis sit dapibusPorta risus porttitor facilisis sit dapibusPorta risus porttitor facilisis sit dapibus

    • August 30, 2017
    • Robert
    Magna aliquet diam mauris tortor turpis vel porta
    Magna aliquet diam mauris tortor turpis vel portaMagna aliquet diam mauris tortor turpis vel portaMagna aliquet diam mauris tortor turpis vel portaMagna aliquet diam mauris tortor turpis vel porta

    • August 31, 2017
    • Jason
    Porta risus porttitor facilisis sit dapibus
    Porta risus porttitor facilisis sit dapibusPorta risus porttitor facilisis sit dapibusPorta risus porttitor facilisis sit dapibusPorta risus porttitor facilisis sit dapibus


Add Review

View code examples
	
          <!-- Product tabs, @see: elements-navs-tabbable.htm -->
          <div class="card md-5 border-top-0">
            <div class="card-header bg-white pt-0 px-0">
              <ul class="nav nav-tabs nav-justified card-header-tabs flex-column flex-md-row">
                <li class="nav-item"> <a class="nav-link active py-md-4 text-uppercase font-weight-bold" href="#product-description" data-toggle="tab">Details</a> </li>
                <li class="nav-item"> <a class="nav-link py-md-4 text-uppercase font-weight-bold" href="#product-spec" data-toggle="tab">Specification</a> </li>
                <li class="nav-item"> <a class="nav-link py-md-4 text-uppercase font-weight-bold" href="#product-reviews" data-toggle="tab">Reviews (10)</a> </li>
              </ul>
            </div>
            <div class="card-body p-4">
              <div class="tab-content">
                <!-- Tab 1: Description tab content -->
                <div class="tab-pane active show" id="product-description">
                  <h4>
                    Product Description
				</br></br>
                  </h4>
                  <h5 class="card-text">Ad fere hos quidem usitas virtus vulpes. Acsi cui nulla nutus olim rusticus. Comis iustum letalis veniam. Aliquam erat ille neo occuro odio sed sino sudo vel.</h5>
                  <h5 class="card-text">Jugis lucidus suscipit vel. Imputo loquor odio pneum quibus tum. Aptent commoveo consequat pneum qui quidem. Abico et fere gravis iriure macto mauris qui tincidunt ullamcorper.</h5>
                  <h5 class="card-text">Elit os persto. Abico commoveo gravis imputo jugis luptatum voco. Persto sed tamen. Brevitas camur gravis illum jus luptatum occuro scisco verto.</h5>
                </div>
                <!-- Tab 2: Specification tab content -->
                <div class="tab-pane" id="product-spec">
                  <h4>
                    Product Specification
                  </h4>
                  <p class="card-text">Abluo conventio ille illum metuo sagaciter singularis. Ex facilisi iriure iustum os quae refero sagaciter saluto. Capto comis commodo consequat occuro vulpes.</p>
                  <table class="table table-sm table-striped mb-0">
                    <thead>
                      <tr>
                        <th>#</th>
                        <th>Size</th>
                        <th>Color</th>
                        <th>Width</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <th scope="row">1</th>
                        <td>7-12</td>
                        <td>Orange</td>
                        <td>Medium &amp; Wide</td>
                      </tr>
                      <tr>
                        <th scope="row">2</th>
                        <td>7-12</td>
                        <td>Green</td>
                        <td>Medium &amp; Wides</td>
                      </tr>
                      <tr>
                        <th scope="row">3</th>
                        <td>7-12</td>
                        <td>Black</td>
                        <td>Narrow thru Extra Wide</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <!-- Tab 3: Reviews tab content -->
                <div class="tab-pane" id="product-reviews">
                  <h4>
                    Product Reviews
                  </h4>
                  <i class="fa fa-star text-primary icon-1x"></i> <i class="fa fa-star text-primary icon-1x"></i> <i class="fa fa-star text-primary icon-1x"></i> <i class="fa fa-star text-primary icon-1x"></i> <i class="fa fa-star text-primary icon-1x"></i> <span class="my-0 text-xs">10 reviews</span> 
                  <hr/>
                  <ul class="comments md-3 list-unstyled">
                    <li class="media md-3 pos-relative">
                      <a href="#"></a>
                      <div class="media-body">
                        <ul class="list-inline blog-meta text-muted">
                          <li class="list-inline-item"> August 20, 2017</li>
                          <li class="list-inline-item">Steve</li>
                        </ul>
                        <h5 class="md-2">
                          Porta risus porttitor facilisis sit dapibus
                        </h5>
                        <h6>Porta risus porttitor facilisis sit dapibusPorta risus porttitor facilisis sit dapibusPorta risus porttitor facilisis sit dapibusPorta risus porttitor facilisis sit dapibus</p>
                        <h6><i class="fa fa-star text-primary"></i><i class="fa fa-star text-primary"></i><i class="fa fa-star text-primary"></i><i class="fa fa-star text-primary"></i><i class="fa fa-star text-primary"></i></h6>
                      </div>
                    </li>
                    <li class="media md-3 pos-relative">
                      <a href="#"></a>
                      <div class="media-body">
                        <ul class="list-inline blog-meta text-muted">
                          <li class="list-inline-item"> August 26, 2017</li>
                          <li class="list-inline-item">Kevin</li>
                        </ul>
                        <h5 class="md-2">
                          Porta risus porttitor facilisis sit dapibus
                        </h5>
                        <h6 class="md-1">Porta risus porttitor facilisis sit dapibusPorta risus porttitor facilisis sit dapibusPorta risus porttitor facilisis sit dapibusPorta risus porttitor facilisis sit dapibus</h6>
                        <p><i class="fa fa-star text-primary"></i><i class="fa fa-star text-primary"></i><i class="fa fa-star text-primary"></i><i class="fa fa-star text-primary"></i><i class="fa fa-star text-primary"></i></p>
                      </div>
                    </li>
                    <li class="media md-3 pos-relative">
                      <a href="#"></a>
                      <div class="media-body">
                        <ul class="list-inline blog-meta text-muted">
                          <li class="list-inline-item"> August 30, 2017</li>
                          <li class="list-inline-item">Robert</li>
                        </ul>
                        <h5 class="md-2">
                          Magna aliquet diam mauris tortor turpis vel porta
                        </h5>
                        <h6 class="md-1">Magna aliquet diam mauris tortor turpis vel portaMagna aliquet diam mauris tortor turpis vel portaMagna aliquet diam mauris tortor turpis vel portaMagna aliquet diam mauris tortor turpis vel porta</h6>
                        <p><i class="fa fa-star text-primary"></i><i class="fa fa-star text-primary"></i><i class="fa fa-star text-primary"></i><i class="fa fa-star text-primary"></i><i class="fa fa-star text-primary"></i></p>
                      </div>
                    </li>
                    <li class="media md-3 pos-relative">
                      <a href="#"></a>
                      <div class="media-body">
                        <ul class="list-inline blog-meta text-muted">
                          <li class="list-inline-item"> August 31, 2017</li>
                          <li class="list-inline-item">Jason</li>
                        </ul>
                        <h5 class="md-2">
                          Porta risus porttitor facilisis sit dapibus
                        </h5>
                        <h6 class="md-1">Porta risus porttitor facilisis sit dapibusPorta risus porttitor facilisis sit dapibusPorta risus porttitor facilisis sit dapibusPorta risus porttitor facilisis sit dapibus</h6>
                        <p><i class="fa fa-star text-primary"></i><i class="fa fa-star text-primary"></i><i class="fa fa-star text-primary"></i><i class="fa fa-star text-primary"></i><i class="fa fa-star text-primary"></i></p>
                      </div>
                    </li>
                  </ul>
                  <hr/>
                  <h4>
                    Add Review
                  </h4>
                  <form id="reviews-form" class="comment-form mt-3" role="form">
                    <div class="row">
                      <div class="col-md-6">
                        <label class="sr-only" for="comment-name">Name</label>
                        <input type="text" class="form-control mb-3" id="comment-name" placeholder="Name">
                        <label class="sr-only" for="comment-name">Email</label>
                        <input type="email" class="form-control mb-3" id="comment-email" placeholder="Email">
                          <select name">
					<option value="">Stars</option>
                          <option>1</option>
                          <option>2</option>
                          <option>3</option>
                          <option>4</option>
                          <option>5</option>
                        </select>
                      </div>
                      <div class="col-md-6">
                        <label class="sr-only" for="comment-comment">Comment</label>
                        <textarea rows="7" class="form-control" id="comment-comment" placeholder="Comment"></textarea>
                      </div>
                    </div>
                    <button type="submit" class="btn btn-default-drk float-right">Submit</button>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
	
	

Typography

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>