LinGeo Template

Return to:
G & L WebDesign

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.

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 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.

Accordions

Accordion Style 1    No Open or Close Icons

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. Aenean augue dolor, facilisis id fringilla ut, tempus vitae nibh. Nullam nec

Accordion Style 2

  • Lorem ipsum dolor sit amet
  • Facilisis id fringilla ut ligula vitae
  • Donec laoreet ultricies rhoncus
  • Lorem ipsum dolor sit amet

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. Aenean augue dolor, facilisis id fringilla ut, tempus vitae nibh. Nullam nec

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. Aenean augue dolor, facilisis id fringilla ut, tempus vitae nibh. Nullam nec

View Accorion Style 1 Code

	<div class="container mt-2">
		<div class="row">
			<div class="col-sm-6 md-6 lg-6 mb-2">
				<h4 class="header-title">Accordion Style 1&nbsp;&nbsp;&nbsp;&nbsp;<i>No Open or Close Icons</i></h4>
				<span class="line"></span>
			<div class="panel-group" id="accordion-ni">
				<div class="panel">
				<div class="panel-heading collapsed" data-toggle="collapse" data-parent="#accordion-ni" data-target="#accordion-nicollapseOne">
				<h4 class="panel-title accordion-toggle">List of Links</h4>
			</div>
		<div id="accordion-nicollapseOne" class="panel-collapse collapse">
			<div class="panel-body">
				<ul class="list-unstyled">
					<li><a href="">Nike</a></li>
					<li><a href="">Rebok</a></li>
					<li><a href="">Adidas</a></li>
					<li><a href="">Converse</a></li>
					<li><a href="">Puma</a></li>
				</ul>
			</div>
		</div>
	</div>
				<div class="panel">
				<div class="panel-heading collapsed" data-toggle="collapse" data-parent="#accordion-ni" data-target="#accordion-nicollapseTwo">
				<h4 class="panel-title accordion-toggle">Numbered List Links</h4>
			</div>
		<div id="accordion-nicollapseTwo" class="panel-collapse collapse">
			<div class="panel-body">
				<ol>
					<li><a href="">Ford</a></li>
					<li><a href="">Chevrolet</a></li>
					<li><a href="">Ram</a></li>
					<li><a href="">Honda</a></li>
					<li><a href="">Toyota</a></li>
				</ol>
			</div>
		</div>
	</div>
				<div class="panel">
				<div class="panel-heading collapsed" data-toggle="collapse" data-parent="#accordion-ni" data-target="#accordion-nicollapseThree">
				<h4 class="panel-title accordion-toggle">Text Only</h4>
			</div>
		<div id="accordion-nicollapseThree" class="panel-collapse collapse">
			<div class="panel-body">
			<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. Aenean augue dolor, facilisis id fringilla ut, tempus vitae nibh. Nullam nec</h4>	
					</div>
				</div>
			</div>
		</div>
	</div>

	
View Accorion Style 2 Code

	<div class="container mt-2">
		<div class="row">
			<div class="col-sm-6 mb-2">
		<h4 class="header-title">Accordion Style 2</h4>
		<span class="line"></span>
		<div class="panel-group" id="accordion2">
			<div class="panel">
				<div class="panel-heading collapsed" data-toggle="collapse" data-parent="#accordion2" data-target="#accordion2collapseOne">
				<h4 class="panel-title accordion-toggle">List with Icons</h4>
			</div>
		<div id="accordion2collapseOne" class="panel-collapse collapse">
			<div class="panel-body">
			<ul class="list-unstyled">
				<li><i class="fas fa-check fa-lg"></i> Lorem ipsum dolor sit amet</li>
				<li><i class="fas fa-cog fa-lg"></i> Facilisis id fringilla ut ligula vitae </li>
				<li><i class="fas fa-star fa-lg"></i> Donec laoreet ultricies rhoncus</li>
				<li><i class="fas fa-arrow-down fa-lg"></i> Lorem ipsum dolor sit amet</li>
			</ul>
			</div>
		</div>
	</div>
		<div class="panel">
			<div class="panel-heading collapsed" data-toggle="collapse" data-parent="#accordion2" data-target="#accordion2collapseTwo">
			<h4 class="panel-title accordion-toggle">Text with Image</h4>
		</div>
	<div id="accordion2collapseTwo" class="panel-collapse collapse">
		<div class="panel-body">
			<div class="right-image-text">
				<img src="assets/imgs/site-imgs/img-01.jpg" title="Image Title" alt=""/>
			<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. Aenean augue dolor, facilisis id fringilla ut, tempus vitae nibh. Nullam nec</h4>
			</div>
		</div>
	</div>
		<div class="panel">
			<div class="panel-heading collapsed" data-toggle="collapse" data-parent="#accordion2" data-target="#accordion2collapseThree">
			<h4 class="panel-title accordion-toggle">Full-Width Image with Text</h4>
		</div>
	<div id="accordion2collapseThree" class="panel-collapse collapse">
		<div class="panel-body">
			<div class="left-image-text">
				<img src="assets/imgs/site-imgs/img-02.jpg" title="Image Title"  alt=""class="img-fluid" />
			<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. Aenean augue dolor, facilisis id fringilla ut, tempus vitae nibh. Nullam nec</h4>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	

Theme Color Coordinated Alerts

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

Audio / Video

Audio and Video files can be stored locally or linked from an outside source.

Local Audio

Locally Hosted Audio

Outside Audio

Outside Source Audio

Local Video

Locally Hosted Video

Outside Video

Outside Source Video

