Milan Smudja

Thursday, May 1, 2025

Bootstrap 4 Carousel


<?php include 'header.php' ?>

<div class="container-fluid">

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="bs-4.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="bs-4.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="bs-4.jpg" class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

</div>

<?php include 'footer.php' ?>

Bootstrap 4 Forms


<?php include 'header.php' ?>

<div class="container-fluid">

<form action="blablabla.php" method="post">
	<div class="form-group">
		<label for="email">Email:</label>
		<input type="email" class="form-control" id="email">
	</div>
	
	<div class="form-group">
		<label for="password">Password</label>
		<input type="password" class="from-control" id="password">
	</div>
	
	<button type="button" class="btn btn-primary">Submit</button>
</form>

</div>

<?php include 'footer.php' ?>


<?php include 'header.php' ?>

<div class="container-fluid">

<form class= "form-inline" action="blablabla.php" method="post">
	<div class="form-group">
		<label for="email">Email:</label>
		<input type="email" class="form-control" id="email">
	</div>
	
	<div class="form-group">
		<label for="password">Password</label>
		<input type="password" class="from-control" id="password">
	</div>
	
	<button type="button" class="btn btn-primary">Submit</button>
</form>

</div>

<?php include 'footer.php' ?>

Bootstrap 4 Modals


<?php include 'header.php' ?>

<div class="container-fluid">

<button type="button" class="btn btn-primary" data-toggle="modal"
data-target="#something">Click On Me</button>

<div class="modal" id="something">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h3 class="modal-title">Title for Modal</h3>
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>
			
			<div class="modal-body">
				<h2>Some Usefull Content</h2>
			</div>
			
			<div class="modal-body">
				<h4>Some Usefull Content</h4>
				<p>Lorem ipsum bla bla bla</p>
			</div>
			
			<div class="modal-footer">
				<button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>

</div>

<?php include 'footer.php' ?>

Bootstrap 4 Navbars


<?php include 'header.php' ?>

<div class="container-fluid">

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
	<ul class="navbar-nav">
		<li class="nav-item"><a class="nav-link" href="#">Generic 1</a></li>
		<li class="nav-item"><a class="nav-link" href="#">Generic 2</a></li>
		<li class="nav-item"><a class="nav-link" href="#">Generic 3</a></li>
	</ul>
</nav>

</div>

<?php include 'footer.php' ?>


<?php include 'header.php' ?>

<div class="container-fluid">

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>      
    </ul>    
  </div>
</nav>

</div>

<?php include 'footer.php' ?>

Bootstrap 4 Cards


<?php include 'header.php' ?>

<div class="container-fluid">

<div class="card">
	<div class="card-body">
		<h3 class="card-title">Title for This Card</h3>
		<p class="card-text">Something Usable Here</p>
		<a href="#" class="btn btn-primary">Link Somewhere</a>
	</div>
</div>

</div>

<?php include 'footer.php' ?>


<?php include 'header.php' ?>

<div class="container-fluid">

<div class="card">
	<div class="card-header">Header for This Card</div>
	<div class="card-body">
		<h3 class="card-title">Title for This Card</h3>
		<p class="card-text">Something Usable Here</p>
		<a href="#" class="btn btn-primary">Link Somewhere</a>
	</div>
	<div class="card-footer">Footer for This Card</div>
</div>

</div>

<?php include 'footer.php' ?>


<?php include 'header.php' ?>

<div class="container-fluid">

<div class="card">
	<div class="card-header bg-info">Header for This Card</div>
	<img src="bs-4.jpg" class="card-img-top">
	<div class="card-body">
		<h3 class="card-title">Title for This Card</h3>
		<p class="card-text">Something Usable Here</p>
		<a href="#" class="btn btn-primary stretched-link">Link Somewhere</a>
	</div>
	<div class="card-footer bg-warning">Footer for This Card</div>
</div>

</div>

<?php include 'footer.php' ?>

Bootstrap 4 Pagination, Breadcrumbs


<?php include 'header.php' ?>

<div class="container-fluid">

