Bootstrap Tutorial

Bootsrap Tutorial

bootstrap cards

cards in bootstrap 4:


With bootstrap 4 .panels, .wells and .thumbnails are not supported. Use .card instead with many nice features.

Bootstrap Card Header

i am a card

The grid-system-layout:
mixed mobile tablet and desktop grid.

card flush

visible XS
Bootstrap Flush Card

i am the text, inside the padding div class card-text.

card-footer

card flush

visible XS
Bootstrap Flush Card

the .card-img-button class rounds the corner of below image

card-footer

card flush

hidden XS
Bootstrap Flush Card

there is also the class .card-img-top available.

card-footer


<!-- SECTION HOME -->	
<section class="home">
<div class="container wow pulse">
<div class="tutorial-template">
<h1 class="display-3">Bootstrap Tutorial</h1>
<img src="images/header-description.png" alt="Bootsrap Tutorial" class="img-fluid" />	   
<h1><img src="images/cards.png" class="img-fluid object-shadow" alt="bootstrap cards"></h1>	   
<p class="lead"><h4> <i class="fa fa-book" aria-hidden="true"></i>cards in bootstrap 4:</h4><br><em>
With bootstrap 4 <code>.panels</code>, <code>.wells</code> and <code>.thumbnails</code> are not supported. 
Use <code>.card</code> instead with many nice features.</em></p>	   
<div class="row">
<div class="col-12 col-sm-6 col-lg-8"> -->

Card


<div class="card">
<h3 class="card-header">Bootstrap Card Header</h3>
<div class="card-block">
<h4 class="card-title">i am a card</h4>
<p class="card-text">The grid-system-layout:<br>mixed mobile tablet and desktop grid.</p>
</div>
<div class="card-footer">bootstrap card with header and footer</div>
</div>

<!--</div> -->

Carousel


<!--  Right column Home section: Carousel - hidden-xs-down for small devices-->		  
<div class="col-6 col-lg-4 hidden-xs-down">
<!-- Carousel container -->
<div id="my-pics" class="carousel slide" data-ride="carousel" style="width:400px;height:284px;margin:auto;">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#my-pics" data-slide-to="0" class="active"></li>
<li data-target="#my-pics" data-slide-to="1"></li>
<li data-target="#my-pics" data-slide-to="2"></li>
</ol>				
<!-- Content -->
<div class="carousel-inner" role="listbox">
<!-- Slide 1 -->
<div class="carousel-item active">
<img src="images/slider1.png" class="img-fluid" alt="slider1">
</div>
<!-- Slide 2 -->
<div class="carousel-item">
<img src="images/slider2.png" class="img-fluid" alt="slider2">
</div>
<!-- Slide 3 -->
<div class="carousel-item">
<img src="images/slider3.png" class="img-fluid" alt="slider3">
</div>
</div> <!-- End carousel inner -->
<!-- Previous/Next controls -->
<a class="left carousel-control" href="#my-pics" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#my-pics" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div> <!-- End carousel inline style centering images-->
<!-- Center the image , inline style centering image-->
<style scoped>
.carousel-item img{
margin: 0 auto;
}
</style>
					
</div> <!--end right column home section: col-6 col-lg-4 hidden-xs-down -->		  
</div> <!-- End row -->		
<!-- row card-flush -->		
<div class="row">
<div class="col-6 col-sm-4">

Card flush


<div class="card card-flush" style="max-width: 202px;">
<!-- Heading -->
<div class="card-block">
<h4 class="card-title">card flush</h4>
<h6 class="card-subtitle text-muted">visible XS</h6>
</div>
<!-- Image flush, no padding because not in card-block-->
<img src="images/flush1.png" alt="Bootstrap Flush Card">
<!-- Text Content -->
<div class="card-block">
<p class="card-text">i am the text, inside the padding div class card-text.</p>
</div>
<img class="card-img-bottom" src="images/card-footer.jpg" alt="card-footer">
</div> <!-- end card flush 1 -->
</div> <!-- end col-6 col-sm-4 -->			 
<div class="col-6 col-sm-4">
<div class="card card-flush" style="max-width: 202px;">
<!-- Heading -->
<div class="card-block">
<h4 class="card-title">card flush</h4>
<h6 class="card-subtitle text-muted">visible XS</h6>
</div>
<!-- Image flush, no padding because not in card-block-->
<img src="images/flush2.png" alt="Bootstrap Flush Card">
<!-- Text Content -->
<div class="card-block">
<p class="card-text">the .card-img-button class rounds the corner of below image</p>
</div>
<img class="card-img-bottom" src="images/card-footer.jpg" alt="card-footer">
</div> <!-- end card flush 2 -->
</div> <!-- end col-6 col-sm-4 -->			
<div class="col-6 col-sm-4 hidden-xs-down">
<div class="card card-flush" style="max-width: 202px;">
<!-- Heading -->
<div class="card-block">
<h4 class="card-title">card flush</h4>
<h6 class="card-subtitle text-muted">hidden XS</h6>
</div>				 
<!-- Image flush, no padding because not in card-block-->
<img src="images/flush3.png" alt="Bootstrap Flush Card">
<!-- Text Content -->
<div class="card-block">
<p class="card-text">there is also the class .card-img-top available.</p>
</div>
<img class="card-img-bottom" src="images/card-footer.jpg" alt="card-footer">
</div> <!-- end card flush 2 -->
			 
</div> <!-- col-6 col-sm-4 hidden-xs-down -->		   
</div><!-- end row card flush -->
</div> <!-- end div tutorial template -->	  
</div><!-- end container wow pulse -->	
</section><!-- /.SECTION HOME -->
 

typography

responsive tables in bootstrap 4:


by adding the .table-responsive class to the table class a horizontal scrollbar is added for small devices.

table-inverse table-stripped table-bordered table-
hover
thead-default thead-inverse table-
sm
contextual classes
Cell Cell active Cell Cell Cell Cell Cell
Cell Cell Cell success Cell Cell info Cell
Cell danger Cell Cell Cell Cell Cell Cell
i am a
with contextual classes
small font size
table- responsive table-
bordered hidden- xs-up


<!-- SECTION TABLES -->
<section id="one" class="tables">	
<div class="container wow slideInLeft">
<div class="tutorial-template">
<h1><img src="images/tables.png" class="img-fluid" alt="typography"></h1>	   
<p class="lead"><h4> <i class="fa fa-book" aria-hidden="true"></i>responsive tables in bootstrap 4:
</h4><br><em>by adding the <code>.table-responsive</code> class to the table class
a horizontal scrollbar is added for small devices.</em></p>	
<div class="row">
<div class="col-12 col-sm-6 col-lg-8">

Tables

		
<table class="table table-responsive table-sm table-striped table-hover table-bordered">
<thead class="thead-inverse">
<tr>
<th>table-inverse</th>
<th>table-stripped</th>
<th>table-bordered</th>
<th>table-<br>hover</th>
<th>thead-default</th>
<th>thead-inverse</th>
<th>table-<br>sm</th>
<th>contextual classes</th>
</tr>
</thead>
<tfoot class="thead-default">
<tr>
<th>
			   
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#table-inverse">info</button>			 
<!-- The modal table inverse-->
<div class="modal fade" id="table-inverse" tabindex="-1" role="dialog" aria-labelledby="modalLabelSmall" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="modalLabelSmall">table-inverse</h4>
</div>
<div class="modal-body">By adding the <code>.table-inverse</code> class to the table class you can change table colors.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-sm" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div><!-- end modal -->

</th>
<th>
			   
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#table-stripped">info</button>				 
<!-- The modal table stripped-->
<div class="modal fade" id="table-stripped" tabindex="-1" role="dialog" aria-labelledby="modalLabelSmall" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="modalLabelSmall">table-stripped</h4>
</div>
<div class="modal-body">By adding the <code>.table-stripped</code> 
class to the table class you can alter the background-color for rows.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-sm" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div><!-- end modal -->
	