View codes

	<div class="container mt-3">
		<div class="row">
			<div class="col-sm-12">
          <h1>Audio &#47; Video</strong></h1>
		<h3>Audio and Video files can be stored locally or linked from an outside source.
		</h3>
			</div>
		</div>
	</div>
<!-- Audio Files -->
	<div class="container mt-3">
    		<div class="row">
        		<div class="col-sm-6">
            		<h4><strong>Local Audio</strong></h4>
            			<div class="audio-div">
                			<audio class="fluid-audio" id="player2" src="assets/av/audio-thunder.mp3" type="audio/mp3" controls="controls"></audio>
            			</div>
             		<h4>Locally Hosted Audio</h4>
        		</div>
        		<div class="col-sm-6">
            		<h4><strong>Outside Audio</strong></h4>
            			<div class="audio-div">
                			<audio class="fluid-audio" id="player2" src="http://www.mfiles.co.uk/mp3-downloads/brahms-lullaby-wiegenlied-guitar.mp3" type="audio/mp3" controls="controls"></audio>
            			</div>
             		<h4>Outside Source Audio</h4>
        		</div>			
		</div>
	</div>
<!-- Video Files -->
	<div class="container mt-4">
    		<div class="row">
        		<div class="col-sm-6">
            		<h4><strong>Local Video</strong></h4>
            			<div class="audio-div">
                			<video class="fluid-video" id="player2" controls="controls">
                   			 	<source src="assets/av/clouds.mp4" type="video/mp4">
                        			<source src="assets/av/clouds.mp4" type="video/mp4"></source>
                    			</source>
                			</video>
            			</div>
             		<h4>Locally Hosted Video</h4>
        		</div>
<!-- Local Video File -->
        		<div class="col-sm-6">
                	<h4><strong>Outside Video</strong></h4>
            			<div class="audio-div">
                    		<iframe width="100%" height="250" src="https://www.youtube.com/embed/OJhrjMQV6CU" frameborder="0" allowfullscreen></iframe>
            			</div>
             		<h4>Outside Source Video</h4>
        		</div>	
		

	

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

Button Group

Add the class .btn-group to each button to show them inline and give space between. Add mb-2 or 3 to get vertical space between on small screens.

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

Button Target Element

Lorem ipsum dolor sit amet, per ridens facilis urbanitas ex. Id affert partiendo per, usu luptatum facilisis posidonium at.
View Button Target Element Code

	<div class="container mt-3">
    		<div class="row">
        		<div class="col-sm-6">
                	<button class="btn btn-default-lgt ml-1" type="button" data-toggle="collapse" data-target="#collapseExample12" aria-expanded="false" aria-controls="collapseExample12">
                  		Button with data-target element
                	</button>
              	</div>
              	<!-- Collapse buttons -->
              	<!-- Collapsible element -->
             	<div class="collapse" id="collapseExample12">
                	<div class="m-3">
					Lorem ipsum dolor sit amet, per ridens facilis urbanitas ex. Id affert partiendo per, usu luptatum facilisis posidonium at.				</div>
			</div>
		</div>
	</div>

	

Button Group / Multiple Target Elements

A button can show and hide multiple elements by referencing them with a JQuery selector in its href or data-target attribute. Multiple buttons can show and hide an element if they each reference it with their href or data-target attribute.
At sit mutat nobis. Consulatu repudiare definitiones at qui. Solet iudico reprimique an pri.
Ei melius petentium consetetur nec, te qui iisque quaerendum accommodare.
View Multiple Target Elements Code

          <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>

          <!-- Collapsible content -->
          <div class="row mt-4">
               <div class="col">
                  	<div class="collapse multi-collapse" id="multiCollapseExample1">
                    <div class="card card-body">
					At sit mutat nobis. Consulatu repudiare definitiones at qui. Solet iudico reprimique an pri.
                    </div>
               	</div>
               </div>
               <div class="col">
                  	<div class="collapse multi-collapse" id="multiCollapseExample2">
                    <div class="card card-body">
					Ei melius petentium consetetur nec, te qui iisque quaerendum accommodare.
				</div>
          		</div>
			</div>

	

Cards

Product Card 1

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

Personnel 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 codes


            	<div class="col-sm-12 col-md-4 col-lg-4">
              		<h2 class="mb-4">Product Card 1</h2>
              	<div class="card">
                	<div class="view">
                  		<img src="assets/imgs/placeholder-imgs/150x150.png" 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="javascript:void(0)">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="javascript:void(0)" class="text-primary">Order Now<i class="fas fa-chevron-right"></i></a>
               </div>
               <div class="card-footer bg-transparent d-flex justify-content-around">
                  	<span class="text-muted">
                    	<i class="fas fa-comment"></i>121</span>
                  	<span class="text-muted">
                    	<i class="fab fa-facebook-square"></i>66</span>
                  	<span class="text-muted">
                    	<i class="fab fa-twitter-square"></i>19</span>
               </div>
          </div>
     </div>

     <div class="col-sm-12 col-md-4 col-lg-4">
          <h2 class="mb-4">Product Card 2</h2>
              	<div class="card">
                	<div class="view">
                  		<img src="assets/imgs/placeholder-imgs/150x150.png" class="card-img-top" alt="photo">
                	</div>
               <div class="card-body">
                  	<h4>Rating 4 1/2</h4>
                  		<i class="fas fa-star"></i>
                  		<i class="fas fa-star"></i>
                  		<i class="fas fa-star"></i>
                  		<i class="fas fa-star"></i>
                  		<i class="fas fa-star-half-alt"></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">
                    <a href="javascript:void(0)" class="text-primary">Buy Now<i class="fas fa-chevron-right"></i></a>
               </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-sm-12 col-md-4 col-lg-4">
          <h2 class="mb-4">Personnel Card</h2>
              	<div class="card shadow">
                	<div class="view">
                    	<img class="card-img-top" src="assets/imgs/site-imgs/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 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="fas fa-map-marker-alt"></i>
                      	<span>Dallas, TX</span>
                    </li>
                    <li class="d-flex justify-content-between">
                      	<i class="fas fa-phone-alt"></i>
                      	<span>123 456 789</span>
                    </li>
                    <li class="d-flex justify-content-between">
                      	<i class="fas fa-envelope-open-text-alt"></i>
                      	<span>example@example.com</span>
                    </li>
               </ul>
               </div>
     <div class="card-footer bg-transparent d-flex justify-content-between">
          <a href="javascript:void(0)"><i class="fab fa-instagram"></i></a>
               <a href="javascript:void(0)"><i class="fab fa-tumblr-square"></i></a>
               <a href="javascript:void(0)"><i class="fab fa-vimeo"></i></a>
               <a href="javascript:void(0)"><i class="fab fa-reddit"></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.

  • Dallas, TX
  • 123 456 789
  • example@example.com

