LinGeo Template

Return to:
G & L WebDesign

Intro Text as Needed

Modals

Sizes

Popover, Tooltip & Form in Modal

View Code Popover Modal

			<div class="col-sm-4 mb-2">
<!-- Button trigger modal -->	
	<button type="button" class="btn btn-default-lgt" data-toggle="modal" data-target="#Modal-popover">Open Modal with Popover</button>
<!-- Modal Body -->
	<div class="modal fade" id="Modal-popover" tabindex="-1" role="dialog" aria-labelledby="Modal-popover-label" aria-hidden="true">
  		<div class="modal-dialog modal-dialog-centered" role="document">
    		<div class="modal-content">
      		<div class="modal-header">
        			<h5 class="modal-title" id="Modal-popover-label">Modal with Popover</h5>
        		<button type="button" class="close" data-dismiss="modal" aria-label="Close">
          	<span aria-hidden="true">×</span>
        		</button>
      		</div>
      	<div class="modal-body">A demo of using popover components in Modal<br />
          <div class="row">
            <div class="col-md-12">
              <button type="button" class="btn btn-default-lgt" data-toggle="popover" data-placement="top" title="popover on top" data-content="Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.">popover on top</button>
              <button type="button" class="btn btn-default-drk" 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 mt-2" 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>
		</div>
      	</div>
<!-- Modal Footer -->
     <div class="modal-footer">
        	<button type="button" class="btn btn-default-lgt" data-dismiss="modal">OK</button>
      				</div>
    				</div>

	
View Code Tooltip Modal

			<div class="col-sm-4">
<!-- Button trigger modal -->
	<button type="button" class="btn btn-default-drk" data-toggle="modal" data-target="#Modal-vert-center-demo">Open Modal with Tooltips</button>
<!-- Modal Body -->
	<div class="modal fade" id="Modal-vert-center-demo" tabindex="-1" role="dialog" aria-labelledby="Modal-vert-center-demo-label" aria-hidden="true">
  		<div class="modal-dialog modal-dialog-centered" role="document">
    			<div class="modal-content">
      		<div class="modal-header">
        		<h5 class="modal-title" id="Modal-vert-center-demo-label">Modal with Tooltips</h5>
        	<button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        	</button>
     </div>
     <div class="modal-body">
        	A demo of using tooltips in different directions <br />
              	<a href="#" data-toggle="tooltip" data-placement="top" title="Top direction">Towards Top</a>
              	<a href="#" data-toggle="tooltip" data-placement="bottom" title="Bottom!">Towards Bottom</a>
              	<a href="#" data-toggle="tooltip" data-placement="left" title="Left!">Towards Left</a>
              	<a href="#" data-toggle="tooltip" data-placement="right" title="Right!">Towards Right</a>
     </div>
<!-- Modal Footer -->
     <div class="modal-footer">
        	<button type="button" class="btn btn-default-drk" data-dismiss="modal">OK</button>
     </div>
    		</div>
  	</div>
</div>
</div>

	
View Code Form Modal

			<div class="col-sm-4">
<!-- Button trigger modal -->
  	<button type="button" class="btn btn-default-lgt" data-toggle="modal" data-target="#form">Open Modal with Form</button>
<!-- Modal Body -->
	<div class="modal fade" id="form" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  		<div class="modal-dialog modal-dialog-centered" role="document">
    			<div class="modal-content">
      		<div class="modal-header border-bottom-0">
        		<h5 class="modal-title" id="exampleModalLabel">Create Account</h5>
        		<button type="button" class="close" data-dismiss="modal" aria-label="Close">
          	<span aria-hidden="true">&times;</span>
        		</button>
      	</div>
     <form>
        	<div class="modal-body">
          	<div class="form-group">
            		<label for="email1">Email address</label>
            		<input type="email" class="form-control" id="email1" aria-describedby="emailHelp" placeholder="Enter email">
            		<a href="#" data-toggle="popover" title="Privacy Policy" data-content="Your information is safe with us."><small>Click to toggle popover</small></a>
          	</div>
          	<div class="form-group">
            		<label for="password1">Password</label>
            		<input type="password" class="form-control" id="password1" placeholder="Password">
          	</div>
          	<div class="form-group">
            		<label for="password1">Confirm Password</label>
            		<input type="password" class="form-control" id="password2" placeholder="Confirm Password">
          	</div>
       		</div>
<!-- Modal Footer -->
        	<div class="modal-footer border-top-0 d-flex justify-content-center">
          	<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Don't forget to submit your data before closing the modal.">Close with Tooltip</button>
          <button type="submit" class="btn btn-success">Submit</button>
        	</div>
     </form>	
				</div>	
			</div>
          </div>
    	</div>

	