</th>
<th>
			
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#table-bordered">info</button>				  
<!-- The modal table bordered-->
<div class="modal fade" id="table-bordered" tabindex="-1" role="dialog" aria-labelledby="modalLabelSmall" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="modalLabelSmall">table-bordered</h4>
</div>
<div class="modal-body">By adding the <code>.table-bordered</code> class to the table class you can add borders.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-sm" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div><!-- end modal -->

</th>
<th>
				
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#table-hover">info</button>			  
<!-- The modal table hover -->
<div class="modal fade" id="table-hover" tabindex="-1" role="dialog" aria-labelledby="modalLabelSmall" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="modalLabelSmall">table-hover</h4>
</div>
<div class="modal-body">By adding the <code>.table-hover</code> class to the table class the row colors change by mouse over.
</div>
<div class="modal-footer"><button type="button" class="btn btn-primary btn-sm" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div><!-- end modal -->

</th>
<th>
			
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#thead-default">info</button>				  
<!-- The modal thead default-->
<div class="modal fade" id="thead-default" tabindex="-1" role="dialog" aria-labelledby="modalLabelSmall" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="modalLabelSmall">thead default</h4>
</div>
<div class="modal-body">By adding the <code>.thead-default</code> 
class to the table class thead bgcolor change to default (lightblue).
</div>
<div class="modal-footer"><button type="button" class="btn btn-primary btn-sm" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div><!-- end modal -->

</th>
<th>
				
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#thead-inverse">info</button>				  
<!-- The modal thead inverse-->
<div class="modal fade" id="thead-inverse" tabindex="-1" role="dialog" aria-labelledby="modalLabelSmall" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="modalLabelSmall">thead inverse</h4>
</div>
<div class="modal-body">By adding the <code>.table-inverse</code> 
class to the table class thead bg color change to inverse (dark).
</div>
<div class="modal-footer"><button type="button" class="btn btn-primary btn-sm" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div><!-- end modal -->

</th>
<th>
			
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#table-sm">info</button>				  
<!-- The modal table sm-->
<div class="modal fade" id="table-sm" tabindex="-1" role="dialog" aria-labelledby="modalLabelSmall" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="modalLabelSmall">table sm</h4>
</div>
<div class="modal-body">By adding the <code>.table-sm</code> class to the table class you can half the cellpadding
</div>
<div class="modal-footer"><button type="button" class="btn btn-primary btn-sm" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div><!-- end modal -->

</th>
<th>
			
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#contextual-classes">info</button>				  
<!-- The modal contextual classes-->
<div class="modal fade" id="contextual-classes" tabindex="-1" role="dialog" aria-labelledby="modalLabelSmall" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="modalLabelSmall">contextual classes</h4>
</div>
<div class="modal-body">By adding the contextual-classes like <
code>.table-active</code>, <code>.table-success</code>, <code>.table-info</code>,
<code>.table-danger</code>, <code>.table-warning</code> to td classes you can change td background-colors.
</div>
<div class="modal-footer"><button type="button" class="btn btn-primary btn-sm" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div><!-- end modal -->

</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
<td class="table-active">active</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td class="table-success">success</td>
<td>Cell</td>
<td>Cell</td>
<td class="table-info">info</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td class="table-danger">danger</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td class="table-warning">Cell</td>
</tr>
</tbody>			
</table><!-- end table table-responsive table-sm table-striped table-hover table-bordered -->

</div><!-- end col-12 col-sm-6 col-lg-8 -->		
<!-- Right column, table section -->	
<div class="col-6 col-lg-4 hidden-xs-down">

Right Column Table

		
<table class="table table-bordered table-responsive small-table">
<thead class="thead-default">
<tr>
<th>i</th>
<th>am</th>
<th>a</th>
</tr>
</thead>
<tfoot class="thead-default">
<tr>
<th>with</th>
<th>contextual</th>
<th>classes</th>
</tr>
</tfoot>
<tbody>
<tr>
<td class="table-info">small</td>
<td class="table-info">font</td>
<td class="table-info">size</td>
</tr>
<tr>
<td class="table-danger">table-</td>
<td class="table-danger">responsive</td>
<td class="table-danger">table-</td>
</tr>
<tr>
<td class="table-warning">bordered</td>
<td class="table-warning">hidden-</td>
<td class="table-warning">xs-up</td>
</tr>
</tbody>		  
</table><!-- end table table-bordered table-responsive small-table -->

</div><!-- end right column, table section: col-6 col-lg-4 hidden-xs-down -->		
</div><!-- end row -->	  
</div><!-- end div tutorial template -->	 
</div><!-- /.container -->  
</section><!-- end section tables -->

Media

nested media objects in bootstrap 4:


you can add nested media opjects in various ways and image-alignements to your website. The alignement classes are: .media-left, .media-right, .media-middle, .media-bottom. The.media-object class should be added to the media you want to use. i.g. audio,video,image,canvas.

Media Noten

Media Object

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.

Media Video

Nested Media Object

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.

Media Audio

Nested Media Object

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.

Media Noten

Nested Media Object

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.

Media Object

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.

media Noten

Media Object

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.

Media Noten

slider1

responsive embeded in bootstrap 4:


With adding .embed-responsive you can add external content with iframes, objcts or videos to your side. Just ad the class to your div. You ae also able to specify the ratio i.e .responsive-embed-16by9, .responsive-embed-4by3

Video from a brassplayers course.
copyright - web-complett.de 2017


<!-- SECTION MEDIA -->	
<section id="two" class="media">	
<div class="container wow rotateInDownRight">	
<div class="tutorial-template">
<h1><img src="images/media.png" class="img-fluid" alt="Media"></h1>	   
<p class="lead"><h4><i class="fa fa-book" aria-hidden="true"></i>
nested media objects in bootstrap 4:</h4><br><em>you can add nested media opjects in various ways
and image-alignements to your website. The alignement classes are: <code>.media-left</code>,
<code>.media-right</code>, <code>.media-middle</code>, <code>.media-bottom</code>.
The<code>.media-object</code> class should be added to the media you want to use. i.g. <code>
audio</code>,<code>video</code>,<code>image</code>,<code>canvas</code>.</em></p>				  
<!-- Nested media objects -->		  
<div class="row">
<div class="col-sm-8">

Media Objects (nested media)

		
<div class="media">
<a class="media-left" href="#">
<img class="media-object object-shadow" src="images/media-noten.png" alt="Media Noten">
</a>
<div class="media-body">
<h4 class="media-heading">Media Object</h4>
<p>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.</p>
<!-- Start Nested Media Object -->
<div class="media">
<a class="media-left" href="#">
<img class="media-object object-shadow" src="images/media-video.png" alt="Media Video">
</a>
<div class="media-body">
<h4 class="media-heading">Nested Media Object</h4>
<p>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.</p>
</div>
</div>
<div class="media">
<a class="media-left" href="#">
<img class="media-object object-shadow" src="images/media-audio.png" alt="Media Audio">
</a>
<div class="media-body">
<h4 class="media-heading">Nested Media Object</h4>
<p>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.</p>
</div>
</div>			   
<!-- End Nested Media Object -->				  
</div> <!-- end media body -->				
</div> <!-- end media -->			 
<!-- beginn not nested after nested -->			 
<a class="media-left" href="#">
<img class="media-object object-shadow" src="images/media-noten.png" alt="Media Noten">
</a>
<div class="media-body">
<h4 class="media-heading">Nested Media Object</h4>
<p>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.</p>
</div>			   
<!--start media right -->			  
<div class="media">
<div class="media-body">
<h4 class="media-heading">Media Object</h4>
<p>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.</p>
</div>
<a class="media-right" href="#">
<img class="media-object object-shadow" src="images/media-noten.png" alt="media Noten">
</a>
</div>	
<div class="media">
<div class="media-body">
<h4 class="media-heading">Media Object</h4>
<p>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.</p>
</div>
<a class="media-right" href="#">
<img class="media-object object-shadow" src="images/media-noten.png" alt="Media Noten">
</a>
</div>	
</div> <!-- end col-sm-8 -->
			