Today's Special

Card image
Women Dresses Casual

Rating 4 1/2

Available in five different colors

View Collapse Card 1 code

     <div class="container">
          <div class="row">
            	<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/imgs/site-imgs/user-01.jpg" alt="Card image">
                  </div>
		<div class="card-body elegant-color">
			<h3 class="card-subtitle">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-default-lgt mt-3 mb-3 collapsed" data-toggle="collapse" href="#collapseCard1" role="button" aria-expanded="false" aria-controls="collapseCard1">Contact Charles Jones <i class="fas 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="fas fa-map-marker-alt"></i>
						<span>Dallas, TX</span></li>
						<li class="d-flex justify-content-between">
						<i class="fas fa-phone"></i>
						<span>123 456 789</span></li>
						<li class="d-flex justify-content-between">
						<i class="fas fa-envelope"></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="fab fa-facebook" style="color:#3b5998;"></i>
		</a>
		<a style="padding-right: 2em; href="#">
			<i class="fab fa-twitter" style="color:#48c4d2;"></i>
		</a>
		<a style="padding-right: 2em; href="#">
			<i class="fab fa-instagram" style="color:#833ab4;"></i>
		</a>
		<a href="#">
			<i class="fab fa-youtube" style="color:#EF6950;"></i>
		</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	
View Collapse Card 2 code

     <div class="container">
          <div class="row">
            	<div class="col-sm-6 mt-3">
		<div class="card card-body bg-white animated sk2">
			<div class="text-center mt-3 mb-3"></div>
				<h3><strong>Today's Special</strong></h3>
			<img class="card-img-top" src="assets/imgs/placeholder-imgs/200x200.png" 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-default-drk mt-3 mb-3 collapsed" data-toggle="collapse" href="#collapseCard2" role="button" aria-expanded="false" aria-controls="collapseCard2">Buy Now <i class="fas fa-chevron-down fa-sm" aria-hidden="true"></i></a>
     	</div>
	<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="fas fa-star"></i>
               		<i class="fas fa-star"></i>
               		<i class="fas fa-star"></i>
               		<i class="fas fa-star"></i>
               		<i class="fas fa-star-half"></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-default-drk">
                      Buy now
                      <i class="fas fa-chevron-right"></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>
	</div>

	

Flip Card

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

On Click

Special Today Only

Special Today Only

Rating 4 1/2

Available in five different colors

On Hover

Special Today Only

Special Today Only

Rating 4 1/2

Available in five different colors

Use .yflipcard

Use .image-flip-card

Borderless Card

photo

Serenity

by @SomeOne

Card with Enlarge Image

View Borderless Card code

<div class="container mt-3">
     <div class="row">
          <div class="col-sm-6 mb-4">
              	<h2 class="mb-4">Borderless Card</h2>
          <div class="card border-0">
               <div class="view">
                  	<img src="assets/imgs/placeholder-imgs/400x250.png" class="card-img-top" alt="photo">
                	</div>
               <div class="card-body">
                  	<h2 class="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="fas fa-star"></i>
                  			<i class="fas fa-star"></i>
                  			<i class="fas fa-star"></i>
                  			<i class="fas fa-star-half"></i>
               </div>
          </div>

	
View Card with Enlarge Image code

     <div class="col-sm-6 mb-4">
          <h2 class="mb-4">Card with Enlarge Image</h2>
              	<div class="card">
				<a href="assets/imgs/site-imgs/img-07.jpg" data-lightbox="single-07"
					data-title="Ocean Cliffs">
					<img src="assets/imgs/site-imgs/img-07.jpg" class="img-fluid" />
				</a>
			<div class="card-footer">
				Ocean Cliffs
			</div>
		</div>

	

Countdown Timers

Default Color

New Year's 2021

Theme Color

New Year's 2022

Large Default Color

The large size needs a min. col width of 8 if all 4 units are required.

New Year's 2020

Large Theme Color

New Year's 2021

View codes

<!-- Countdown Timer #1 -->
	<div class="container mt-3 mb-3">
		<div class="row">
			<div class="col-sm-6">
          			<h3><strong>Default Color</strong></h3>
						<div class="row mt-2">
							<div class="col-md-6">
            						<h3>New Year's 2021</h3>
							<div class="default-timer"></div>
			</div>
		</div>
	</div>
	