Grid and Flexbox Modals

View Code Grid Modal

			<div class="col-sm-6">
<!-- Button trigger modal -->
  	<button type="button" class="btn btn-default-lgt" data-toggle="modal" data-target="#flex">See Modal with Flexbox</button> 
<!-- Modal Body -->
	<div class="modal fade" id="flex" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  		<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    			<div class="modal-content">
      			<div class="modal-header">
        				<h5 class="modal-title" id="exampleModalLabel">Flex Info</h5>
        			<button type="button" class="close" data-dismiss="modal" aria-label="Close">
          	<span aria-hidden="true">&times;</span>
        		</button>
      			</div>
      	<div class="modal-body">
        		<div class="d-flex justify-content-center panel">
          	<div class="flex-item">Flex item 1</div>
          	<div class="flex-item">Flex item 2</div>
          	<div class="flex-item">Flex item 3</div>
        	</div>  
        	<div class="d-flex justify-content-around panel">
          	<div class="flex-item">Flex item 1</div>
          	<div class="flex-item">Flex item 2</div>
          	<div class="flex-item">Flex item 3</div>
        	</div> 
        	<div class="d-flex panel">
          	<div class="flex-item">Flex item</div>
          	<div class="flex-item">Flex item</div>
          	<div class="flex-item ml-auto">Flex item</div>
        	</div>
        		<div class="d-flex panel">
          	<div class="flex-item flex-grow-1">Flex item 1</div>
          	<div class="flex-item">Flex item 2</div>
          	<div class="flex-item">Flex item 3</div>
        	</div>
      	</div>
      		<div class="modal-footer">
        		<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      		</div>
    		</div>
  	</div>
				</div>
			</div>
		</div>
	</div>

	
View Code Flexbox Modal

			<div class="col-sm-6">
<!-- Button trigger modal -->
  	<button type="button" class="btn btn-default-lgt" data-toggle="modal" data-target="#flex">See Modal with Flexbox</button> 
<!-- Modal Body -->
	<div class="modal fade" id="flex" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  		<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    			<div class="modal-content">
      			<div class="modal-header">
        				<h5 class="modal-title" id="exampleModalLabel">Flex Info</h5>
        			<button type="button" class="close" data-dismiss="modal" aria-label="Close">
          		<span aria-hidden="true">times;</span>
        			</button>
      			</div>
      	<div class="modal-body">
        		<div class="d-flex justify-content-center panel">
          	<div class="flex-item">Flex item 1</div>
          	<div class="flex-item">Flex item 2</div>
          	<div class="flex-item">Flex item 3</div>
        	</div>  
        	<div class="d-flex justify-content-around panel">
          	<div class="flex-item">Flex item 1</div>
          	<div class="flex-item">Flex item 2</div>
          	<div class="flex-item">Flex item 3</div>
        	</div> 
        	<div class="d-flex panel">
          	<div class="flex-item">Flex item</div>
          	<div class="flex-item">Flex item</div>
          	<div class="flex-item ml-auto">Flex item</div>
        	</div>
        		<div class="d-flex panel">
          	<div class="flex-item flex-grow-1">Flex item 1</div>
          	<div class="flex-item">Flex item 2</div>
          	<div class="flex-item">Flex item 3</div>
        	</div>
      	</div>
      		<div class="modal-footer">
        		<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      		</div>
    		</div>
  	</div>
				</div>
			</div>
		</div>
	</div>

	

Scroll and Team Members and Product Modals

Scrollable Modal

Team Member Modal

Charles Jones, CEO

Product Modal

View Code Scroll Modal

			<div class="col-sm-4">
				<h2>Scrollable Modal</h2>
	<a data-toggle="modal" href="#SixthModal" >
		<button type="button" class="btn btn-default-drk btn-sm">Text Scroll</button></a>
<!-- Modal Configuration -->
	<div class="modal fade" id="SixthModal" tabindex="-1" role="dialog" aria-labelledby="SixthModalLabel" aria-hidden="true">
  		<div class="modal-dialog" style="height: 60%;">
    		<div class="modal-content" style="height: 60%;">
      	<div class="modal-header">
        		<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="SixthModalLabel">Scrollable Modal</h4>
     </div>
<!-- Modal Body -->     
     <div class="modal-body" style="max-height: calc(100%-120px); overflow-y: scroll;">
		<h2 class="header-title">Modal with Scroll</h2>
        	<h4>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.
		</h4>
      </div>