<!-- right column media section -->			
<div class="col-sm-4">
<h1><img src="images/responsive-embeded.png" class="img-fluid object-shadow" alt="slider1"></h1>
<p class="lead"><h4> <i class="fa fa-book" aria-hidden="true"></i>responsive embeded in bootstrap 4:</h4><br>
<em>With adding <code>.embed-responsive</code> you can add external content with iframes, objcts or videos to your side.
Just ad the class to your div. You ae also able to specify the ratio i.e <code>.responsive-embed-16by9</code>,
<code>.responsive-embed-4by3</code></em></p>

Columns right media: embed responsive (Video)

				 
<div class="embed-responsive embed-responsive-4by3 object-shadow">		
<!-- Video -->
<video poster="images/hesselberg-video.png" controls="controls"> 
<source src="http://web-complett.de/html5_css3/video/020.mp4video.mp4" type="video/mp4">  
<source src="http://web-complett.de/html5_css3/video/020.theora.ogv" type="video/ogg">
<source src="http://web-complett.de/html5_css3/video/020.mp4video.webmvp8.webm" type="video/webm" />  
Dein Browser ist leider nicht mit HTML5 kompatibel.  
</video>
</div>
<small class="text-muted">Video from a brassplayers course. <br>copyright - web-complett.de 2017</small>				 
</div> <!-- end right column media section: col-sm-4 -->
			
</div> <!-- end row -->		 
</div><!-- end tutorial-template -->		
</div><!-- /.container -->	  
</section>

slider1

dynamic content in bootstrap 4:


There are several ways to add dynamic content to your website: collapse (accordions), tabbable pans, modals and scrollspay. With the following accordion i will show some of theme an also some other nice features from bootstrap 4 alpha.

Button: styles, outline, elements, size
button
styles
button
outline
button
elements
Anchor
 
 
   
Button size
large default small
Block level Buttons
button block level
Disabled buttons Buttons
button link disabled button button disabled button input disabled
link

just add thr class disabled to the button link and disabled="disabled" to the button or input element to disable theme.

btw, you can also use buttons as checkboxes oder radio buttons by altering the input-type to input type="checkbox" or input type="radio"

in this tablist i also show the bootstrap tooltip and the boostrap popover in diffrent data-placemnets (buttom, left, right). Just click ore mouseover the buttons :-)

popover: just add to your button or link title="title popover" data-toggle="popover" data-placement="bottom" data-content="the content of the popover"

tooltip: just add to your button or link data-toggle="tooltip" title="Your title"

Nav Base

There are two ways to add the base nav to your website. You can add a vertical nav by using the ul Element or a horizontal nav by using the nav Element.

There is also the possibility of an inline nav with predifined spaces, when you use the nav-inlineElement for both nav's

Basic Nav ul Example
Basic Nav Nav (inline) Example
Tabs

You can use nav-tabs to show a tabbed nav

Tabbed Nav
Pills

You can use nav-pills to show a pilled nav

Pilled Nav

 

In this example,there is also a dropdown menu implemented and the the disabled link CSS3 nav-link disabled

Modal's

In Bootstrap you have the possibility to show content in a special modal window when you click the modal button.

Modal
Modal Small Modal
Large Modal Without Effect

The first modal is a default modal in size with footer and close button.

The second modal is a small Modal in size without footer. Just add to the modal-dialog modal-sm

The third modal is a large modal in size, in this case without footer. Just add modal-lg to the modal dialog

The fourth modal is a modal without Fade-Effect. Just remove fade from the modal class.

For more information regarding dynamic content with bootstrap 4 please visit bootstrap 4 alpha or quackit.com

Please note that bootstrap is in alpha 4 status,that means dont use it on a productive site until final release bootstrap 4 is published.

tabbable panes / pills in bootstrap 4:


you can order or show your content in tabbable panes or pills (usefull for small devices)to navigate content without scrolling.

Button Groups Horizontal

Button Groups Vertical

just add verticalto the btn-group class class="btn-group-vertical"

Button Toolbar

you can combine btn-groups by nest theme into one single - toolbar

Button Toolbar


<!-- SECTION DYNAMIC CONTENT -->
<section id="three" class="dynamic-content">
<div class="container wow rotateInDownLeft">	
<div class="tutorial-template">
<h1><img src="images/dynamic-content.png" class="img-fluid" alt="slider1"></h1>	   
<p class="lead"><h4> <i class="fa fa-book" aria-hidden="true"></i>dynamic content in bootstrap 4:
</h4><br> <em>There are several ways to add dynamic content to your website: <code>collapse</code> (accordions),
<code>tabbable pans</code>, <code>modals</code> and <code>scrollspay</code>.
With the following accordion i will show some of theme an also some other nice features from bootstrap 4 alpha.</em></p>			
<!-- start accordion section dynamic content-->		
<div class="row">
<div class="col-sm-8">

Collaps: 1. Accordion Buttons


<div id="faq" role="tablist" aria-multiselectable="true">		   
<!-- 1. Card Accordion Buttons -->					
<div class="card">			
<div class="card-header" role="tab" id="questionOne">
<h5 class="card-title">
<a data-toggle="collapse" data-parent="#faq" href="#answerOne" aria-expanded="false" aria-controls="answerOne">
<i class="ion-arrow-down-a more-less"></i> Buttons</a>			   
</h5>
</div>
<div id="answerOne" class="collapse" role="tabcard" aria-labelledby="questionOne">
<div class="card-block">
<!-- container 2 column -->
<div class="container">
<div class="row">
<div class="col-sm-6">

Start 1. Column - 1. Accordion - Buttons


<h5><i class="fa fa-hashtag"></i> Button: styles, outline, elements, size</h5>
<table class="table table-sm table-responsive">
<thead>
<tr>
<th>button<br>styles</th>
<th>button<br>outline</th>
<th>button<br>elements</th>
</tr>
</thead>
<tbody>
<tr>

Buttons - styles-outline-elements


<td><button type="button" class="btn btn-primary btn-sm" title="style button primary" data-toggle="popover" data-placement="right" data-content="class='btn btn-primary'">Primary</button></td>
<td><button type="button" class="btn btn-outline-primary btn-sm" title="button outline primary" data-toggle="popover" data-placement="bottom" data-content="class='btn btn-outline-primary'">Primary</button></td>
<td><a class="btn btn-primary btn-sm" href="#" role="button" data-toggle="tooltip" data-placement="top" title="button anchor: class='btn btn-primary href='#' role='button'">Anchor</a></td>
</tr>
<tr>
<td><button type="button" class="btn btn-secondary btn-sm" title="style button secondary" data-toggle="popover" data-placement="right" data-content="class='btn btn-secondary'">Secondary</button></td>
<td><button type="button" class="btn btn-outline-secondary btn-sm" title="button outline secondary" data-toggle="popover" data-placement="bottom" data-content="class='btn btn-outline-secondary'">Secondary</button></td>
<td><button class="btn btn-primary btn-sm" type="submit" data-toggle="tooltip" data-placement="top" title="button button: class='btn btn-primary type='submit'">Button</button></td>
</tr>
<tr>
<td><button type="button" class="btn btn-info btn-sm" title="style button info" data-toggle="popover" data-placement="right" data-content="class='btn btn-info'">Info</button></td>
<td><button type="button" class="btn btn-outline-info btn-sm" title="button outline info" data-toggle="popover" data-placement="bottom" data-content="class='btn btn-outline-info'">Info</button></td>
<td><input class="btn btn-primary btn-sm" type="button" value="Input" data-toggle="tooltip" data-placement="top" title="button input: class='btn btn-primary type='button' value='Input'"></td>
</tr>
<tr>
<td><button type="button" class="btn btn-success btn-sm" title="style button primary" data-toggle="popover" data-placement="right" data-content="class='btn btn-success'">Success</button></td>
<td><button type="button" class="btn btn-outline-success btn-sm" title="button outline success" data-toggle="popover" data-placement="bottom" data-content="class='btn btn-outline-success'">Success</button></td>
<td><input class="btn btn-primary btn-sm" type="submit" value="Submit" data-toggle="tooltip" data-placement="top" title="button submit: class='btn btn-primary type='submit' value='Submit'"></td>
</tr>
<tr>
<td><button type="button" class="btn btn-warning btn-sm" title="style button warning" data-toggle="popover" data-placement="right" data-content="class='btn btn-warning'">Warning</button></td>
<td><button type="button" class="btn btn-outline-warning btn-sm" title="button outline warning" data-toggle="popover" data-placement="bottom" data-content="class='btn btn-outline-warning'">Warning</button></td>
<td> </td>
</tr>
<tr>
<td><button type="button" class="btn btn-danger btn-sm" title="style button danger" data-toggle="popover" data-placement="right" data-content="class='btn btn-danger'">Danger</button></td>
<td><button type="button" class="btn btn-outline-danger btn-sm" title="button outline danger" data-toggle="popover" data-placement="bottom" data-content="class='btn btn-outline-danger'">Danger</button></td>
<td> </td>
</tr>
<tr>
<td><button type="button" class="btn btn-link btn-sm" title="style button link" data-toggle="popover" data-placement="right" data-content="class='btn btn-link'">Link</button></td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>