<ul class="pagination">
	<li class="page-item"><a href="#" class="page-link">Previous</a></li>
	<li class="page-item"><a href="#" class="page-link">2</a></li>
	<li class="page-item"><a href="#" class="page-link">3</a></li>
	<li class="page-item"><a href="#" class="page-link">Next</a></li>
</ul>

</div>

<?php include 'footer.php' ?>


<?php include 'header.php' ?>

<div class="container-fluid">

<ul class="pagination justify-content-center">
	<li class="page-item"><a href="#" class="page-link">Previous</a></li>
	<li class="page-item"><a href="#" class="page-link">2</a></li>
	<li class="page-item disabled"><a href="#" class="page-link">3</a></li>
	<li class="page-item"><a href="#" class="page-link">Next</a></li>
</ul>

</div>

<?php include 'footer.php' ?>


<?php include 'header.php' ?>

<div class="container-fluid">

<ul class="breadcrumb">
	<li class="breadcrumb-item"><a href="#">2020</a></li>
	<li class="breadcrumb-item"><a href="#">August</a></li>
	<li class="breadcrumb-item"><a href="#">15</a></li>
	<li class="breadcrumb-item"><a href="#">How To Do Something</a></li>
</ul>

</div>

<?php include 'footer.php' ?>

Bootstrap 4 List Groups


<?php include 'header.php' ?>

<div class="container-fluid">

<ul class="list-group">
	<li class="list-group-item">First</li>
	<li class="list-group-item">Second</li>
	<li class="list-group-item">Third</li>
</ul>

</div>

<?php include 'footer.php' ?>


<?php include 'header.php' ?>

<div class="container-fluid">

<ul class="list-group">
	<a href="#" class="list-group-item list-group-item-action">Post A</a>
	<a href="#" class="list-group-item list-group-item-action">Post B</a>
	<a href="#" class="list-group-item list-group-item-action">Post C</a>
</ul>

</div>

<?php include 'footer.php' ?>


<?php include 'header.php' ?>

<div class="container-fluid">

<ul class="list-group">
	<a href="#" class="list-group-item list-group-item-action">Post A
		<span class="badge badge-pill badge-primary">15</span></a>
	<a href="#" class="list-group-item list-group-item-action">Post B
		<span class="badge badge-pill badge-primary">25</span></a></a>
	<a href="#" class="list-group-item list-group-item-action">Post C
		<span class="badge badge-pill badge-primary">35</span></a></a>
</ul>

</div>

<?php include 'footer.php' ?>


<?php include 'header.php' ?>

<div class="container-fluid">

<ul class="list-group">
	<a href="#" class="list-group-item list-group-item-action align-items-center">Post A
		<span class="badge badge-pill badge-primary">15</span></a>
	<a href="#" class="list-group-item list-group-item-action align-items-center">Post B
		<span class="badge badge-pill badge-danger">25</span></a></a>
	<a href="#" class="list-group-item list-group-item-action align-items-center">Post C
		<span class="badge badge-pill badge-success">35</span></a></a>
</ul>

</div>

<?php include 'footer.php' ?>

Bootstrap 4 Alerts


<?php include 'header.php' ?>

<div class="container-fluid">

<div class="alert alert-success">
	<strong>Success !!!</strong> - You just sold 100 BTC
</div>

</div>

<?php include 'footer.php' ?>


<?php include 'header.php' ?>

<div class="container-fluid">

<div class="alert alert-success">
	<button type="button" class="close" data-dismiss="alert">&times;</button>
	<strong>Success !!!</strong> - You just sold 100 BTC
</div>

</div>

<?php include 'footer.php' ?>


<?php include 'header.php' ?>

<div class="container-fluid">

<div class="alert alert-success alert-dismissible fade show">
	<button type="button" class="close" data-dismiss="alert">&times;</button>
	<strong>Success !!!</strong> - You just sold 100 BTC
</div>

</div>

<?php include 'footer.php' ?>

Bootstrap 4 Badges


<?php include 'header.php' ?>

<div class="container-fluid">

