Bootstrap 4 Admin Panel

In this article, we will understand how to create an admin panel in bootstrap 4.
What do you mean by admin panel?

In bootstrap 4 admin panel is a dashboard in which the admin stores and maintains their websites' details. Every website has different admin panels according to the working of their sites.
For Example, some admin panels are used to store user login details; some are used to upload stock of the websites.
Let's take the various examples of the admin panel in bootstrap 4.
Example 1:

<! DOCTYPE html>          
<html lang="en">          
<head>          
  <title> Bootstrap 4 Custom Form Example </title>          
  <meta charset="utf-8">          
  <meta name="viewport" content="width=device-width, initial-scale=1">          
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">          
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>          
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>          
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> </script>          
   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">    
</head>
  <style type="text/css">
    body,
    html {
      height: 100%;
    }
    body.modal-open {
      padding-right: 0 !important;
    }
    #sidebar {
      padding-left: 0;
   }
   .bg-primary {
    background-color: #363a3e!important;
}

.bg-success {
    background-color: #8d899d!important;
}
.bg-warning {
    background-color: #262523!important;
}
    @media screen and (max-width: 48em) {
      .row-offcanvas {
        position: relative;
        -webkit-transition: all 0.25s ease-out;
        -moz-transition: all 0.25s ease-out;
        transition: all 0.25s ease-out;
      }
      .row-offcanvas-left .sidebar-offcanvas {
        left: -33%;
      }
      .row-offcanvas-left.active {
        left: 33%;
        margin-left: -6px;
      }
      .sidebar-offcanvas {
        position: absolute;
        top: 0;
        width: 33%;
        height: 100%;
      }
    }
	button {  
  display: inline-block;  
  background-color: #FF9800;  
  width: 50px;  
  height: 50px;  
  text-align: center;  
  border-radius: 4px;  
  position: fixed;  
  bottom: 30px;  
  right: 30px;  
  transition: background-color .3s,   
    opacity .5s, visibility .5s;  
  opacity: 0;  
  visibility: hidden;  
  z-index: 1000;  
}  
button::after {  
  content: "\f077";  
  font-family: FontAwesome;  
  font-weight: normal;  
  font-style: normal;  
  font-size: 2em;  
  line-height: 50px;  
  color: #fff;  
}  
button:hover {  
  cursor: pointer;  
  background-color: #333;  
}  
button:active {  
  background-color: #555;  
}  
a {  
color: red;
    display: inline-block;  
    padding: 10px 20px;  
    text-decoration: none;  
    font-size: 20px;  
  }  
  a:hover {  
  text-decoration: none;  
  color: red;  
  }  
button.show {  
  opacity: 1;  
  visibility: visible;  
}  
    @media screen and (max-width: 34em) {
      .row-offcanvas-left .sidebar-offcanvas {
        left: -45%;
      }
      .row-offcanvas-left.active {
        left: 45%;
        margin-left: -6px;
      }
      .sidebar-offcanvas {
        width: 45%;
      }
    }
    .card {
      overflow: hidden;
    }
    .card-block .rotate {
      z-index: 8;
      float: right;
      height: 100%;
    }
    .card-block .rotate i {
      color: rgba(20, 20, 20, 0.15);
      position: absolute;
      left: 0;
      left: auto;
      right: -10px;
      bottom: 0;
      display: block;
      -webkit-transform: rotate(-44deg);
      -moz-transform: rotate(-44deg);
      -o-transform: rotate(-44deg);
      -ms-transform: rotate(-44deg);
      transform: rotate(-44deg);
    }
  </style>