Start 1. Accordion - Button Size


<h5><i class="fa fa-hashtag" aria-hidden="true"></i> Button size</h5>
<table class="table table-sm table-responsive">
<thead>
<tr>
<th>large</th>
<th>default</th>
<th>small</th>
</tr>
</thead>
<tbody>
<tr>

Button Size


<td><button type="button" class="btn btn-success btn-sm" title="button small" data-toggle="popover" data-placement="right" data-content="class='btn btn-success btn-small'">Small</button></td>
<td><button type="button" class="btn btn-success" title="button default" data-toggle="popover" data-placement="right" data-content="class='btn btn-success'">Default</button></td>
<td><button type="button" class="btn btn-success btn-lg" title="button large" data-toggle="popover" data-placement="right" data-content="class='btn btn-success btn-lg'">Large</button></td>

</tr>
</tbody>
</table>
</div><!--end first column card buttons-->	  
<div class="col-sm-6">

Start 2. Column - 1. Accordion - Block level Buttons


<h5><i class="fa fa-hashtag" aria-hidden="true"></i> Block level Buttons</h5>
<table class="table table-sm table-responsive">
<thead>
<tr>
<th>button block level</th>
</tr>
</thead>
<tbody>
<tr>

Block level Buttons


<td><button type="button" class="btn btn-danger btn-lg btn-block " title="button block level" data-toggle="popover" data-placement="bottom" data-content="class='btn btn-danger btn-lg btn-block'">Block level button</button></td>

</tr>
</tbody>
</table>

Start 1. Accordion - Disabled Buttons


<h5><i class="fa fa-hashtag" aria-hidden="true" ></i> Disabled buttons Buttons</h5>
<table class="table table-sm table-responsive">
<thead>
<tr>
<th>button link disabled</th>
<th>button button disabled</th>
<th>button input disabled</th>
</tr>
</thead>
<tr>

Disabled Buttons


<td><a href="#" class="btn btn-primary btn-sm disabled" role="button" title="button link disabled" data-toggle="popover" data-placement="bottom" data-content="class='btn btn-primary btn-sm disabled'">link</a></td>
<td><button type="button" class="btn btn-sm btn-primary" disabled="disabled" title="button button disabled" data-toggle="popover" data-placement="bottom" data-content="class='btn btn-sm btn-primary' disabled='disabled'">button</button></td>
<td><input type="button" class="btn btn-sm btn-primary" disabled="disabled" value="input" title="button input disabled" data-toggle="popover" data-placement="bottom" data-content="class='btn btn-sm btn-primary' disabled='disabled' value='input'"></td>

</tr>
</tbody>
</table>
<p>just add thr class <code>disabled</code> to the button link and <code>disabled="disabled"</code> to the button or input element to disable theme.</p>
<p>btw, you can also use buttons as checkboxes oder radio buttons by altering the input-type to <code>input type="checkbox"</code> or <code>input type="radio"</code></p>
</div><!-- end second column  buttons -->          
</div><!-- end inner row -->        
</div><!-- end container 2 column  -->		  
<!-- container alerts -->		  
<div class="container">
<div class="row">
<div class="col-sm-12">

Start 1. Accordion - Tooltip - Popover

 
<p class="alert alert-info">in this tablist i also show the bootstrap tooltip and the boostrap popover in diffrent data-placemnets
(buttom, left, right). Just click ore mouseover the buttons :-)<p>
<p class="alert alert-info">popover: just add to your button or link
<code>title="title popover" data-toggle="popover" data-placement="bottom" data-content="the content of the popover"</code></p>
<p class="alert alert-info">tooltip: just add to your button or link
<code>data-toggle="tooltip" title="Your title"</code></p>
 		    
</div><!-- End div col-sm-12 -->		   
</div><!-- end row -->		 
</div><!-- end container alerts-->		             
</div> <!-- end card-block -->             
</div> <!-- end div id answerone -->          
</div><!-- end  card buttons-->		   		   

Collaps 2. Accordion - Navs

 		
<!-- 2. Card Accordion Nav -->			
<div class="card">			
<div class="card-header" role="tab" id="questionTwo">
<h5 class="card-title">
<a class="collapsed" data-toggle="collapse" data-parent="#faq" href="#answerTwo" aria-expanded="false" aria-controls="answerTwo">
<i class="ion-arrow-down-a more-less"></i>Navs</a>
</h5>
</div>
<div id="answerTwo" class="collapse" role="tabcard" aria-labelledby="questionTwo">
<div class="card-block">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<h5><i class="fa fa-hashtag" aria-hidden="true"></i> Nav Base</h5>
<p>There are two ways to add the base nav to your website. You can add a vertical nav by using the <code>ul</code>
Element or a horizontal nav by using the <code>nav</code> Element.</p>
<p>There is also the possibility of an inline nav with predifined spaces, when you use the <code>nav-inline</code>
Element for both nav's</p>

Start Table - Navs Base


<table class="table table-sm table-responsive">
<thead>
<tr>                    
<th>
Basic Nav ul Example
</th>
</tr>
</thead>
<tbody>
<tr>
<td>

Navs Base


<ul class="nav">	
<li class="nav-item">
<a class="nav-link active" href="#">HTML5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CSS3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SASS</a>
</li>
</ul>

</td>
</tr>
</tbody>
</table>

Start Table Navs Inline


<table class="table table-sm table-responsive">
<thead>
<tr>                    
<th>
Basic Nav Nav (inline) Example
</th>
</tr>
</thead>
<tbody>
<tr>
<td>

Navs Inline


<nav class="nav-inline">
<a class="nav-link active" href="#">HTML5</a>
<a class="nav-link" href="#">CSS3</a>
<a class="nav-link" href="#">SASS</a>
</nav>

</td>
</tr>
</tbody>
</table>

Start 2. Accordion - Tabs


<h5><i class="fa fa-hashtag" aria-hidden="true"></i> Tabs</h5>
<p>You can use <code>nav-tabs</code> to show a tabbed nav</p>
<table class="table table-sm table-responsive">
<thead>
<tr>                    
<th>
Tabbed Nav
</th>
</tr>
</thead>
<tbody>
<tr>
<td>

Tabs


<ul class="nav nav-tabs">	
<li class="nav-item">
<a class="nav-link active" href="#">HTML5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CSS3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SASS</a>
</li>
</ul>