<h1>Heading H1 - <span class="badge badge-success">Test</span></h1>

</div>

<?php include 'footer.php' ?>


<?php include 'header.php' ?>

<div class="container-fluid">

<h1 class="display-1">Heading H1 - <span class="badge badge-success">Test</span></h1>

</div>

<?php include 'footer.php' ?>


<?php include 'header.php' ?>

<div class="container-fluid">

<h1>Heading H1 - <span class="badge badge-success badge-pill">Test</span></h1>

</div>

<?php include 'footer.php' ?>


<?php include 'header.php' ?>

<div class="container-fluid">

<button type="button" class="btn btn-primary">
<span class="badge badge-light">125</span>

</div>

<?php include 'footer.php' ?>


<?php include 'header.php' ?>

<div class="container-fluid">

<button type="button" class="btn btn-primary btn-lg">
Posts...<span class="badge badge-light">125</span>

</div>

<?php include 'footer.php' ?>

Bootstrap 4 Progress Bars


<?php include 'header.php' ?>

<div class="container-fluid">
<br><br>

<div class="progress">
	<div class="progress-bar" style="width: 10%"></div>
</div>
<br>
<div class="progress">
	<div class="progress-bar" style="width: 20%"></div>
</div>
<br>
<div class="progress">
	<div class="progress-bar" style="width: 40%"></div>
</div>

</div>

<?php include 'footer.php' ?>


<?php include 'header.php' ?>

<div class="container-fluid">
<br><br>

<div class="progress" style="height: 25px;">
	<div class="progress-bar bg-success" style="width: 20%"></div>
</div>
<br>
<div class="progress" style="height: 25px;">
	<div class="progress-bar bg-primary" style="width: 40%"></div>
</div>

</div>

<?php include 'footer.php' ?>


<?php include 'header.php' ?>

<div class="container-fluid">
<br><br>

<div class="progress" style="height: 25px;">
	<div class="progress-bar bg-success progress-bar-striped" style="width: 20%"></div>
</div>

</div>

<?php include 'footer.php' ?>


<?php include 'header.php' ?>

<div class="container-fluid">
<br><br>

<div class="progress" style="height: 25px;">
	<div class="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width: 20%"></div>
</div>

</div>

<?php include 'footer.php' ?>


<?php include 'header.php' ?>

<div class="container-fluid">
<br><br>

<div class="progress" style="height: 25px;">
	<div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" style="width: 10%"></div>
	<div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" style="width: 20%"></div>
	<div class="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width: 40%"></div>
</div>

</div>

<?php include 'footer.php' ?>

Bootstrap 4 Button Groups


<?php include 'header.php' ?>

<div class="container-fluid">

<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
</div>

<div class="btn-group">
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-success">Success</button>
</div>

</div>

<?php include 'footer.php' ?>


<?php include 'header.php' ?>

<div class="container-fluid">

<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
</div>

<div class="btn-group-vertical">
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-success">Success</button>
</div>

</div>

<?php include 'footer.php' ?>


<?php include 'header.php' ?>

<div class="container-fluid">

<div class="btn-group">
<button type="button" class="btn btn-primary">Menu</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split"
 data-toggle="dropdown"></button>

<div class="dropdown-menu btn btn-primary">
	<a href="#" class="dropdown-item">Sub-Menu</a>
	<a href="#" class="dropdown-item">Sub-Menu</a>
	<a href="#" class="dropdown-item">Sub-Menu</a>
</div>

</div>
</div>

<?php include 'footer.php' ?>

Bootstrap 4 Buttons


<?php include 'header.php' ?>

<div class="container-fluid">

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-success">Success</button>

</div>

<?php include 'footer.php' ?>


<?php include 'header.php' ?>

<div class="container-fluid">

<a href="#" class="btn btn-success" role="button">Google</a>
<input type="button" class="btn btn-info" value="Input Button">

</div>

<?php include 'footer.php' ?>

Button will spawn whole width


<?php include 'header.php' ?>

<div class="container-fluid">