<!-- Countdown Timer #2 -->
			<div class="col-sm-6">
          		<h3><strong>Theme Color</strong></h3>
					<div class="row mt-2">
							<div class="col-md-6">
            						<h3>New Year's 2022</h3>
							<div class="lingeo-timer"></div>
    	   					</div>
          			</div>
				</div>
			</div>
		</div>
	</div>
<!-- END Default Size -->

<!-- START Large Sizes -->
<!-- Countdown Timer #3 -->
	<div class="container mt-3 mb-3">
		<div class="row">
			<div class="col-sm-8">
          			<h3><strong>Large Default Color</strong></h3>
					<h4>The large size needs a min. col width of 8 if all 4 units are required.</h4>
						<div class="row mt-2">
							<div class="col-md-6">
            						<h3>New Year's 2020</h3>
							<div class="default-lrg-timer"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
<!-- Countdown Timer #4 -->
	<div class="container mt-3 mb-3">
		<div class="row">
			<div class="col-sm-9">
          		<h3><strong>Large Theme Color</strong></h3>
					<div class="row mt-2">
							<div class="col-md-6">
            						<h3>New Year's 2021</h3>
							<div class="lingeo-lrg-timer"></div>
    	   				</div>	
				</div>
			</div>
		</div>
	</div>
Change the class destinction on the last line of the code to use different style i.e. default, lingeo, default-lrg or lingeo-lrg.
The date is set in the script at the bottom of the page.			

	

Dividers

In lieu of the html .hr style divider which produces a faint line with 1rem top and bottom, we came up with a few unique ideas.

Solid Theme Color Horizontal Divider

This gives a solid color divider between containers.

Use div class="hr2"

Gradient Theme Color Horizontal Divider

This gives a gradiant theme color divider between containers.

Use div class="hr3"

Gray Gradient Horizontal Divider

This gives a gray gradiant bar between containers.

Use div class="hr4"

Solid Vertical Divider between Columns in a Row

not visible on small screen

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Use div class="row solidvdivide"

Vertical Theme Color Vertical Divider between Columns in a Row

Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
Generic placeholder image
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
Generic placeholder image
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
Generic placeholder image
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
Generic placeholder image
Generic placeholder image
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
Generic placeholder image
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
Generic placeholder image
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
Generic placeholder image
Media heading
Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Gray Gradient Vertical Divider between Columns in a Row

not visible on small screen

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Use div class="row gradiantvdivide"

Just for Fun

Theme Color Horizontal Raduis Divider

Use div class="hr5"

Dropup Navigation

View Dropup Navigation Code

     <div class="dropup">
          <div id="dLabel" role="button" data-toggle="dropdown" class="btn btn-default-drk btn" data-target="#" href="/page.html">
                Menu <i class="fas fa-chevron-up"></i>
          </div>
    	<ul class="dropdown-menu multi-level pl-2" role="menu" aria-labelledby="dropdownMenu">
          <li><a href="#">Credits</a></li>
          <li><a href="#">Policy</a></li>
          <li><a href="#">Pages</a></li>         
          <li><a tabindex="-1" href="#">Features</a></li>
          <li><a href="#">Home</a></li>
	</div>
	
     <div class="dropleft">
          <div id="dLabel" role="button" data-toggle="dropdown" class="btn btn-default-drk btn" data-target="#" href="/page.html">
                Menu <i class="fas fa-chevron-left"></i>
          </div>
    	<ul class="dropdown-menu multi-level pl-2" role="menu" aria-labelledby="dropdownMenu">
          <li><a href="#">Credits</a></li>
          <li><a href="#">Policy</a></li>
          <li><a href="#">Pages</a></li>         
          <li><a tabindex="-1" href="#">Features</a></li>
          <li><a href="#">Home</a></li>
	</div>
	
     <div class="dropright">
          <div id="dLabel" role="button" data-toggle="dropdown" class="btn btn-default-drk btn" data-target="#" href="/page.html">
                Menu <i class="fas fa-chevron-right"></i>
          </div>
    	<ul class="dropdown-menu multi-level pl-2" role="menu" aria-labelledby="dropdownMenu">
          <li><a href="#">Credits</a></li>
          <li><a href="#">Policy</a></li>
          <li><a href="#">Pages</a></li>         
          <li><a tabindex="-1" href="#">Features</a></li>
          <li><a href="#">Home</a></li>
	</div>

	

Calendar (google)

To imbed a calendar put link to calendar in an iframe

Footers

Five Column

Contact Us

Arkansas Widgets
555 Bubba Avenue
Oil Trough, AR 72564

eMail Us
AR Widgets

Follow Us