</td>
</tr>
</tbody>
 </table>
 

Start 2. Accordion - Pills


<h5><i class="fa fa-hashtag" aria-hidden="true"></i> Pills</h5>
<p>You can use <code>nav-pills</code> to show a pilled nav</p>
<table class="table table-sm table-responsive">
<thead>
<tr>                    
<th>
Pilled Nav
</th>
</tr>
</thead>
<tbody>
<tr>
<td>

Pills


<ul class="nav nav-pills">	
<li class="nav-item">
<a class="nav-link active" href="#">HTML5</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">CSS3</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
SASS
</a>
<div class="dropdown-menu" aria-labelledby="Preview">
<a class="dropdown-item" href="#">Bootstrap</a>
<a class="dropdown-item" href="#">LESS</a>
</div>
</li>
</ul>

<p> </p>
<p>In this example,there is also a dropdown menu implemented and the the disabled link CSS3 <code>nav-link disabled</code></p>
</td>
</tr>
</tbody>
</table>
</div><!-- end column -->
</div><!-- end inner row -->
</div><!--end container fluid -->            
</div><!-- end card-block -->            
</div><!-- end div id question two -->			
</div><!--end card nav -->

Collaps: 3. Accordion Modal


<!-- 3. Accordion Card: Modal -->			
<div class="card">						
<div class="card-header" role="tab" id="questionThree">
<h5 class="card-title">
<a class="collapsed" data-toggle="collapse" data-parent="#faq" href="#answerThree" aria-expanded="true" aria-controls="answerThree">
<i class="ion-arrow-down-a more-less"></i> Modal</a>
</h5>
</div>
<div id="answerThree" class="collapse in" role="tabcard" aria-labelledby="questionThree">
<div class="card-block">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<h5><i class="fa fa-hashtag" aria-hidden="true"></i> Modal's</h5>
<p>In Bootstrap you have the possibility to show content in a special modal window when you click the modal button.</p>				   
<table class="table table-sm table-responsive">
<thead>
<tr>                    
<th>Modal</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Modal</td>
<td>Small Modal</td>
</tr>
<tr>
<td>

Modal Default

				   
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#ModalDefault">Click Me</button>                        
<!-- The modal default-->
<div class="modal fade" id="ModalDefault" tabindex="-1" role="dialog" aria-labelledby="modalLabeldefault" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h5 class="modal-title" id="modalLabeldefault">Modal Default</h4>
</div>
<div class="modal-body">
I am a Modal default.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

</td>
<td>

Modal Small


<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#ModalSmall">Click Me</button>                        
<!-- The modal small-->
<div class="modal fade" id="ModalSmall" tabindex="-1" role="dialog" aria-labelledby="modalLabelSmall" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h5 class="modal-title" id="modalLabelSmall">Modal Small</h4>
</div>
<div class="modal-body">
I am a Modal small (without footer).
</div>
</div>
</div>
</div>

</td>
</tr>
<tr>
<td>Large Modal</td>
<td>Without Effect</td>
</tr>
<tr>
<td>

Modal Large

					    
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#ModalLarge">Click Me</button>                        
<!-- The modal large-->
<div class="modal fade" id="ModalLarge" tabindex="-1" role="dialog" aria-labelledby="modalLabelLarge" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h5 class="modal-title" id="modalLabelLarge">ModalLarge</h4>
</div>
<div class="modal-body">
I am a Modal large.
</div>
</div>
</div>
</div>

</td>
<td>

Modal Without Fade

					    
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#ModalWithoutFade">Click Me</button>                         
<!-- The modal no-fade-->
<div class="modal" id="ModalWithoutFade" tabindex="-1" role="dialog" aria-labelledby="modalLabelWithoutFade" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h5 class="modal-title" id="modalLabelWithoutFade">Modal no-fade</h4>
</div>
<div class="modal-body">
I am a Modal without fade-in effect.
</div>
</div>
</div>
</div>

</td>
</tr>
</tbody>
</table>

Modal Description

					
<p class="alert alert-info">The first modal is a default modal in size with footer and close button.</p>
<p class="alert alert-info">The second modal is a small Modal in size without footer.
Just add to the modal-dialog <code>modal-sm</code></p>
<p class="alert alert-info">The third modal is a large modal in size, in this case without footer.
Just add <code>modal-lg</code> to the modal dialog</p>
<p class="alert alert-info">The fourth modal is a modal without Fade-Effect.
Just remove <code>fade</code> from the modal class.</p>				 
</div><!-- end col-sm-12 -->				 
</div><!-- end inner row -->				 
</div><!--end container fluid -->			  
</div><!-- end card-block -->			 
</div><!-- end div id question three -->			
</div><!--end card modal -->		   
</div> <!-- end tablist -->
</div> <!-- col-12 col-sm-6 col-lg-8 -->

Start right column section dynamic content

       
<!-- right column section dynamic content -->		 
<div class="col-sm-4">
<p class="lead"><h4><i class="fa fa-book" aria-hidden="true"></i> tabbable panes / pills in bootstrap 4:
</h4><br> <em>you can order or show your content in <code>tabbable panes</code> or <code>pills</code>
(usefull for small devices)to navigate content without scrolling.</em><p>
<p class="alert alert-warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
By page load the first tabbable pane keeps empty, dont know why, just have to do a workaround. <i class="fa fa-eye" aria-hidden="true">
</i> </p>

Tabbable-Panes

		 
<div class="tabbable-panes">
<ul id="clothing-nav" class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">
Button Groups</a></li>
<li class="nav-item">
<a class="nav-link" href="#hats" role="tab" id="hats-tab" data-toggle="tab" aria-controls="hats">Button Toolbar</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Button Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#dropdown-combine" role="tab" id="dropdown-combine-tab" data-toggle="tab" aria-controls="dropdownCombine">
Combining</a>
<a class="dropdown-item" href="#dropdown-split" role="tab" id="dropdown-split-tab" data-toggle="tab" aria-controls="dropdownSplit">Split</a>
</div>
</li>
</ul>
</div>
<!-- Content Panel -->
<div id="clothing-nav-content" class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="home" aria-labelledby="home-tab">
<p>
<h5><i class="fa fa-hashtag" aria-hidden="true" ></i> Button Groups Horizontal</h5>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary btn-sm">HTML5</button>
<button type="button" class="btn btn-primary btn-sm">CSS3</button>
<button type="button" class="btn btn-primary btn-sm">SCSS</button>
</div>
</p>
<p>
<h5><i class="fa fa-hashtag" aria-hidden="true" ></i> Button Groups Vertical</h5>
<div class="btn-group-vertical" role="group">
<button type="button" class="btn btn-primary btn-sm">HTML5</button>
<button type="button" class="btn btn-primary btn-sm">CSS3</button>
<button type="button" class="btn btn-primary btn-sm">SCSS</button>
</div>
</p>
<p>just add <code>vertical</code>to the btn-group class <code>class="btn-group-vertical"</code></p>
</div>
<div role="tabpanel" class="tab-pane fade" id="hats" aria-labelledby="hats-tab">
<p>
<h5><i class="fa fa-hashtag" aria-hidden="true"></i> Button Toolbar</h5>
<p>you can combine btn-groups by nest theme into one single - toolbar</p>                  
<table class="table table-sm table-responsive">
<thead>
<tr>
<th>Button Toolbar</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="btn-toolbar" role="toolbar">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary btn-sm">One</button>
<button type="button" class="btn btn-primary btn-sm">One</button>
<button type="button" class="btn btn-primary btn-sm">One</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary btn-sm">Two</button>
<button type="button" class="btn btn-primary btn-sm">Two</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>				   
</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="dropdown-combine" aria-labelledby="dropdown-combine-tab">
<p>
<h5><i class="fa fa-hashtag" aria-hidden="true"></i> Button Groups combined with Dropdown</h5>
<p>you can nest dropdowns into button groups by using a seperate btn-group inside.</p>
<p>		  
<table class="table table-sm table-responsive">
<thead>
<tr>
<th>dropdown with btn-groups</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary btn-sm">Home</button>
<button type="button" class="btn btn-primary btn-sm">Service</button>
<div class="btn-group" role="group">
<button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="about-us" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About
</button>
<div class="dropdown-menu" aria-labelledby="about-us">
<a class="dropdown-item" href="#">Portfolio</a>
<a class="dropdown-item" href="#">Impressum</a>
<a class="dropdown-item" href="#">Contact</a>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>				   
</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="dropdown-split" aria-labelledby="dropdown-split-tab">
<p>
<h5><i class="fa fa-hashtag" aria-hidden="true"></i> Split Dropdown's</h5>
<p>With button groups you can creat a split dropdown-menu</p>
<p>
<table class="table table-sm table-responsive">
<thead>
<tr>
<th>Split Dopdown's</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="btn-group">
<button type="button" class="btn btn-primary btn-sm">About</button>
<button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Portfolio</a>
<a class="dropdown-item" href="#">Impressum</a>
<a class="dropdown-item" href="#">Contact</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</p>
</div>
</div>