<!-- Modal Footer -->
     <div class="modal-footer">
        	<button type="button" class="btn btn-default-lgt btn-sm" data-dismiss="modal">Close</button>
      </div>
    			</div>
  		</div>

	
View Code Team Member Modal

			<div class="col-sm-4">
				<h2>Team Member Modal</h2>
				<h5><strong>Charles Jones, CEO</strong></h5>
<!-- START Team Member Modal -->
<!-- Button trigger modal -->
	<a data-toggle="modal" href="#MySeventhModal" ><img src="assets/imgs/site-imgs/user-04-sml.jpg" class="rounded-circle" alt="" title="" class="img-fluid" /></a>
<!-- Modal Configuration -->
	<div class="modal fade" id="MySeventhModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    		<div class="modal-dialog" style="margin-top: 100px; margin-bottom:50px;"> 
<!-- Modal Body -->
    			<div class="modal-content">
      			<div class="modal-header">
       			 	<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">
			<h2 class="header-title">Charles Jones, CEO</h2>
		<div class="container-fluid">
               <div class="row">
                    <div class="col-xs-12">
               <hr>
                    <div class="col-xs-3 text-center">
                         <img src="assets/imgs/site-imgs/user-04.jpg" class="rounded-circle" alt="" title="" class="img-fluid" />
                    </div>
               	<div class="col-xs-6 float-right">
                         <h4>Charles Jones, CEO</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>	
	<div class="row">
		<div class="col-sm-12 mt-3">
			<div class="btn-group">
				<button type="button" <a class="btn btn-default-drk btn-sm" href="###"><i class="fas fa-cog"></i> Learn More About Me</a></button>
			</div>
			<div class="btn-group">
				<button type="button" <a class="btn btn-default-lgt btn-sm" href="###"><i class="fab fa-facebook"></i> Follow Me</a></button>
			</div>
			<div class="btn-group">
				<button type="button" <a class="btn btn-default-drk btn-sm" href="###"><i class="fab fa-twitter"></i> Follow Me</a></button>
			</div>
		</div>
	</div>
<!-- Modal Footer -->
     <div class="modal-footer">
         	<button type="button" class="btn btn-default-lgt btn-sm" data-dismiss="modal">Close</button>
                  		</div>
                	</div>
              	</div>
          </div>
     </div>
	</div>

	
View Code Product Modal

	<div class="col-sm-4">
		<h2>Product Modal</h2>
<!-- Button trigger modal -->
	<button type="button" class="btn btn-default-lgt" data-toggle="modal" data-target="#Modal-product">Product Modal</button>
<!-- Modal Configuration -->	
	<div class="modal fade" id="Modal-product" tabindex="-1" role="dialog" aria-labelledby="Modal-product-label" aria-hidden="true">
  		<div class="modal-dialog modal-lg" role="document">
    			<div class="modal-content">
<!-- Modal Header -->
     <div class="modal-header">
        	<h5 class="modal-title" id="Modal-default-demo-label">Product Modal</h5>
        		<button type="button" class="close" data-dismiss="modal" aria-label="Close">
          		<span aria-hidden="true">×</span>
        		</button>
      </div>