View Five Column Footer code
	
	<div class="container mt-2">
		<div class="row">
        		<div class="col">
            		<h4><strong><u>Contact Us</u></strong></h4>
		  		<h5>Arkansas Widgets</br>555 Bubba Avenue</br>Oil Trough, AR 72564</h5>
        		</div>
        	<div class="col">
            		<h4><strong><u>eMail Us</u></strong>
		  		</br><a class="btn btn-default-drk btn-xs" href="">AR Widgets</a>
        	</div>
        	<div class="col">
            		<h4><strong><u>Menu</u></strong>></h4>
		  		</br>
        	<div class="dropup">
            	<div id="dLabel" role="button" data-toggle="dropdown" class="btn btn-default-drk btn btn-xs" data-target="#" href="/page.html">
                	Menu <i class="fas fa-chevron-up"></i>
            	</div >
    		<ul class="dropdown-menu pl-2" role="menu" aria-labelledby="dropdownMenu">
              <li><a href="#">Credits</a></li>
              <li><a href="#">Policy</a></li>
              <li><a href="#">Pages</a></li>
              <li><a href="#">Features</a></li>
              <li><a href="#">Home</a></li>
		</ul>
		</div>
     </div>
        	<div class="col">
            	<h4><strong><u>Links</u></strong></br></h4>
				<a class="btn btn-success btn-xs" href="#">Login</a>
		  	</br>
			<a class="btn btn-danger btn-xs" href="#">Join the Club</a>
        	</div>
        	<div class="col">
            	<h4><strong><u>Follow Us</u></strong>
		  	</br></br>
		<ul class="social-icons">
			<i class="fab fa-facebook fa-large"><a href=""></a>
			</i>
			<i class="fab fa-twitter fa-large"><a href="#"></a>
			</i>
			<i class="fab fa-instagram fa-large"><a href="#"></a>
			</i>
		</ul>
		</div>
	</div>
	
	

Informational Footer

View code

	<div class="footer-links">
		<div class="container">
		<div class="row">
            <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-6">
		  <h5><i class="fas fa-info"></i> Information</h5>
                <ul class="list-unstyled">
                    <li><a href="#">About Us</a>
                    </li>
                    <li><a href="#">Delivery</a>
                    </li>
                    <li><a href="#">Privacy</a>
                    </li>
                    <li><a href="#">Terms</a>
                    </li>
                </ul>
            </div>
            <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-6">
		  <h5><i class="fas fa-comment"></i> Service</h5>
                <ul class="list-unstyled">
                    <li><a href="#">Contact Us</a>
                    </li>
                    <li><a href="#">Returns</a>
                    </li>
                    <li><a href="#">Delivery</a>
                    </li>
                    <li><a href="#">Site Map</a>
                    </li>
                </ul>
            </div>
            <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-6">
		  <h5><i class="fas fa-folder-open"></i> Extras</h5>
                <ul class="list-unstyled">
                    <li><a href="#">Brands</a>
                    </li>
                    <li><a href="#">Gift Vouchers</a>
                    </li>
                    <li><a href="#">Affiliates</a>
                    </li>
                    <li><a href="#">Specials</a>
                    </li>
                </ul>
            </div>
            <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-6">
		  <h5><i class="fas fa-folder-open"></i> My Account</h5>
                <ul class="list-unstyled">
                    <li><a href="#">Account</a>
                    </li>
                    <li><a href="#">History</a>
                    </li>
                    <li><a href="#">Wish List</a>
                    </li>
                    <li><a href="#">Newsletter</a>
                    </li>
                </ul>
            </div>
			</div>
		</div>
	</div>

	

Minimalist Footer

View code
	
	<div class="mini-footer">
		<div class="container">
			<div class="row">
				<div class="col-sm-12">
					<div class="mini-footer-menu pull-right">
						<h6 class="mini-footer-detail"><small>© Arkansas Widgets, Inc. All Rights Reserved</small></h6>
				</div>
			</div>
				<div class="col-md-12">
					<div class="mini-footer-menu pull-right">
						<ul class="list-inline">
							<li><a href="#"><small>Terms of Use</small></a></li>
							<li><a href="#"><small>Privacy Policy</small></a></li>
							<li><a href="#"><small>Advertise with Us</small></a></li>
							<li><a href="#"><small>About Us</small></a></li>
							<li><a href="#"><small>Help</small></a></li>
							<li><a href="#"><small>Contact Us</small></a></li>
						</ul>
					</div>
				</div>
			</div>
          </div>
	</div>
	
		

Headers

Header with Info on Right

View code
	
     <h2><strong>Header with Info on Right</strong></h2>
		<div class="row mt-2">
			<div class="col-md-12">
	<div class="header">
     	<div class="container mt-3">
            	<div class="row">
                	<div class="col-sm-6">
					<a href=""><img src="assets/imgs/lingeo/logo-lrg.png" alt=""class="img-fluid" /></a>
                	</div>
                	<div class="col-sm-6">
                    <div class="float-right">
					<a href="#"><img src="assets/imgs/lingeo/fb_button-lgt.jpg" style="PADDING-TOP: 20px; PADDING-RIGHT: 10px; PADDING-BOTTOM: 6px;" class="img-fluid" /></a>
					<a href="#"><img src="assets/imgs/lingeo/twitter_button-lgt.png" style="PADDING-TOP: 20px; PADDING-RIGHT: 10px; PADDING-BOTTOM: 6px;" class="img-fluid" /></a>
                    </div>
                	</div>
            	</div>
        	</div>
			</div>
		</div>
          	</div>
		</div>
	</div>
	
		

Header with Social Icons

View code
	
	<div class="container mt-3 mb-5">
		<div class="row">
			<div class="col-sm-12">
          <h2><strong>Header with Social Icons</strong></h2>
          <div class="row mt-2">
            <div class="col-md-12">
		</div>
		</div>
	<div class="col-md-12">
		<ul class="social-icons">
			<i class="fab fa-facebook fa-2x"><a href=""></a>
			</i>
			<i class="fab fa-twitter fa-2x"><a href="#"></a>
			</i>
			<i class="fab fa-instagram fa-2x"><a href="#"></a>
			</i>
		</ul>
			</div>
          </div>
	</div>
	
	

eCommerce Header