</div> <!-- end col-sm-4 -->
</div> <!-- end row -->
</div> <!-- end tutorial template -->
</div><!-- /.container -->
</section>

slider1

Bootstrap Forms / Custom Forms:


In Bootstrap 4 there are various ways to create and style your forms. Below you see some descriptions of predefined fields, styles and classes. For more information please visit Bootstrap 4alpha Forms

I am a aria-describedby="name1Help" text with the class class="form-text text-muted""
i am a small input field with the class form-control form-control-sm
I have a validation style succes, there are also two other's: danger and warning
I have the validation style warning
Textarea
i have the additional form element legendas field label (Textarea)
Custom File Input
Custom Radio Buttons
i am a fieldset Custom Radio Buttons with class="form-group", and the label class custom-radio. Each radio button has different status checked, disabled and for styling the span class custom-control-indicator
Custom Checkbocks
i am a fieldset Custom Checkboxes with class="form-group", and the label class custom-checkbox. Each checkbox has different status checked, disabled and for styling the span class custom-control-indicator
Custom Select
i am a Custom Select Element with class="custom-select", and the label class mr-sm-2 for="inlineFormCustomSelect"

 

Custom Multiple Select
i am a Custom Select Element with multiple class="custom-select", and the label class mr-sm-2 for="inlineFormCustomSelect"
i am the submit button button type=""submit, and the button class btn btn-primary btn-sm
Column sizing

You cam manipulate the columnsizing (field size) with the bootstrap grid system col classes i.e. div class="col-5"

i am input type text element within a row and div class div class="col-4"
i am input type text element within a row and div class div class="col-5"
i am input type text element within a row and div class div class="col-6"

 

Inline

You can group element like checkboxes horizontally by adding the form-check-inline class to each form-check class.

 

Readonly

By adding the readonly boolean to a field this field is not editable.

 

Much more

There are several other ways, options, fields to create or customize your forms. Please visit bootstrap 4 forms. There are also plugins extentions which works well with bootstrap 4, i.e. timepicker from angular2


<!-- SECTION FORMS -->
<section id="four" class="forms">
<div class="container wow rotateInDownRight">   
<div class="tutorial-template">
<h1><img src="images/forms.png" class="img-fluid" alt="slider1"></h1>			   	   
<p class="lead"><h4><i class="fa fa-book" aria-hidden="true"></i>Bootstrap Forms / Custom Forms:</h4>
<br><em>In Bootstrap 4 there are various ways to create and style your forms. Below you see some descriptions of predefined fields,
styles and classes. For more information please visit <a href="https://v4-alpha.getbootstrap.com/components/forms/" target="_blank">
<i class="fa fa-external-link" aria-hidden="true"></i> Bootstrap 4alpha Forms</a> </em></p>				
<!-- Start form -->		
<div class="row">
<div class="col-sm-8">

Start Form


<form>

Input Type Name with Helptext and Feedback Text - form group has danger


<div class="form-group has-danger">
<label for="exampleInputName"><h5><i class="fa fa-hashtag" aria-hidden="true"></i>
Input Type Name (i.e. name)</h5></label>
<input type="name" class="form-control form-control-danger form-control-sm" id="exampleInputName1" aria-describedby="name1Help" placeholder="First Name">
<small id="name1Help" class="form-text text-muted">I am a <code>aria-describedby="name1Help"</code>
text with the class <code>class="form-text text-muted"</code>"</small>
<div class="form-control-feedback text-muted">I am a <code>class="form-control-feedback text-muted"</code> text element</div>
</div>

Input Type Name with Helptext - form group


<div class="form-group">
<label for="exampleInputName"><h5><i class="fa fa-hashtag" aria-hidden="true"></i>Input Type Name (i.e. surname)</h5></label>
<input type="name" class="form-control form-control-sm" id="exampleInputName2" aria-describedby="name2Help" placeholder="Surname">
<small id="name2Help" class="form-text text-muted">i am a small input field with the class <code>
form-control form-control-sm</code></small>
</div>

Input Type Email with Helptext and Feedback Text - form-group has-success


<div class="form-group has-success">
<label for="exampleInputEmail1"><h5><i class="fa fa-hashtag" aria-hidden="true"></i>Input Type Email</h5></label>
<input type="email" class="form-control form-control-success form-control-sm" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">I have a validation style succes, there are also two other's: danger and warning</small>
<div class="form-control-feedback text-muted">The form-group have the class extention <code>has-success</code>
and the input field the additional class <code>form-control-success</code></div>
</div>

Input Type Password with Helptext and Feedbacktext - form-group has-warning


<div class="form-group has-warning">
<label for="exampleInputPassword1"><h5><i class="fa fa-hashtag" aria-hidden="true"></i>Input Type Password</h5></label>
<input type="password" class="form-control form-control-warning form-control-sm" id="exampleInputPassword1" aria-describedby="passwordHelp" placeholder="Password">
<small id="passwordHelp" class="form-text text-muted">I have the validation style warning</small>
<div class="form-control-feedback text-muted">The form-group have the class extention <code>has-warning</code>
and the input field the additional class <code>form-control-warning</code></div>
</div>

Textarea with Helptext and Placeholder form-group


<div class="form-group">
<legend><h5><i class="fa fa-hashtag" aria-hidden="true"></i>Textarea</h5></legend>
<label for="exampleTextarea"> Label Textarea</label>
<textarea class="form-control form-control-sm" id="exampleTextarea" rows="3" aria-describedby="textareaHelp" placeholder="am a textarea with rows='3'"></textarea>
<small id="textareaHelp" class="form-text text-muted">i have the additional form element <code>legend</code>
as field label (Textarea)</small>
</div>

Custom File Input with Helptext and Custom File Control (placeholder) - Legend


<legend><h5><i class="fa fa-hashtag" aria-hidden="true"></i>Custom File Input</h5></legend>
<div class="form-group">
<label class="custom-file">
<input type="file" id="file" class="custom-file-input form-control-sm" aria-describedby="customfileHelp">
<span class="custom-file-control"></span>
<small id="customfileHelp" class="form-text text-muted">I am a custom-file input field with the class <code>custom-file-input</code>.
The placehoder "choose file..." is predifined in the <code>span class="custom-file-control"</code></small>
</label>
</div>

Fieldset form-group Custom Radio Buttons with custom-control-description and custom-control-indicator (style) - different status


