MSA Source

Thursday, May 1, 2025

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

Bootstrap 4 Grid System


<?php include 'header.php' ?>

<div class="container">
	<div class="row">
		<div class="col bg-success">
			<h1>COLUMN 1</h1>
			<p>For Testing Purposes</p>
		</div>
		
		<div class="col bg-warning">
			<h1>COLUMN 2</h1>
			<p>For Testing Purposes</p>
		</div>
	</div>
</div>

<?php include 'footer.php' ?>


<?php include 'header.php' ?>

<div class="container">
	<div class="row">
		<div class="col-2 bg-success">
			<h1>COLUMN 1</h1>
			<p>For Testing Purposes</p>
		</div>
		
		<div class="col-10 bg-warning">
			<h1>COLUMN 2</h1>
			<p>For Testing Purposes</p>
		</div>
	</div>
</div>

<?php include 'footer.php' ?>


<?php include 'header.php' ?>

<div class="container-fluid">
	<div class="row">
		<div class="col-2 bg-success">
			<h1>COLUMN 1</h1>
			<p>For Testing Purposes</p>
		</div>
		
		<div class="col-10 bg-warning">
			<h1>COLUMN 2</h1>
			<p>For Testing Purposes</p>
		</div>
	</div>
</div>

<?php include 'footer.php' ?>


<?php include 'header.php' ?>

<div class="jumbotron bg-danger text-light" 
style="border-radius:0; margin-bottom:0">
	<h1>JUMBOTRON</h1>
	<p>For testing purposes</p>
</div>


<div class="container-fluid">
	<div class="row">
		<div class="col-2 bg-success">
			<h1>COLUMN 1</h1>
			<p>For Testing Purposes</p>
		</div>
		
		<div class="col-10 bg-warning">
			<h1>COLUMN 2</h1>
			<p>For Testing Purposes</p>
		</div>
	</div>
</div>

<?php include 'footer.php' ?>

Bootstrap 4 Jumbotron, Colors


<?php include 'header.php' ?>

<div class="jumbotron">
	<h1>JUMBOTRON TEST</h1>
	<p>Lorem ipsum dolor sit something here bla bla bla</p>
</div>

<?php include 'footer.php' ?>


<?php include 'header.php' ?>

<div class="jumbotron bg-success">
	<h1>JUMBOTRON TEST</h1>
	<p>Lorem ipsum dolor sit something here bla bla bla</p>
</div>

<div class="jumbotron bg-danger">
	<h1>JUMBOTRON TEST</h1>
	<p>Lorem ipsum dolor sit something here bla bla bla</p>
</div>

<div class="jumbotron bg-warning">
	<h1>JUMBOTRON TEST</h1>
	<p>Lorem ipsum dolor sit something here bla bla bla</p>
</div>

<div class="jumbotron bg-info">
	<h1>JUMBOTRON TEST</h1>
	<p>Lorem ipsum dolor sit something here bla bla bla</p>
</div>

<div class="jumbotron bg-dark">
	<h1>JUMBOTRON TEST</h1>
	<p>Lorem ipsum dolor sit something here bla bla bla</p>
</div>

<div class="jumbotron bg-light">
	<h1>JUMBOTRON TEST</h1>
	<p>Lorem ipsum dolor sit something here bla bla bla</p>
</div>

<div class="jumbotron bg-white">
	<h1>JUMBOTRON TEST</h1>
	<p>Lorem ipsum dolor sit something here bla bla bla</p>
</div>

<div class="jumbotron bg-primary">
	<h1>JUMBOTRON TEST</h1>
	<p>Lorem ipsum dolor sit something here bla bla bla</p>
</div>

<?php include 'footer.php' ?>


<?php include 'header.php' ?>

<div class="jumbotron text-white bg-success">
	<h1>JUMBOTRON TEST</h1>
	<p>Lorem ipsum dolor sit something here bla bla bla</p>
</div>

<?php include 'footer.php' ?>


<?php include 'header.php' ?>

<div class="jumbotron text-white bg-success text-center">
	<h1>JUMBOTRON TEST</h1>
	<p>Lorem ipsum dolor sit something here bla bla bla</p>
</div>

<?php include 'footer.php' ?>

Bootstrap 4 Local CSS, JS

index.php


<?php include 'header.php' ?>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <h1>MODAL TEST</h1>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<?php include 'footer.php' ?>

index.php with static bootstrap css


<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>

footer.php with static js files


  <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="js/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="js/bootstrap.bundle.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="js/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>

Bootstrap 4 Header, Footer

header.php


<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>

footer.php


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>

index.php


<?php include 'header.php' ?>

<h1>Hello, World!</h1>

<?php include 'footer.php' ?>

Bootstrap 4 Setup, First Page


<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>