View code
	
	<div class="container mt-3 mb-5">
		<div class="row">
			<div class="col-sm-12">
          <h2><strong>eCommerce Header</strong></h2>
          <div class="row mt-2">
            <div class="col-md-12">
	<div class="logo">
		<div class="container">
			<div class="row">
				<div class="col-sm-4">
					<a href="http://www.gandlconsultants.com/gandl-home.html"><img src="assets/imgs/lingeo/lingeo-shop-logo.png" class="img-fluid" /></a>			
				</div>
			<div class="col-sm-8">
				<div class="header-menu">
	<ul class="nav">
		<li><a href="#" data-toggle="modal" data-target="#login-modal"><span class>Login</span></a></li>
	<!-- *** LOGIN MODAL *** -->
        <div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="Login" aria-hidden="true">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="Login">Customer Login</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    </div>
                    <div class="modal-body">
                        <form action="customer-orders.html" method="post">
                            <div class="form-group">
                                <input type="text" class="form-control" id="email_modal" placeholder="email">
                            </div>
                            <div class="form-group">
                                <input type="password" class="form-control" id="password_modal" placeholder="password">
                            </div>
                            <p class="text-center">
                                <button class="btn btn-default-drk btn-sm">Log in</button>
                            </p>
                        </form>
                        <p class="text-center text-muted">Not registered yet?</p>
                        <p class="text-center text-muted"><a href="http://www.gandlconsultants.com/LinGeo/shop-reg-login.html"><strong>Register now</strong></a>! It is easy and done in 1&nbsp;minute and gives you access to special discounts and much more!</p>
                    </div>
                </div>
            </div>
        </div>
	<!-- *** LOGIN MODAL END *** -->
		<li><a href=" ">&nbsp;&nbsp;&nbsp;&nbsp;<i class="fas fa-unlock fa-fw"></i> Register&nbsp;&nbsp;</a></li>
		<li><a href=" "><i class="fas fa-lock fa-fw"></i> Account&nbsp;&nbsp;</a></li>
		<li><a href=" "><i class="fas fa-heart fa-fw"></i> Wishlist&nbsp;&nbsp;</a></li>
		<li><a href=" "><i class="fas fa-shopping-cart fa-fw"></i> Cart&nbsp;&nbsp;</a></li>
		<li><a href=" "><i class="fas fa-user-alt-slash fa-fw"></i> Logout</a></li>
	</ul>
				</div>
			</div>
		</div>
	</div>
				</div>
			</div>
          </div>
	</div>
	
	

Header with Sub-Headers

Morbi dapibus, enim quis luctus interdum

View code
	
	<div class="container mt-3">
		<div class="row">
			<div class="col-sm-12">
          <h2><strong>Header with Sub-Headers</strong></h2>
          <div class="row mt-2">
            <div class="col-md-12">
		<div class="left-content">
			<div class="single-page">
              <h1>Morbi dapibus, enim quis luctus interdum</h1>
				<div class="header-menu">
			<ul class="nav navbar-nav">
			<ul>
				<ol><i class="fas fa-calendar"></i> August 8, 2018</ol>
				<ol><i class="fas fa-user"></i> By John Doe</ol>
				<ol><i class="fas fa-tags"></i>Category</ol>
			</ul>
				</div>
				</div>
			</div>
          </div>
	</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 Jumbotron code

	<div class="container mt-3">
		<div class="row">
			<div class="col-sm-12">
		<section id="jumbotron">
          <h2>Jumbotron</strong></h2>
          <div class="row mt-2">
            	<div class="col-md-12">
				<div class="jumbotron">
					<h1>Hello, world!</h1>
					<h3 class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</h3>
				<hr>
					<h3>It uses utility classes for typography and spacing to space content out within the larger container.</h3>
					<h3 class="lead"><a class="btn btn-default-drk btn-lg" href="#!" role="button">Some action</a></h3>
				</div>
    	   		</div>
          </div>
			</div>
		</div>
	</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. Height is determined by image size.

Map (google)

Put link to map in an iframe.

Marquee

Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor!

Use div class="scrollbar"

Modals

Modals come in handy when needing to conserve space on a page.

We devoted a separate page to Modals

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="javascript:void(0)" class="page-link" aria-label="Previous">
	<span aria-hidden="true">&laquo;</span>
	</a>
	</li>
	<li class="page-item"><a href="javascript:void(0)" class="page-link">1</a></li>
	<li class="page-item"><a href="javascript:void(0)" class="page-link">2</a></li>
	<li class="page-item active"><a href="javascript:void(0)" class="page-link">3</a></li>
	<li class="page-item"><a href="javascript:void(0)" class="page-link">4</a></li>
	<li class="page-item"><a href="javascript:void(0)" class="page-link">5</a></li>
	<li class="page-item">
	<a href="javascript:void(0)" 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 the center of the page.

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

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

Popovers

View Popover Code

<div>
     <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-warning" 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>
</div>

	

Dismiss on Next Click

Popovers do not close until the button is clicked after opening. Here's a Popover that closes when a click is made anywhere.
View Dismissible Popover Code

	<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>

	

Prepend / Append

Prepend Text

$

Append Text

.00

Prepend Botton

Append Button

Prepend & Append Text

$ .00

Prepend & Append Button

View Prepend / Append code

	<div class="container mt-3 mb-5">
		<div class="row">
			<div class="col-sm-12">
          <h2>Prepend &#47; Append</h2>
          <div class="row mt-2">
            	<div class="col-md-12">
<!-- 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 mt-3">
		<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 mt-3">
		<div class="row">
			<div class="col-sm-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>
          	</div>
		</div>
	</div>		

	

Horizontal Select

Vertical Select