<fieldset class="form-group">
<legend><h5><i class="fa fa-hashtag" aria-hidden="true"></i>Custom Radio Buttons</h5></legend>
<label class="custom-control custom-radio">
<input id="radio1" name="radio" type="radio" class="custom-control-input" checked>
<span class="custom-control-indicator"></span>
<span class="custom-control-description">checked</span>
</label>
<label class="custom-control custom-radio">
<input id="radio2" name="radio" type="radio" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">default</span>
</label>
<label class="custom-control custom-radio">
<input id="radio3" name="radio" type="radio" class="custom-control-input" disabled>
<span class="custom-control-indicator"></span>
<span class="custom-control-description">disabled</span>
</label>
<small class="form-text text-muted">i am a <code>fieldset</code> Custom Radio Buttons with <code>class="form-group"</code>,
and the label class <code>custom-radio</code>.
Each radio button has different status <code>checked</code>, <code>disabled</code>
and for styling the span class <code>custom-control-indicator</code></small>
</fieldset>

Fieldset form-group Checkboxes with custom-control-description and custom-control-indicator (style) - different status


<fieldset class="form-group">
<legend><h5><i class="fa fa-hashtag" aria-hidden="true"></i>Custom Checkbocks</h5></legend>
<label class="custom-control custom-checkbox">
<input id="checkbock1" type="checkbox" class="custom-control-input" checked>
<span class="custom-control-indicator"></span>
<span class="custom-control-description">checked</span>
</label>
<label class="custom-control custom-checkbox">
<input id="checkbock2" type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">default</span>
</label>
<label class="custom-control custom-checkbox">
<input id="checkbock3" type="checkbox" class="custom-control-input" disabled>
<span class="custom-control-indicator"></span>
<span class="custom-control-description">disabled</span>
</label>
<small class="form-text text-muted">i am a <code>fieldset</code> Custom Checkboxes with <code>class="form-group"</code>,
and the label class <code>custom-checkbox</code>. Each checkbox has different status <code>
checked</code>, <code>disabled</code> and for styling the span class <code>custom-control-indicator</code></small>
</fieldset>

Fieldset form-group Custom Select with label class, legend


<fieldset class="form-group">
<legend><h5><i class="fa fa-hashtag" aria-hidden="true"></i>Custom Select</h5></legend>
<label class="mr-sm-2" for="inlineFormCustomSelect">Select</label>
<select class="custom-select mb-2 mr-sm-2 mb-sm-0 form-control-sm" id="inlineFormCustomSelect">
<option selected>Choose...</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<small class="form-text text-muted">i am a Custom Select Element with <code>class="custom-select"</code>,
and the label class <code>mr-sm-2</code> <code>for="inlineFormCustomSelect"</code></small>
<p> </p>

Fieldset form-group Custom Select Multiple with label class, legend


<legend><h5><i class="fa fa-hashtag" aria-hidden="true"></i>Custom Multiple Select</h5></legend>
<label class="mr-sm-2" for="inlineFormCustomSelect">Select</label>
<select multiple class="custom-select mb-2 mr-sm-2 mb-sm-0 form-control-sm" id="inlineFormCustomSelect">
<option selected>Multiple Choose...</option>
<option value="1">Multi 1</option>
<option value="2">Multi 2</option>
<option value="3">Multi 3</option>
</select>
<small class="form-text text-muted">i am a Custom Select Element with <code>multiple class="custom-select"</code>,
and the label class <code>mr-sm-2</code> <code>for="inlineFormCustomSelect"</code></small>
</fieldset>

Button Type Submit - btn-sm


<div class="form-group">
<button type="submit" class="btn btn-primary btn-sm">Submit</button>
</div>

<small class="form-text text-muted">i am the submit button <code>button type=""submit</code>,
and the button class <code>btn btn-primary btn-sm</code></small>         
</form><!-- end form -->		 
</div><!-- end div col-sm-8 -->

Start right column section forms

		         
<!-- right column section forms -->		
<div class="col-sm-4">		
<legend><h5><i class="fa fa-hashtag" aria-hidden="true"></i>Column sizing</h5></legend>
<p><em>You cam manipulate the columnsizing (field size) with the bootstrap grid system col classes i.e.
<code>div class="col-5"</code></em></p>

Column Sizing Forms


<div class="row">
<div class="col-4">
<input type="text" class="form-control form-control-sm" placeholder=".col-4">
</div>
</div>
<small class="form-text text-muted">i am input type text element within a row and div class <code>div class="col-4"</code></small>
<div class="row">
<div class="col-5">
<input type="text" class="form-control form-control-sm" placeholder=".col-5">
</div>
</div>
<small class="form-text text-muted">i am input type text element within a row and div class <code>div class="col-5"</code></small>
<div class="row">
<div class="col-6">
<input type="text" class="form-control form-control-sm" placeholder=".col-6">
</div>
</div>
<small class="form-text text-muted">i am input type text element within a row and div class <code>div class="col-6"</code></small>
<p> </p>

<legend><h5><i class="fa fa-hashtag" aria-hidden="true"></i>Inline</h5></legend>
<p><em>You can group element like checkboxes horizontally by adding the <code>form-check-inline</code>
class to each form-check class.</em></p>

Inline Checkboxes


<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
</div>
<div class="form-check form-check-inline disabled">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled> 3
</label>
</div>

<p> </p>
<legend><h5><i class="fa fa-hashtag" aria-hidden="true"></i>Readonly</h5></legend>
<p><em>By adding the <code>readonly</code> boolean to a field this field is not editable.</em></p>

Readonly


<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

<p> </p>
<legend><h5><i class="fa fa-hashtag" aria-hidden="true"></i>Much more</h5></legend>
<p><em>There are several other ways, options, fields to create or customize your forms.
Please visit <a href="https://v4-alpha.getbootstrap.com/components/forms/" target="_blank"><i class="fa fa-external-link" aria-hidden="true">
</i> bootstrap 4 forms</a>.
There are also plugins extentions which works well with bootstrap 4, i.e. timepicker from
<a href="http://valor-software.com/ng2-bootstrap/index-bs4.html#/timepicker" target="_blank">
<i class="fa fa-external-link" aria-hidden="true"></i> angular2</a></em></p>		          
</div><!-- end col-sm-4 -->		
</div><!-- end row -->      
</div><!-- end tutorial template -->      
</div><!-- container wow rotateInDownRight -->    
</div><!-- /.container -->
</section>

typography

Bootstrap Typography


In this section i will list some elements regarding the typography of boostrap. Some of them are new regarding bootstrap 4 alpha.

Display

The display textelement is new to bootstrap 4 and offers bigger sized caption's. The class="display-1 and class="display-2" are hidden-xs-down menas not shown for small devices.

Display 1

Display 2

Display 3

Display 4

Typography

Description List

Heading 1dtelement
dd element content 1
Heading 2dtelement
dd element content 2
Heading 3dtelement
dd element content 3

Lead Text

i am a class="lead" text element.

Text muted

i am a class="text-muted" text element.

More Typography

Typography

Blockquote Source- Reverse

I am a bootstrap blockquote - source element class="blockquote blockquote-reverse"with footer and cite elements.

Jürgen Hauke web-complett.de

Abbreviations

i am a abbr title="mytitle" text element with class="initialismfor smaller text

attr

HTML

More Typography

Typography

List inline

i am a list inline element ul .list-inline with li class .list-inline-item.

  • Item 1
  • Item 2
  • Item 3
Inline text elements

mark element to highlight text.

delelement for deleted text elements.

u element to underline text.

small text element.

strong text element.

em element for kursiv text.

More Typography

 

Card image overlay

Below we are cards with image class="card-image-top", image overlayimg class="card-image-overlay" and h4 class="card-title", p class="card-text". We also have clickable alert's div class="alert alert-success alert-dismissible" role="alert" with button class="close" data-miss="alert"

Bootstrapping

Why using
boostrap?

It's logic, dynamic, powerfull open framework

Bootstrapping

Why using
boostrap?

the easiest way to create responsive websites?

Donate?

please donate

if you like the tutorial