<button type="button" class="btn btn-primary btn-block">Primary</button>
<button type="button" class="btn btn-secondary btn-block">Secondary</button>
<button type="button" class="btn btn-info btn-block">Info</button>
<button type="button" class="btn btn-warning btn-block">Warning</button>
<button type="button" class="btn btn-danger btn-block">Danger</button>
<button type="button" class="btn btn-dark btn-block">Dark</button>
<button type="button" class="btn btn-success btn-block">Success</button>

</div>

<?php include 'footer.php' ?>


<?php include 'header.php' ?>

<div class="container-fluid">

<button class="btn btn-primary btn-lg">
	<span class="spinner-grow spinner-grow"></span>
	Thing is loading...
</button>

</div>

<?php include 'footer.php' ?>


<?php include 'header.php' ?>

<div class="container-fluid">

<button class="btn btn-primary btn-lg">
	<span class="spinner-border spinner-border-lg"></span>
	Thing is loading...
</button>

</div>

<?php include 'footer.php' ?>

Bootstrap 4 Images


<?php include 'header.php' ?>

<div class="container-fluid">

<img src="bs-4.jpg" class="float-right">

</div>

<?php include 'footer.php' ?>


<?php include 'header.php' ?>

<div class="container-fluid">

<img src="bs-4.jpg" class="mx-auto d-block">

</div>

<?php include 'footer.php' ?>


<?php include 'header.php' ?>

<div class="container-fluid">

<img src="bs-4.jpg" class="rounded-circle img-fluid mx-auto d-block">

</div>

<?php include 'footer.php' ?>

Bootstrap 4 Tables


<?php include 'header.php' ?>

<div class="container-fluid">

<table class="table table-bordered table-striped table-hover table-dark">
	<thead class="bg-success">
		<tr>
			<th>Firstname</th>
			<th>Lastname</th>
			<th>Address</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>John</td>
			<td>Snow</td>
			<td>Random Street 456</td>
		</tr>
		<tr>
			<td>Samantha</td>
			<td>Ice</td>
			<td>Random Street 753</td>
		</tr>
	</tbody>	
</table>

</div>

<?php include 'footer.php' ?>

Bootstrap 4 Typography


<?php include 'header.php' ?>

<div class="container-fluid">
	<h1>Heading - H1</h1>
	<h2>Heading - H2</h2>
	<h3>Heading - H3</h3>
	<h4>Heading - H4</h4>
	<h5>Heading - H5</h5>
	<h6>Heading - H6</h6>
</div>

<?php include 'footer.php' ?>


<?php include 'header.php' ?>

<div class="container-fluid">
	<h1 class="display-1">Heading - H1</h1>
	<h1 class="display-2">Heading - H1</h1>
	<h1 class="display-3">Heading - H1</h1>
	<h1 class="display-4">Heading - H1</h1>	
</div>

<?php include 'footer.php' ?>


<?php include 'header.php' ?>

<div class="container-fluid">
	<h1 class="display-1">Heading H1 - <small>Something More</small></h1>
</div>

<?php include 'footer.php' ?>


<?php include 'header.php' ?>
<div class="container-fluid">

<blockquote class="blockquote">
	<p>Lorem Ipsum dolor sit amet, blah blah blah</p>
	<footer class="blockquote-footer">Wiki</footer>	
</blockquote>

</div>
<?php include 'footer.php' ?>


<?php include 'header.php' ?>
<div class="container-fluid">

<blockquote class="blockquote">
	<p>Lorem <mark>Ipsum dolor sit</mark> amet, blah blah blah</p>
	<p>Lorem Ipsum dolor sit amet, <code>blah blah blah</code></p>
	<footer class="blockquote-footer">Wiki</footer>	
</blockquote>

</div>
<?php include 'footer.php' ?>


<?php include 'header.php' ?>
<div class="container-fluid">

<blockquote class="blockquote">
	<p><kbd>Ctrl + F10</kbd></p>
	<p><kbd>Ctrl + Alt + F4</kbd></p>
</blockquote>

</div>
<?php include 'footer.php' ?>