View Horizontal & Vertical Select Code

	<div class="container mt-3">
		<div class="row">
			<div class="col-md-6 sm-12">
     <select>
        	<option>United States</option>
        	<option>United Kingdom</option>
        	<option>Bolivia</option>
        	<option>Argentina</option>
        	<option>New Zealand</option>
        	</select>
			</div>
			<div class="col-md-6 sm-12">
     <select multiple="multiple">
        	<option>United States</option>
        	<option>United Kingdom</option>
        	<option>Bolivia</option>
        	<option>Argentina</option>
        	<option>New Zealand</option>
        	<option>Germany</option>
        	<option>China</option>
     </select>
			</div>
		</div>
	</div>

	
View Search Box Code

  		<div class="panel panel-default">
    			<div class="panel-heading">
      			<form class="row">
        		<div class="col-md-9">
          		<div class="form-group">
            			<label for="keyword">Search term:</label>
            				<input type="text" class="form-control input-sm" value="" name="keyword" id="keyword">
          		</div>
        		</div>
       		</div>
          </div>

	

Table

Requires the addons CSS file

Personnel

Employee Directory
Position First Name Last Name Street Address City, State, Zip Phone Cell Phone eMail Address
President Jerry Horwitz 123 Main St. Little Rock, AR 722201 501-098-7654 501-234-5678 jerryH@gmail.com
Vice President Barbara Winogrand 987 Oakland Drive Hot Springs Village, AR 71910 501-456-7890 501-345-6789 gwinogrand@hotmail.com
View Table Code

	<div class="panel">
		<h4 class="table-title"><i class="fas fa-list"></i> <b>Personnel</b></h4>
	</div>	
	<div class="table-responsive"> 
		<table class="table table-hover table-bordered">
			<caption>Employee Directory</caption>
  		<thead>
    			<tr>
      			<th>Position</th>
      			<th>First Name</th>
      			<th>Last Name</th>
      			<th>Street Address</th>
      			<th>City, State, Zip</th>
	 			<th>Phone</th>
	 			<th>Cell Phone</th>
	 			<th>eMail Address</th>            
    			</tr>
 		 </thead>
  		<tbody>
    			<tr>
      			<th scope="row">President</th>
      			<td>Jerry</td>
      			<td>Horwitz</td>
      			<td>123 Main St.</td>
      			<td>Little Rock, AR 722201</td>
      			<td>501-098-7654</td>
      			<td>501-234-5678</td>
      			<td>jerryH@gmail.com</td>
     		</tr>
    			<tr>
     			<th scope="row">Vice President</th>
      			<td>Barbara</td>
      			<td>Winogrand</td>
      			<td>987 Oakland Drive</td>
      			<td>Hot Springs Village, AR 71910</td>
      			<td>501-456-7890</td>
      			<td>501-345-6789</td>
      			<td>gwinogrand@hotmail.com</td>
     		</tr>
  				</tbody>
			</table>
		</div>

	

Progress Bars - Theme Coordinated

Height was added to stardard Bootstrap style.

Dark Theme Bar 45%
Light Theme Bar 30%
Dark Theme Striped Bar 50%
Light Theme Striped Bar 30%
View Dark Theme Progress Bar Code

	<div class="container mt-3">
		<div class="row">
            	<div class="col-md-12">
                	<div class="progress-lingeo-drk">
                  		<div class="progress-bar-lingeo-drk" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"> Dark Theme Progress Bar 65%</div>
                	</div>
			</div>
		</div>
     </div>

	
View Light Theme Progress Bar Code

	<div class="container mt-3">
		<div class="row">
            	<div class="col-md-12">
                	<div class="progress-lingeo-lgt">
                  		<div class="progress-bar-lingeo-lgt" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"> Light Theme Progress Bar 50%</div>
                	</div>
			</div>
		</div>
     </div>

	
View Dark Theme Striped Progress Bar Code

	<div class="container mt-3">
		<div class="row">
            	<div class="col-md-12">
                	<div class="progress-lingeo-drk">
                  		<div class="progress-bar-striped-lingeo-drk progress-bar-lingeo-drk" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"> Dark Theme Striped Bar 50%</div>
                	</div>
			</div>
		</div>
     </div>

	
View Light Theme Striped Progress Bar Code

	<div class="container mt-3">
		<div class="row">
            	<div class="col-md-12">
                	<div class="progress-lingeo-lgt">
                  		<div class="progress-bar-striped-lingeo-lgt progress-bar-lingeo-lgt" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"> Light Theme Striped Bar 30%</div>
                	</div>
			</div>
		</div>
     </div>

	

Tooltips

View Tooltip Code

<div>
     <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
     <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
     <button type="button" class="btn btn-warning" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
     <button type="button" class="btn btn-dark" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
</div>

	

Vertical News Tickers

The one on the left includes images, rolls upward automatically and can be controlled by the user. The middle one rolls downward and runs automatically with no user controll. The right one is totally controlled by the user and has the lead text in bold.

News
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... Read more...
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... Read more...
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... Read more...
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... Read more...
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... Read more...
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... Read more...
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... Read more...
News
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... Read more...
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... Read more...
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... Read more...
  4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... Read more...
  5. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... Read more...
  6. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... Read more...