<!-- Modal Body -->	
     <div class="container">
          <div class="row">
     	<div class="col-lg-6 col-md-6 col-sm-12 mt-5">
			<div id="wrapper">
				<img src="assets/imgs/ecom-imgs/shop-lrg-01.jpg" class="img-fluid">
			</div>
          </div>
     	<div class="col-lg-6 col-md-6 col-sm-12 mt-5 mt-md-2 text-center text-md-left">
          	<h2 class="mb-3 mt-0">Product Name</h2>
          	<h4 class="lead mt-2 mb-3 primary-color">
               	<s>$99.00</s> $49.00</h4>
          	<h4 class="mt-4"><strong>Description<strong></h4>
          	<h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus venenatis velit vestibulum massa sollicitudin auctor. Cras ac venenatis orci. Ut consequat, purus ut ultrices ultricies, nisi sem ornare quam, sed ultricies mi nisl sit amet purus.</h5>
          	<h5>Suspendisse potenti. Nunc in libero luctus, sagittis leo sit amet, volutpat lacus. Quisque a porta risus. Integer aliquet nibh vitae vestibulum accumsan.</h5>
          	<h5 class="mt-5">Care Instructions</h5>
          	<h6>Suspendisse cursus erat sed sem sagittis cursus. Etiam porta sem malesuada magna mollis euismod.</h6>
          <div class="row mt-4">   
     <div class="col-lg-4 col-md-4 col-sm-12">
          <label for="colorSelect">Color</label>
          <div class="dropdown">
  			<button class="btn btn-default-outline dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
  			<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    				<a class="dropdown-item" href="#"><input type="checkbox" value="Blue"/> Blue</a>
    				<a class="dropdown-item" href="#"><input type="checkbox" value="Black"/> Black</a>
    				<a class="dropdown-item" href="#"><input type="checkbox" value="White"/> White</a>
    				<a class="dropdown-item" href="#"><input type="checkbox" value="Turquoise"/> Turquoise</a>
    				<a class="dropdown-item" href="#"><input type="checkbox" value="Green"/> Green</a>
    				<a class="dropdown-item" href="#"><input type="checkbox" value="Pink"/> Pink</a>
    				<a class="dropdown-item" href="#"><input type="checkbox" value="Gray"/> Gray</a>
  			</div>
          </div>
     </div>
     
     <div class="col-lg-4 col-md-4 col-sm-12">
          <label for="sizeSelect">Size</label>
          <div class="dropdown">
  			<button class="btn btn-default-outline dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
  			<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    				<a class="dropdown-item" href="#"><input type="checkbox" value="Small"/> Small</a>
    				<a class="dropdown-item" href="#"><input type="checkbox" value="Medium"/> Medium</a>
    				<a class="dropdown-item" href="#"><input type="checkbox" value="Large"/> Large</a>
    				<a class="dropdown-item" href="#"><input type="checkbox" value="Extra Large"/> Extra Large</a>
  			</div>
          </div>
     </div>
     
     <div class="col-lg-4 col-md-4 col-sm-12">
          <label for="quantitySelect">Quantity</label>
               <input id="quantitySelect" type="number" class="form-control quantity  mb-4" name="" value="1">
          </div>
     </div>
              	<a href="javascript:void(0)" class="btn btn-default-drk">Add to cart</a>
            	</div>
          </div>
     </div>
<!-- Modal Footer -->
     <div class="modal-footer">
         	<button type="button" class="btn btn-default-lgt btn-sm" data-dismiss="modal">Close</button>
     </div>
  				</div>
			</div>
		</div>
	</div>

	

Carousel Modal

View Code Carousel Modal

	<div class="container">	
		<div class="row justify-content-center mt-3">
			<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-xs-6">
				<H2 class="text-center">Carousel Modal</H2>
			</div>
		</div>
	</div>
	<div class="container text-center">
      	<div class="row justify-content-center mt-3">
        		<div class="col-12 col-sm-6 col-lg-4">

              		<div class="d-flex justify-content-center">
                		<a href="#carousel-modal" class="btn btn-default-drk" data-toggle="modal" data-slide-to="0" role="button">Carousel</a>
          		</div>
        		</div>
      	</div>
    	</div>
<!-- Modal Body -->
    	<div id="carousel-modal" class="modal fade carousel slide position-absolute" data-ride="carousel" data-interval="false">
    		<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
      		<div class="modal-content">
        			<div class="modal-body">
          			<ol class="carousel-indicators">
            				<li data-target="#carousel-modal" data-slide-to="0" class="pointer active"></li>
            				<li data-target="#carousel-modal" data-slide-to="1" class="pointer"></li>
            				<li data-target="#carousel-modal" data-slide-to="2" class="pointer"></li>
          			</ol>   			
     <div class="carousel-inner">
          <div class="carousel-item active">
            	<img class="d-block img-fluid" src="assets/imgs/site-imgs/img-07.jpg" alt="First slide">
          </div>
          <div class="carousel-item">
            	<img class="d-block img-fluid" src="assets/imgs/site-imgs/img-08.jpg" alt="Second slide">
          </div>
          <div class="carousel-item">
            	<img class="d-block img-fluid" src="assets/imgs/site-imgs/img-09.jpg" alt="Third slide">
          </div>
     </div>
          	<a class="carousel-control-prev" href="#carousel-modal" role="button" data-slide="prev">
            		<span class="carousel-control-prev-icon" aria-hidden="true"></span>
          	</a>
          	<a class="carousel-control-next" href="#carousel-modal" role="button" data-slide="next">
            		<span class="carousel-control-next-icon" aria-hidden="true"></span>
          	</a>
        	</div>
<!-- Modal Footer -->
        			<div class="modal-footer px-3 pb-3 pt-0">
        				<div class="h-4 mr-auto"><strong>Carousel Title</strong></div>
          			<a href="#" role="button" data-dismiss="modal" class="btn btn-default-drk btn-sm">Close</a>
        			</div>
      		</div>
    		</div>
  	</div>

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