bootstrap-component-cases

Posted on Edited on In ,

Overview

Bootstrap which is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites, most of its code are CSS, CSS classes defines how each components looks like.
bootstrap

Component CSS class

Component CSS classes aim to style that kind of html element by setting several CSS properties, hence we should always use that bootstrap class for that kind of html element, so that you got the expected style, one exception is you can use button class to <a> element, even each CSS class is separately, but bootstrap gives some code snippets to use them together to make it looks better, always uses that code snippet like what bootstrap does.

1
2
3
4
5
6
7
8
9
10
<!--form-group only adding padding or margin
    you can use form-control without group, but group to make it looks better
-->
<div class="form-group">
  <label for="email">Email address:</label>
  <input type="email" class="form-control" placeholder="Enter email" id="email">
</div>

<label for="email">Email address:</label>
<input type="email" class="form-control" placeholder="Enter email" id="email">
1
2
3
<a href="#" class="btn btn-info" role="button">Link Button</a>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">

Utilities CSS class

Bootstrap 4 has a lot of utility/helper classes to quickly style elements without using any CSS code, because bootstrap does this for you.

Utilities do NOT target a particular html element, but for all element with common CSS properties
like

  • border
  • background-color
  • text
  • flex
  • block
  • padding
  • margin
  • height/width
  • align
  • position

More detail refer to Bootstrap4 Utilities

AdminLTE

AdminLTE is built on top of Bootstrap, AdminLTE provides a range of responsive, reusable, and commonly used components, it keeps all bootstrap class and added new one, so that it’s a super class of bootstrap, all bootstrap based websites can work as well with AdminLTE, the big benefits of using AdminLTE is that it provides lots of components that you can pick it directly and use it in your website.

AdminLTE depends on two main frameworks. Bootstrap 4 and jQuery 3.3.1, you should also include jQuery.min.js and bootstrap.min.js in your project as well, along with AdminLTE, no need to include bootstrap.css!!!

1
2
3
4
5
6
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/3.0.5/css/adminlte.min.css" integrity="sha512-rVZC4rf0Piwtw/LsgwXxKXzWq3L0P6atiQKBNuXYRbg2FoRbSTIY0k2DxuJcs7dk4e/ShtMzglHKBOJxW8EQyQ==" crossorigin="anonymous" />

<!--...-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js" integrity="sha384-LtrjvnR4Twt/qOuYxE721u19sVFLVSA4hf/rRt6PrZTmiPltdZcI7q7PXQBYTKyf" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/3.0.5/js/adminlte.min.js" integrity="sha512-++c7zGcm18AhH83pOIETVReg0dr1Yn8XTRw+0bWSIWAVCAwz1s2PwnSj4z/OOyKlwSXc4RLg3nnjR22q0dhEyA==" crossorigin="anonymous"></script>
  • Bootstrap 4
  • jQuery 3.3.1+
  • Popper.js 1.14
    But if you use a component which depends on plugins, you should also add that plugin CDN as well in your page.

plugin

How to use AdminLTE

1. download the source and run it locally, so that you can see what component looks like and pick the one you needs

1
2
3
4
$ git clone https://github.com/ColorlibHQ/AdminLTE.git
$ cd AdminLTE
$ yarn install
$ yarn dev

2. include the AdminLTE in your project

1
2
3
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/3.0.5/css/adminlte.min.css" integrity="sha512-rVZC4rf0Piwtw/LsgwXxKXzWq3L0P6atiQKBNuXYRbg2FoRbSTIY0k2DxuJcs7dk4e/ShtMzglHKBOJxW8EQyQ==" crossorigin="anonymous" />
<!--...-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/3.0.5/js/adminlte.min.js" integrity="sha512-++c7zGcm18AhH83pOIETVReg0dr1Yn8XTRw+0bWSIWAVCAwz1s2PwnSj4z/OOyKlwSXc4RLg3nnjR22q0dhEyA==" crossorigin="anonymous"></script>

3. copy the code snippet that you needs to your project

Note: you can write code like what you did with bootstrap, but use predefined component from AdminLTE in any case