News
  • Curabitur porttitor
    ante eget hendrerit adipiscing. Maecenas at magna accumsan, rhoncus neque id, fringilla dolor. Read more...
  • Praesent ornare
    nisl lorem, ut condimentum lectus gravida ut. Ut velit nunc, vehicula volutpat laoreet vel, consequat eu mauris. Read more...
  • Nunc ultrices tortor
    eu massa placerat posuere. Vivamus viverra sagittis nunc. Nunc et imperdiet magna. Mauris sed eros nulla. Read more...
  • Morbi sodales tellus
    sit amet leo congue bibendum. Ut non mauris eu neque fermentum pharetra. Read more...
  • In pharetra suscipit
    orci sed viverra. Praesent at sollicitudin tortor, id sagittis magna. Fusce massa sem, bibendum id. Read more...
  • Maecenas nec ligula
    sed est suscipit aliquet sed eget ipsum. Suspendisse id auctor nibh. Ut porttitor volutpat augue, non sodales odio dignissi id. Read more...
  • Onec bibendum
    consectetur diam, nec euismod urna venenatis eget. Cras consequat convallis leo. Read more...
  • Curabitur porttitor
    ante eget hendrerit adipiscing. Maecenas at magna accumsan, rhoncus neque id, fringilla dolor. Read more...
View News Ticker code

	<div class="container mt-3">
		<div class="row">
			<div class="col-sm-4">
				<div class="panel panel-default">
					<div class="header-title">
						<span class="fas fa-list"></span><b> News</b></div>
					<div class="panel-body">
						<div class="row">
							<div class="col-xs-12">
								<ul class="demo1">
									<li class="news-item">
										<table cellpadding="4">
											<tr>
												<td><img src="assets/imgs/site-imgs/img-01.jpg" width="60" class="rounded-circle" /></td>
												<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
											</tr>
										</table>
									</li>
									<li class="news-item">
										<table cellpadding="4">
											<tr>
												<td><img src="assets/imgs/site-imgs/img-02.jpg" width="60" class="rounded-circle" /></td>
												<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
											</tr>
										</table>
									</li>
									<li class="news-item">
										<table cellpadding="4">
											<tr>
												<td><img src="assets/imgs/site-imgs/img-03.jpg" width="60" class="rounded-circle" /></td>
												<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
											</tr>
										</table>
									</li>
									<li class="news-item">
										<table cellpadding="4">
											<tr>
												<td><img src="assets/imgs/site-imgs/img-04.jpg" width="60" class="rounded-circle" /></td>
												<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
											</tr>
										</table>
									</li>
									<li class="news-item">
										<table cellpadding="4">
											<tr>
												<td><img src="assets/imgs/site-imgs/img-05.jpg" width="60" class="rounded-circle" /></td>
												<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
											</tr>
										</table>
									</li>
									<li class="news-item">
										<table cellpadding="4">
											<tr>
												<td><img src="assets/imgs/site-imgs/img-06.jpg" width="60" class="rounded-circle" /></td>
												<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
											</tr>
										</table>
									</li>
									<li class="news-item">
										<table cellpadding="4">
											<tr>
												<td><img src="assets/imgs/site-imgs/img-07.jpg" width="60" class="rounded-circle" /></td>
												<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
											</tr>
										</table>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="col-sm-4">
				<div class="panel panel-default">
					<div class="header-title">
						<span class="fas fa-list"></span><b> News</b></div>
					<div class="panel-body">
						<div class="row">
							<div class="col-xs-12">
								<ul class="demo2">
									<li class="news-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></li>
									<li class="news-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></li>
									<li class="news-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></li>
									<li class="news-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></li>
									<li class="news-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></li>
									<li class="news-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></li>
									
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="col-sm-4">
				<div class="panel panel-default">
					<div class="header-title">
						<span class="fas fa-list"></span><b> News</b></div>
					<div class="panel-body">
						<div class="row">
							<div class="col-xs-12">
								<ul id="demo3">
									<li class="news-item"><strong>Curabitur porttitor</strong></br> ante eget hendrerit adipiscing. Maecenas at magna accumsan,
										rhoncus neque id, fringilla dolor. <a href="#">Read more...</a></li>
									<li class="news-item"><strong>Praesent ornare</strong></br> nisl lorem, ut condimentum lectus gravida ut. Ut velit nunc, vehicula
										volutpat laoreet vel, consequat eu mauris. <a href="#">Read more...</a></li>
									<li class="news-item"><strong>Nunc ultrices tortor</strong></br> eu massa placerat posuere. Vivamus viverra sagittis nunc. Nunc
										et imperdiet magna. Mauris sed eros nulla. <a href="#">Read more...</a></li>
									<li class="news-item"><strong>Morbi sodales tellus</strong></br> sit amet leo congue bibendum. Ut non mauris eu neque fermentum
										pharetra. <a href="#">Read more...</a></li>
									<li class="news-item"><strong>In pharetra suscipit</strong></br> orci sed viverra. Praesent at sollicitudin tortor, id sagittis
										magna. Fusce massa sem, bibendum id. <a href="#">Read more...</a> </li>
									<li class="news-item"><strong>Maecenas nec ligula</strong></br> sed est suscipit aliquet sed eget ipsum. Suspendisse id auctor
										nibh. Ut porttitor volutpat augue, non sodales odio dignissi id. <a href="#">Read more...</a></li>
									<li class="news-item"><strong>Onec bibendum</strong></br> consectetur diam, nec euismod urna venenatis eget. Cras consequat
										convallis leo. <a href="#">Read more...</a> </li>
									<li class="news-item"><strong>Curabitur porttitor</strong></br> ante eget hendrerit adipiscing. Maecenas at magna accumsan,
										rhoncus neque id, fringilla dolor. <a href="#">Read more...</a></li>
								</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
					</div>
				</div>
			</div>
          </div>
     </div>		

	
Style Switcher
12 Color Skins
Theme
See the instructions to easily create your own Skin and NavBar.