<!-- SECTION TYPOGRAPHY -->
<section id="last" class="typography">	
<div class="container wow rotateInDownLeft">	
<div class="tutorial-template">
<h1><img src="images/typography.png" class="img-fluid" alt="typography"></h1>			   
<p><h4><i class="fa fa-book" aria-hidden="true"></i>Bootstrap Typography</h4><br><em>
In this section i will list some elements regarding the typography of boostrap. 
Some of them are new regarding bootstrap 4 alpha.</em></p>		
<div class="row">
<div class="col-sm-8">
<h5><i class="fa fa-hashtag" aria-hidden="true"></i>Display</h5>
<p><em>The display textelement is new to bootstrap 4 and offers bigger sized caption's.
The <code>class="display-1</code> and <code>class="display-2"</code> are <code>hidden-xs-down</code> 
means not shown for small devices.</em></p>
<p class="card-text">

New Display Headline


<h1 class="display-1 hidden-xs-down">Display 1</h1>
<h1 class="display-2 hidden-xs-down">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1></p>

</div>
</div>
<div class="row">
<div class="col-12 col-sm-6 col-lg-8">
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-block">
<h4 class="card-title">Typography</h4>
<h5><i class="fa fa-hashtag" aria-hidden="true"></i>Description List</h5>
<p class="card-text"><dl>

Description List


<dt>Heading 1<code>dt</code>element</dt>
<dd><code>dd</code> element content 1</dd>
<dt>Heading 2<code>dt</code>element</dt>
<dd><code>dd</code> element content 2</dd>
<dt>Heading 3<code>dt</code>element</dt>
<dd><code>dd</code> element content 3</dd>
</dl>

</p>
<h5><i class="fa fa-hashtag" aria-hidden="true"></i>Lead Text</h5>

Lead Text


<p class="lead">i am a <code>class="lead"</code> text element.</p>

<h5><i class="fa fa-hashtag" aria-hidden="true"></i>Text muted</h5>

Text Muted


<p class="text-muted">i am a <code>class="text-muted"</code> text element.</p>

<a href="https://v4-alpha.getbootstrap.com/content/typography/" target="_blank" class="card-link"><
i class="fa fa-external-link" aria-hidden="true"></i> More Typography</a>           
</div><!-- end card-block -->          
</div><!-- end card -->          
</div><!-- end col-sm-6 -->        
<div class="col-sm-6">
<div class="card">
<div class="card-block">
<h4 class="card-title">Typography</h4>
<h5><i class="fa fa-hashtag" aria-hidden="true"></i>Blockquote Source- Reverse</h5>
<p class="card-text">

Blockquote Reverse


<blockquote class="blockquote blockquote-reverse">
<p> I am a  bootstrap blockquote - source element <code>class="blockquote blockquote-reverse"</code>
with <code>footer</code> and <code>cite</code> elements.</p>
<footer>Jürgen Hauke <cite>web-complett.de</cite></footer>
</blockquote>

</p>
<h5><i class="fa fa-hashtag" aria-hidden="true"></i>Abbreviations</h5>
<p class="text-muted">i am a <code>abbr title="mytitle"</code> text element with <code>
class="initialism</code>for smaller text</p>

Abbreviation's


<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

<a href="https://v4-alpha.getbootstrap.com/content/typography/" target="_blank" class="card-link"><i 
class="fa fa-external-link" aria-hidden="true"></i> More Typography</a>          
</div><!-- end card-block -->           
</div><!-- end card -->         
</div><!-- end col-sm-6 -->       
</div> <!-- end row -->      
</div> <!-- end col-12 col-sm-6 col-lg-8 -->      
<!-- right column section typography -->	   
<div class="col-sm-4 hidden-xs-down">	   
<div class="card" style="max-width: 20rem;">
<div class="card-block">
<h4 class="card-title">Typography</h4>
<h5><i class="fa fa-hashtag" aria-hidden="true"></i>List inline</h5>
<p> i am a list inline element ul <code>.list-inline</code> with li class <code>.list-inline-item</code>.
<p class="card-text">

Inline List


<ul class="list-inline">
<li class="list-inline-item">Item 1</li>
<li class="list-inline-item">Item 2</li>
<li class="list-inline-item">Item 3</li>
</ul>

<h5><i class="fa fa-hashtag" aria-hidden="true"></i>Inline text elements</h5>

Inline Text Elements


<p><code>mark</code> element to <mark>highlight</mark> text.</p>
<p><del><code>del</code>element for deleted text elements.</del></p>
<p><u><code>u</code> element to underline text.</u></p>
<p><small><code>small</code> text element.</small></p>
<p><strong><code>strong</code> text element.</strong></p>
<p><em><code>em</code> element for kursiv text.</em></p>

<!-- Links -->
<a href="https://v4-alpha.getbootstrap.com/content/typography/" target="_blank" class="card-link"> <i 
class="fa fa-external-link" aria-hidden="true"></i>More Typography</a>
</div>			
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<p> </p>

Start Image Cart Overlay


<h5><i class="fa fa-hashtag" aria-hidden="true"></i>Card image overlay</h5>
<p class="alert alert-info">Below we are cards with image <code>class="card-image-top"</code>, 
image overlay<code>img class="card-image-overlay"</code> and <code> 
h4 class="card-title"</code>, <code>p class="card-text"</code>.
We also have clickable alert's <code>div class="alert alert-success alert-dismissible" role="alert"</code> 
with button <code>class="close" data-miss="alert"</code>
</div>
<div class="col-6 col-sm-4">

Image Cart Overlay 1

		
<div class="card card-inverse text-center">
<!-- Image -->
<img class="card-img-top" src="images/bootstrapping.png" alt="Bootstrapping">
<!-- Text Overlay -->
<div class="card-img-overlay">
<h4 class="card-title">Why using<br>boostrap?</h4>
<p class="card-text">It's logic, dynamic, powerfull open framework</p>
</div>
<div class="card-block">
<div class="alert alert-success alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<small><strong>Not everything is clear?</strong><br> read the tutorial once more!</small>              
</div><!-- end alert div -->             
</div><!-- end card-block -->          
</div><!-- end card inverse -->
          
</div><!-- end col-6 col-sm-4 -->
<div class="col-6 col-sm-4">

Image Cart Overlay 2

         
<div class="card card-inverse text-center">
<!-- Image -->
<img class="card-img-top" src="images/bootstrapping.png" alt="Bootstrapping">
<!-- Text Overlay -->
<div class="card-img-overlay">
<h4 class="card-title">Why using<br>boostrap?</h4>
<p class="card-text">the easiest way to create responsive websites?</p>
</div><!-- end card-img-overlay -->
<div class="card-block">
<div class="alert alert-success alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<small><strong>Congrats!</strong><br> you've finished the tutorial!</small>
</div>             
</div><!-- end card-block -->             
</div><!-- end card inverse -->		   
 
</div><!-- end col-6 col-sm-4 -->
<div class="col-6 col-sm-4">

Donate Paypal Card

   
<div class="card card-inverse text-center">
<div class="card-header">
<h4 class="card-text">Donate?</h4>
</div>
<div class="card-block">
<h4 class="card-title">please donate</h4>
<p class="card-text">if you like the tutorial<br>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="B3KLGVFC6RXLY">
<input type="image" src="https://www.paypalobjects.com/de_DE/DE/i/btn/btn_donateCC_LG.gif" border="0" name="submit" 
alt="Jetzt einfach, schnell und sicher online bezahlen – mit PayPal.">
<img alt="" border="0" src="https://www.paypalobjects.com/de_DE/i/scr/pixel.gif" width="1" height="1">
</form>
</p>
</div>
<div class="card-footer">
<span class="card-text">Thank you!</span>           
</div><!-- end caed-footer -->         
</div><!-- end card inverse -->
		
</div><!-- end col-6-sm-4 -->      
</div><!-- end row -->   
</div><!-- end tutorial template -->   
</div><!-- /.container --> 
</section><!-- end section - typography -->