Free Admin template featuring horizontal and vertical navbar. Built using Bootstrap.
Category Archives: Bootstrap 5
Download HTML 5 and Bootstrap Jquery Form Validation Plugin
New Jquery based form validation plugin created for Bootstrap 5 framework. jbvalidator plugin will support both client side and server side validation. Following are the main features
Multiple languages.
Custom error messages.
Custom validation rules.
Easy to use via HTML data attribute.
Guidance
The form’s attribute have to novalidate
<script src="dist/jbvalidator.min.js"></script>
<script>
$(function (){
let validator = $('form.needs-validation').jbvalidator({
errorMessage: true,
successClass: true,
language: "https://emretulek.github.io/jbvalidator/dist/lang/en.json"
});
//custom validate methode
validator.validator.custom = function(el, event){
if($(el).is('[name=password]') && $(el).val().length < 5){
return 'Your password is too weak.';
}
}
validator.validator.example = function(el, event){
if($(el).is('[name=username]') && $(el).val().length < 3){
return 'Your username is too short.';
}
}
//check form without submit
validator.checkAll(); //return error count
//reload instance after dynamic element is added
validator.reload();
})
</script>
Serverside validation
<script src="dist/jbvalidator.min.js"></script>
<script>
$(function (){
let validatorServerSide = $('form.validatorServerSide').jbvalidator({
errorMessage: true,
successClass: false,
});
//serverside
$(document).on('submit', '.validatorServerSide', function(){
$.ajax({
method:"get",
url:"http://jsvalidation.test/test.json",
data: $(this).serialize(),
success: function (data){
if(data.status === 'error') {
validatorServerSide.errorTrigger($('[name=username]'), data.message);
}
}
})
return false;
});
})
</script>
Options
{
language: '', //json file url
errorMessage: true,
successClass: false,
html5BrowserDefault: false,
validFeedBackClass: 'valid-feedback',
invalidFeedBackClass: 'invalid-feedback',
validClass: 'is-valid',
invalidClass: 'is-invalid'
}
Download HTML 5 file input for Bootstrap 5
Download Free and open source Bootstrap 5 Admin Dashboard Template with vanilla Javascript
Bootstrap 5 Text/Typography
Default Typography Settings of Bootstrap 5
Default settings used in bootstrap as follows font-size of 1rem (16 by default) and the line height 1.5 also
elements have margin-top:0 and margin-bottom: 1rem
Bootstrap 5 Heading Classes
<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>
Bootstrap 5 Display headings
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>
Bootstrap 5 Secondary Text Class
Small Secondary text heading
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>
Bootstrap 5 mark element style
Bootstrap 5 will style and .mark will highlight the text with a yellow background color and some padding:
You can use the mark tag to highlight text. and use .text class
Bootstrap5 abbr classs
For making the text as dotted border and a cursor with question mark on hover, we can use tag . Add .initialism to an abbreviation for a slightly smaller font-size.
Bootstrap 5 blockquote class
For quoting blocks of content Wrap with element and add class .blockquote . Example below
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
Blockquote footer class
For naming the source of the quote we can use .blockquote-footer
<p>
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<p class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</p>
Bootstrap 5 dl ELement Style
<div class="container mt-3">
<h1>Bootstrap Description Lists</h1>
<p>The dl element indicates a description list:</p>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</div>
Free Bootstrap 5 Dashboard Template Download
Bootstrap 5 Admin Dashboard Template. Basic admin dashboard shell with fixed sidebar and navbar. Customize it and use for the quick start with your project.
Bootstrap 5 Grid System Basic
Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content , its built with flexbox and allows up to 12 columns across the page.
Basic Structure of a Bootstrap 5 Grid
The following is a basic structure of a Bootstrap 5 grid system:
<!-- Control the designer the column width Example 1-->
<div class="row">
<div class="col-*-*"></div> /*col-sm-1, col-md-1, col-lg, col-xl-1 or xxl*/
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<!-- let Bootstrap automatically render the layout Example 2-->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
Bootstrap 5 Grid options – Example 1
Bootstrap’s grid system can render across all six default breakpoints, and if any breakpoints as per the customization. Following are the six default grid tiers:
Extra small (xs) – .col-
Small (sm) – .col-sm-
Medium (md) – .col-md-
Large (lg) – .col-lg-
Extra large (xl) – .col-xl-
Extra extra large (xxl) – .col-xxl-
Auto-layout columns Example – 2
If no column widths are specified to the Col component will render equal width columns
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
</div>
Equal-width
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Setting one column width in a row
You can also set width for one specific column and the rest of the bootstrap columns will auto resize around it. we can use predefined grid classes , grid mixins, or other inline widths.
Mix and match with Different Column sizes in a tier
Use a combination of different classes for each row as needed. Following is the example for a start of how it all works.
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Bootstrap 5 Spacing
Bootstrap padding classes can assign to an element or subsets of its sides.These Classes are madfe from a default Sass map ranging from .25rem to 3rem.
Bootstrap provides various shorthands for responsive margin and padding sizing.
Simply We can apply classes to add margins and padding for better design.
The class value method like following {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for other breakpoints.
Bootstrap property is one of: m for margin and p for padding
Change the properties depends on the device for better responsive mt-sm-, mt-md-, mt-xl-, mt-xxl-
sides is one of:
t – for margin-top or padding-top
margin-top classes
.mt-0{margin-top:0!important}
.mt-1{margin-top:.25rem!important}
.mt-2{margin-top:.5rem!important}
.mt-3{margin-top:1rem!important}
.mt-4{margin-top:1.5rem!important}
.mt-5{margin-top:3rem!important}
.mt-auto{margin-top:auto!important}
Padding top classes
.pt-0{padding-top:0!important}
.pt-1{padding-top:.25rem!important}
.pt-2{padding-top:.5rem!important}
.pt-3{padding-top:1rem!important}
.pt-4{padding-top:1.5rem!important}
.pt-5{padding-top:3rem!important}
b – for margin-bottom or padding-bottom
Margin Bottom Classes
.mb-0{margin-bottom:0!important}
.mb-1{margin-bottom:.25rem!important}
.mb-2{margin-bottom:.5rem!important}
.mb-3{margin-bottom:1rem!important}
.mb-4{margin-bottom:1.5rem!important}
.mb-5{margin-bottom:3rem!important}
.mb-auto{margin-bottom:auto!important}
Padding Bottom Classes
.pb-0{padding-bottom:0!important}
.pb-1{padding-bottom:.25rem!important}
.pb-2{padding-bottom:.5rem!important}
.pb-3{padding-bottom:1rem!important}
.pb-4{padding-bottom:1.5rem!important}
.pb-5{padding-bottom:3rem!important}
s – for start or padding-left
Margin Left Classes
.ms-0{margin-left:0!important}
.ms-1{margin-left:.25rem!important}
.ms-2{margin-left:.5rem!important}
.ms-3{margin-left:1rem!important}
.ms-4{margin-left:1.5rem!important}
.ms-5{margin-left:3rem!important}
.ms-auto{margin-left:auto!important}
Padding Left Classes
.ps-0{padding-left:0!important}
.ps-1{padding-left:.25rem!important}
.ps-2{padding-left:.5rem!important}
.ps-3{padding-left:1rem!important}
.ps-4{padding-left:1.5rem!important}
.ps-5{padding-left:3rem!important}
e – for margin-right or padding-right
Margin Right Classes
.me-1{margin-right:.25rem!important}
.me-2{margin-right:.5rem!important}
.me-3{margin-right:1rem!important}
.me-4{margin-right:1.5rem!important}
.me-5{margin-right:3rem!important}
.me-auto{margin-right:auto!important}
Padding Right Classes
.pe-0{padding-right:0!important}
.pe-1{padding-right:.25rem!important}
.pe-2{padding-right:.5rem!important}
.pe-3{padding-right:1rem!important}
.pe-4{padding-right:1.5rem!important}
x – for both *-left and *-right
y – for both *-top and *-bottom
blank — for classes that set a margin or padding on all 4 sides of the element
size is one of:
m-0 – for classes that eliminate the margin or padding by setting it to 0
1 – (by default) for classes that set the margin or padding to $spacer * .25
2 – (by default) for classes that set the margin or padding to $spacer * .5
3 – (by default) for classes that set the margin or padding to $spacer
4 – (by default) for classes that set the margin or padding to $spacer * 1.5
5 – (by default) for classes that set the margin or padding to $spacer * 3
auto – for classes that set the margin to auto