</head>
<body>
  <nav class="navbar navbar-fixed-top navbar-toggleable-sm navbar-inverse bg-primary mb-3">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="flex-row d-flex">
      <a class="navbar-brand mb-1" href="#"> JavaTpoint </a>
      <button type="button" class="hidden-md-up navbar-toggler" data-toggle="offcanvas" title="Toggle responsive left sidebar">
            <span class="navbar-toggler-icon"> </span>
        </button>
    </div>
    <div class="navbar-collapse collapse" id="collapsingNavbar">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only"> Home </span> </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#features"> Features </a>
        </li>
      </ul>
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="" data-target="#myModal" data-toggle="modal"> About </a>
        </li>
      </ul>
    </div>
  </nav>
  <div class="container-fluid" id="main">
    <div class="row row-offcanvas row-offcanvas-left">
      <div class="col-md-3 col-lg-2 sidebar-offcanvas" id="sidebar" role="navigation">
        <ul class="nav flex-column pl-1">
          <li class="nav-item"><a class="nav-link" href="#"> Overview </a> </li>
          <li class="nav-item">
            <a class="nav-link" href="#submenu1" data-toggle="collapse" data-target="#submenu1"> Reports ?</a>
            <ul class="list-unstyled flex-column pl-3 collapse" id="submenu1" aria-expanded="false">
              <li class="nav-item"> <a class="nav-link" href=""> Sub item </a> </li>
              <li class="nav-item"> <a class="nav-link" href=""> Sub item </a> </li>
            </ul>
          </li>
          <li class="nav-item"> <a class="nav-link" href="#"> Tables </a></li>
          <li class="nav-item"> <a class="nav-link" href="#"> Panels </a> </li>
          <li class="nav-item"> <a class="nav-link" href=""> Nav item </a> </li>
          <li class="nav-item"> <a class="nav-link" href="#"> Card </a> </li>
          <li class="nav-item"> <a class="nav-link" href=""> Another </a> </li>
          <li class="nav-item"> <a class="nav-link" href=""> Nav item </a> </li>
          <li class="nav-item"> <a class="nav-link" href=""> Tabs </a> </li>
        </ul>
      </div>
      <div class="col-md-9 col-lg-10 main">
        <h1 class="display-2 hidden-xs-down">
            Bootstrap 4 Admin Panel
            </h1>
        <div class="alert alert-warning fade collapse" role="alert" id="myAlert">
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true"> ? </span>
                    <span class="sr-only"> Close </span>
                </button>
                 </div>
        <div class="row mb-3">
          <div class="col-xl-3 col-lg-6">
            <div class="card card-inverse card-success">
              <div class="card-block bg-success">
                <div class="rotate">
                  <i class="fa fa-user fa-5x"> </i>
                </div>
                <h6 class="text-uppercase"> Users </h6>
                <h1 class="display-1"> 34 </h1>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-lg-6">
            <div class="card card-inverse card-danger">
              <div class="card-block bg-danger">
                <div class="rotate">
                  <i class="fa fa-list fa-4x"> </i>
                </div>
                <h6 class="text-uppercase"> Posts </h6>
                <h1 class="display-1"> 7 </h1>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-lg-6">
            <div class="card card-inverse card-info">
              <div class="card-block bg-info">
                <div class="rotate">
                  <i class="fa fa-twitter fa-5x"> </i>
                </div>
                <h6 class="text-uppercase"> Tweets </h6>
                <h1 class="display-1"> 25 </h1>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-lg-6">
            <div class="card card-inverse card-warning">
              <div class="card-block bg-warning">
                <div class="rotate">
                  <i class="fa fa-share fa-5x"> </i>
                </div>
                <h6 class="text-uppercase"> Shares </h6>
                <h1 class="display-1"> 36 </h1>
              </div>
            </div>
          </div>
        </div>
        <div class="row placeholders mb-3">           
        </div>
        <a id="features"> </a>
        <hr>
        <h1>
          This admin panel contains all the features and classes of Bootstrap 4.      
        </h1> <hr>
        <div class="row mb-3">
          <div class="col-lg-3 col-md-4">
            <div class="card">
                 <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content. </p>
                <a href="#" class="btn btn-primary"> Button </a>
              </div>
            </div>
            </div>
          <div class="col-lg-9 col-md-8">
            <div class="table-responsive">
              <table class="table table-striped">
                <thead class="thead-inverse">
                  <tr>
                    <th> Sr. No  </th>
                    <th> Label </th>
                    <th> Header </th>
                    <th>Column </th>
                    <th> Data </th>
                  </tr>
                </thead>
                <tbody>
                     <tr>
                    <td> 1,02 </td>
                    <td> read </td>
                    <td> web designers </td>
                    <td> theme </td>
                    <td> responsive </td>
                  </tr>
                  <tr>
                    <td>1,003</td>
                    <td> free </td>
                    <td> open-source </td>
                    <td> download </td>
                    <td> template </td>
                  </tr>
                     <tr>
                    <td> 1,05 </td>
                    <td> navbar </td>
                    <td> sticky </td>
                    <td> jumbtron </td>
                    <td> header </td>
                  </tr>
                  <tr>
                    <td> 1,06 </td>
                    <td> collapse </td>
                    <td> affix </td>
                    <td> submenu </td>
                    <td> footer </td>
                  </tr>
                   </tbody>
              </table>
            </div>
          </div>
        </div>
        <a id="more"></a>
        <hr>
        <h2 class="sub-header">Use card decks for equal height rows of cards</h2>
        <div class="card-deck-wrapper mb-3">
          <div class="card-deck">
            <div class="card card-inverse card-success text-center">
              <div class="card-block">
                <blockquote class="card-blockquote">
                  <p> It's really good news that the new Bootstrap 4 now has support for CSS 3 flexbox. </p>
                </blockquote>
              </div>
            </div>
            <div class="card card-inverse card-danger text-center">
              <div class="card-block">
                <blockquote class="card-blockquote">
                  <p> The Bootstrap 3.x element that was called "Panel" before, is now called a "Card". </p>
                </blockquote>
              </div>
            </div>
            <div class="card card-inverse card-warning text-center">
              <div class="card-block">
                <blockquote class="card-blockquote">
                  <p> there are also some interesting new text classes for uppercase and capitalize. </p>
                                  </blockquote>
              </div>
            </div>
            <div class="card card-inverse card-info text-center">
              <div class="card-block">
                <blockquote class="card-blockquote">
                  <p> If you want to use cool icons in Bootstrap 4, you'll have to find your own such as Font Awesome or Ionicons. </p>
                  <footer> The Glyph icons are not <cite title="Source Title"> Included </cite> </footer>
                </blockquote>
              </div>
            </div>
          </div>
        </div>
        <a id="flexbox"></a>
        <hr>
        <h2> Masonry-style grid columns </h2>
        <h6> with Bootstrap 4 flexbox </h6>
        <div class="card-columns mb-3">
          <div class="card">
             <div class="card-block">
              <h4 class="card-title"> Card title that wraps to a new line </h4>
              <p class="card-text"> This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. </p>
            </div>
          </div>
          <div class="card card-block">
            <blockquote class="card-blockquote">
              <p> Bootstrap 4 will be lighter and easier to customize. </p>
              <footer>
                <small class="text-muted">
                              Someone famous like <cite title="Source Title"> Mark Ottor </cite>
                            </small>
              </footer>
            </blockquote>
          </div>
          <div class="card">
             <div class="card-block">
              <h4 class="card-title"> Card title </h4>
              <p class="card-text"> This card has supporting text below as a natural lead-in to additional content. </p>
              <p class="card-text"> <small class="text-muted"> Last updated 13 mins ago </small> </p>
            </div>
          </div>
                 <div class="card card-block text-center">
            <h4 class="card-title">Clever heading</h4>
            <p class="card-text"> This card has supporting text below as a natural lead-in to additional content. </p>
            <p class="card-text"><small class="text-muted">Last updated 15 mins ago </small> </p>
          </div>
          <div class="card">
        
          </div>
          <div class="card card-block text-right">
            <blockquote class="card-blockquote">
              <p> there are also some interesting new text classes to uppercase or capitalize. </p>
              <footer>
                <small class="text-muted">
                              Someone famous in <cite title="Source Title"> Bootstrap 4 </cite>
                            </small>
              </footer>
            </blockquote>
          </div>
          <div class="card card-block">
            <h4 class="card-title"> Responsive </h4>
            <p class="card-text"> This is a wider card with supporting text below as a natural lead-in to additional content. </p>
            <p class="card-text"> <small class="text-muted"> Last updated 13 mins ago </small> </p>
          </div>
          <div class="card">
            <div class="card-block">
              <ul class="list-unstyled">
                <li class="text-capitalize"> <code class="text-lowercase"> text-capitalize </code> Capitalize each word </li>
                <li class="text-uppercase"> <code class="text-lowercase"> text-uppercase </code> Uppercase text </li>
                <li class="text-success"> <code> text-success </code> Contextual colors for text </li>
                <li> <code>text-muted </code> <span class="text-muted"> Lighten with muted </span> </li>
                <li> <code>text-info </code> <span class="text-muted"> Info text color </span> </li>
                <li> <code> text-danger </code> <span class="text-muted"> Danger text color </span></li>
                <li> <code> text-warning </code> <span class="text-muted"> Warning text color </span> </li>
                <li> <code>text-primary </code> <span class="text-primary"> Primary text color </span> </li>
              </ul>
            </div>
          </div>
          <div class="card card-block">
            <h4 class="card-title"> Heading </h4>
            <p class="card-text"> So now that you've seen some of what Bootstrap 4 has to offer, are you going to give it a try? </p>
            <p class="card-text"><small class="text-muted">Last updated 2 mins ago </small> </p>
          </div>
        </div>
        <a id="layouts"> </a>
        <hr>
        <h2 class="sub-header"> Interesting layouts and elements </h2>
        <div class="row mb-3">
          <div class="col-lg-6">
            <div class="card">
              <div class="card-header">
                Bye .well, .panel & .thumbnail
              </div>
              <div class="card-block">
                <h4 class="card-title">Replaced with .card</h4>
                <p class="card-text"> All of these Bootstrap 3.x components have been dropped entirely for the new card component. </p>
                <button type="button" class="btn btn-secondary btn-lg"> Large </button>
              </div>
            </div>
          </div>
          <div class="col-lg-6">
            <ul class="nav nav-tabs" role="tablist">
              <li class="nav-item">
                <a class="nav-link active" href="#home1" role="tab" data-toggle="tab"> Home </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#profile1" role="tab" data-toggle="tab"> Profile </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#messages1" role="tab" data-toggle="tab"> Messages </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#settings1" role="tab" data-toggle="tab"> Settings </a>
              </li>
            </ul>
            <div class="tab-content">
              <br>
              <div role="tabpanel" class="tab-pane active" id="home1">
                <h4> Home </h4>
                <p>
                  1. These Bootstrap 4 Tabs work basically the same as the Bootstrap 3.x tabs.
                  <br>
                  <br> </p>
              </div>
              <div role="tabpanel" class="tab-pane" id="profile1">
                <h4> Pro </h4>
                <p>
                  2. Tabs are helpful to hide or collapse some additional content.
                </p>
              </div>
              <div role="tabpanel" class="tab-pane" id="messages1">
                <h4> Messages </h4>
                <p>
                  3. You can really put whatever you want into the tab pane.
                </p>
              </div>
              <div role="tabpanel" class="tab-pane" id="settings1">
                <h4> Settings </h4>
                <p>
                  4. Some of the Bootstrap 3.x components like well and panel have been dropped for the new card component.
                </p>
              </div>
            </div>
          </div>
          <div class="clearfix"> </div>
          <div class="col-lg-6">
            <div class="card card-default card-block">
              <ul id="tabsJustified" class="nav nav-tabs nav-justified">
                <li class="nav-item">
                  <a class="nav-link" href="" data-target="#tab1" data-toggle="tab"> List </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link active" href="" data-target="#tab2" data-toggle="tab"> Profile </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="" data-target="#tab3" data-toggle="tab"> More </a>
                </li>
              </ul>
              <br>
              <div id="tabsJustifiedContent" class="tab-content">
                <div class="tab-pane" id="tab1">
                  <div class="list-group">
                    <a href="" class="list-group-item"> <span class="float-right label label-success"> 51 </span> Home Link </a>
                    <a href="" class="list-group-item"> <span class="float-right label label-success"> 8 </span> Link 2 </a>
                    <a href="" class="list-group-item"> <span class="float-right label label-success"> 23 </span> Link 3 </a>
                    <a href="" class="list-group-item text-muted"> Link </a>
                  </div>
                </div>
                <div class="tab-pane active" id="tab2">
                  <div class="row">
                    <div class="col-sm-7">
                      <h4>Profile Section</h4>
                      <p> Imagine creating this simple user profile inside a tab card. </p>
                    </div>
                    </div>
                  <hr>
                  <a href="javascrip" class="btn btn-info btn-block"> Read More Profiles </a>
                  <div class="spacer5"></div>
                </div>
                <div class="tab-pane" id="tab3">
                  <div class="list-group">
                    <a href="" class="list-group-item"> <span class="float-right label label-info label-pill">44</span> <code>.panel</code> is now <code>.card</code> </a>
                    <a href="" class="list-group-item"> <span class="float-right label label-info label-pill">8</span> <code>.nav-justified</code> is deprecated </a>
                    <a href="" class="list-group-item"><span class="float-right label label-info label-pill">23</span> <code>.badge</code> is now <code>.label-pill</code></a>
                    <a href="" class="list-group-item text-muted"> Message </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-6">
            <div id="accordion" role="tablist" aria-multiselectable="true">
              <div class="card">
                <div class="card-header" role="tab" id="headingOne" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                  Collapsible Group Item #1
                </div>
                <div id="collapseOne" class="card-block collapse in" role="tabpanel" aria-labelledby="headingOne">
                  <p>This is a Bootstrap 4 accordion that uses the <code>.card</code> classes instead of <code>.panel</code>
. </p>
                </div>
                <div class="card-header" role="tab" id="headingTwo" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                  Collapsible Group Item #2
                </div>
                <div id="collapseTwo" class="card-block collapse" role="tabpanel" aria-labelledby="headingTwo">
                  <p> Just like it's predecesor, Bootstrap 4 is mobile-first so that you start by designing for smaller devices such as smartphones and tablets, then proceed to laptop and desktop layouts. </p>
                </div>
                <div class="card-header" role="tab" id="headingThree" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                  Collapsible Group Item #3
                </div>
                <div id="collapseThree" class="card-block collapse" role="tabpanel" aria-labelledby="headingThree">
                  <p> Bootstrap employs a handful of important global styles and settings that you?ll need to be aware of when using it </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <footer class="container-fluid">
    <p class="text-right small"> ?2020-2021 </p>
  </footer>
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="myModalLabel"> Modal </h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true"> ? </span>
                    <span class="sr-only"> Close </span>
                </button>
        </div>
        <div class="modal-body">
          This is a dashboard layout for Bootstrap 4. </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal"> Close </button>
          <button type="button" class="btn btn-primary-outline" data-dismiss="modal"> OK </button>
        </div>
      </div>
    </div>
  </div>
<script>
    if (window.self !== window.top && window.name != "view1") {
      window.alert = function() {
              };
      window.confirm = function() {
      };
      window.prompt = function() {
      };
      window.open = function() {
      };
    }
        document.addEventListener(
      "DOMContentLoaded",
      function() {
        var links = document.getElementsByTagName("A");
        for (var i = 0; i < links.length; i++) {
          if (links[i].href.indexOf("#") != -1) {
            links[i].addEventListener("click", function(e) {
              console.debug("prevent href=# click");
              if (this.hash) {
                if (this.hash == "#") {
                  e.preventDefault();
                  return false;
                } else {
                }
              }
              return false;
            });
          }
        }
      },
      false
    );
  </script>
  <script>
    $(document).ready(function() {
      $("[data-toggle=offcanvas]").click(function() {
        $(".row-offcanvas").toggleClass("active");
      });
    });
  </script>
</body>
</html>
Explanation:
In the above example, we have created an example of the bootstrap 4 admin panel. In this, we can define all the features of Bootstrap 4 in a single dashboard.
Output:
Following is the output of this example: