Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Bootstrap Alerts documentation

Default style

Use .alert-* classes.

<div class="alert alert-primary" role="alert">
         This is a primary alert—check it out!
       </div>
       <div class="alert alert-secondary" role="alert">
         This is a secondary alert—check it out!
       </div>
       <div class="alert alert-success" role="alert">
         This is a success alert—check it out!
       </div>
       <div class="alert alert-danger" role="alert">
         This is a danger alert—check it out!
       </div>
       <div class="alert alert-warning" role="alert">
         This is a warning alert—check it out!
       </div>
       <div class="alert alert-info" role="alert">
         This is a info alert—check it out!
       </div>
       <div class="alert alert-light" role="alert">
         This is a light alert—check it out!
       </div>
       <div class="alert alert-dark" role="alert">
         This is a dark alert—check it out!
       </div>

With Icon

<div class="alert alert-primary media" role="alert">
         <i class="fas fa-info-circle mt-1 mr-1"></i>
         <div class="media-body" role="alert">
           This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
         </div>
       </div>

Dismissing

Use .alert-dismissible class for .alert.

<div class="alert alert-warning alert-dismissible fade show" role="alert">
         <strong>Holy guacamole!</strong> You should check in on some of those fields below.
         <button type="button" class="close" data-dismiss="alert" aria-label="Close">
           <svg aria-hidden="true" class="mb-0" width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
             <path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
           </svg>
         </button>
       </div>

Additional content

Alerts can also contain additional HTML elements like headings, paragraphs and dividers.

<div class="alert alert-success" role="alert">
         <h4 class="alert-heading">Well done!</h4>
         <p class="text-inherit">Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
         <hr />
         <p class="text-inherit mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
       </div>

Soft style

Use .alert-soft-* classes.

<div class="alert alert-soft-primary" role="alert">
         This is a soft primary alert—check it out!
       </div>
       <div class="alert alert-soft-secondary" role="alert">
         This is a soft secondary alert—check it out!
       </div>
       <div class="alert alert-soft-success" role="alert">
         This is a soft success alert—check it out!
       </div>
       <div class="alert alert-soft-danger" role="alert">
         This is a soft danger alert—check it out!
       </div>
       <div class="alert alert-soft-warning" role="alert">
         This is a soft warning alert—check it out!
       </div>
       <div class="alert alert-soft-info" role="alert">
         This is a soft info alert—check it out!
       </div>
       <div class="alert alert-soft-light" role="alert">
         This is a soft light alert—check it out!
       </div>
       <div class="alert alert-soft-dark" role="alert">
         This is a soft dark alert—check it out!
       </div>

Avatars

Examples for opting different size of image classes.

Example

Avatar classes are applied to the image so that it scales with the parent element. Use .avatar-xs, .avatar-sm, .avatar, .avatar-lg, .avatar-xl or .avatar-xxl classes to change size.

Image Description Image Description Image Description Image Description Image Description Image Description
<span class="avatar avatar-xxl avatar-circle">
         <img class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
       </span>
       <span class="avatar avatar-xl avatar-circle">
         <img class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
       </span>
       <span class="avatar avatar-lg avatar-circle">
         <img class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
       </span>
       <span class="avatar avatar-circle">
         <img class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
       </span>
       <span class="avatar avatar-sm avatar-circle">
         <img class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
       </span>
       <span class="avatar avatar-xs avatar-circle">
         <img class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
       </span>

Initials

A A A A A
<span class="avatar avatar-xl avatar-primary avatar-circle">
         <span class="avatar-initials">A</span>
       </span>
       <span class="avatar avatar-lg avatar-primary avatar-circle">
         <span class="avatar-initials">A</span>
       </span>
       <span class="avatar avatar-primary avatar-circle">
         <span class="avatar-initials">A</span>
       </span>
       <span class="avatar avatar-sm avatar-primary avatar-circle">
         <span class="avatar-initials">A</span>
       </span>
       <span class="avatar avatar-xs avatar-primary avatar-circle">
         <span class="avatar-initials">A</span>
       </span>

Shapes

Use border classes or .avatar-circle to make avatars more rounded.

Image Description Image Description
<span class="avatar">
         <img class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
       </span>
       <span class="avatar avatar-circle">
         <img class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
       </span>
A A
<span class="avatar avatar-primary">
         <span class="avatar-initials">A</span>
       </span>
       <span class="avatar avatar-primary avatar-circle">
         <span class="avatar-initials">A</span>
       </span>

Colors

A A A A A A A A A
<span class="avatar avatar-primary avatar-circle">
         <span class="avatar-initials">A</span>
       </span>
       <span class="avatar avatar-secondary avatar-circle">
         <span class="avatar-initials">A</span>
       </span>
       <span class="avatar avatar-success avatar-circle">
         <span class="avatar-initials">A</span>
       </span>
       <span class="avatar avatar-danger avatar-circle">
         <span class="avatar-initials">A</span>
       </span>
       <span class="avatar avatar-warning avatar-circle">
         <span class="avatar-initials">A</span>
       </span>
       <span class="avatar avatar-info avatar-circle">
         <span class="avatar-initials">A</span>
       </span>
       <span class="avatar avatar-light avatar-circle">
         <span class="avatar-initials">A</span>
       </span>
       <span class="avatar avatar-dark avatar-circle">
         <span class="avatar-initials">A</span>
       </span>
       <span class="avatar avatar-dark avatar-circle">
         <span class="avatar-initials">A</span>
       </span>
A A A A A A A A A
<span class="avatar avatar-soft-primary avatar-circle">
         <span class="avatar-initials">A</span>
       </span>
       <span class="avatar avatar-soft-secondary avatar-circle">
         <span class="avatar-initials">A</span>
       </span>
       <span class="avatar avatar-soft-success avatar-circle">
         <span class="avatar-initials">A</span>
       </span>
       <span class="avatar avatar-soft-danger avatar-circle">
         <span class="avatar-initials">A</span>
       </span>
       <span class="avatar avatar-soft-warning avatar-circle">
         <span class="avatar-initials">A</span>
       </span>
       <span class="avatar avatar-soft-info avatar-circle">
         <span class="avatar-initials">A</span>
       </span>
       <span class="avatar avatar-soft-light avatar-circle">
         <span class="avatar-initials">A</span>
       </span>
       <span class="avatar avatar-soft-dark avatar-circle">
         <span class="avatar-initials">A</span>
       </span>
       <span class="avatar avatar-soft-dark avatar-circle">
         <span class="avatar-initials">A</span>
       </span>

Border New

Use .avatar-border-lg to wrap avatars with white border color.

Image Description
<span class="avatar avatar-xl avatar-circle avatar-border-lg">
         <img class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
       </span>

Centered New

Use .avatar-centered to center align.

Image Description
<span class="avatar avatar-xl avatar-centered avatar-circle avatar-border-lg">
         <img class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
       </span>

Group

Group your avatars with the help of a .avatar-group class.

Image Description A Image Description 3+
Image Description A Image Description 3+
Image Description A Image Description 3+
Image Description A Image Description 3+
Image Description A Image Description 3+
<div class="row align-items-center">
         <div class="col-auto">
           <div class="avatar-group mb-1">
             <span class="avatar avatar-xl avatar-circle">
               <img class="avatar-img" src="../assets/img/100x100/img11.jpg" alt="Image Description">
             </span>
             <span class="avatar avatar-xl avatar-dark avatar-circle">
               <span class="avatar-initials">A</span>
             </span>
             <span class="avatar avatar-xl avatar-circle">
               <img class="avatar-img" src="../assets/img/100x100/img3.jpg" alt="Image Description">
             </span>
             <span class="avatar avatar-xl avatar-primary avatar-circle">
               <span class="avatar-initials">3+</span>
             </span>
           </div>
         </div>
       
         <div class="col-auto">
           <div class="avatar-group mb-1">
             <span class="avatar avatar-lg avatar-circle">
               <img class="avatar-img" src="../assets/img/100x100/img11.jpg" alt="Image Description">
             </span>
             <span class="avatar avatar-lg avatar-dark avatar-circle">
               <span class="avatar-initials">A</span>
             </span>
             <span class="avatar avatar-lg avatar-circle">
               <img class="avatar-img" src="../assets/img/100x100/img3.jpg" alt="Image Description">
             </span>
             <span class="avatar avatar-lg avatar-primary avatar-circle">
               <span class="avatar-initials">3+</span>
             </span>
           </div>
         </div>
       
         <div class="col-auto">
           <div class="avatar-group mb-1">
             <span class="avatar avatar-circle">
               <img class="avatar-img" src="../assets/img/100x100/img11.jpg" alt="Image Description">
             </span>
             <span class="avatar avatar-dark avatar-circle">
               <span class="avatar-initials">A</span>
             </span>
             <span class="avatar avatar-circle">
               <img class="avatar-img" src="../assets/img/100x100/img3.jpg" alt="Image Description">
             </span>
             <span class="avatar avatar-primary avatar-circle">
               <span class="avatar-initials">3+</span>
             </span>
           </div>
         </div>
       
         <div class="col-auto">
           <div class="avatar-group mb-1">
             <span class="avatar avatar-sm avatar-circle">
               <img class="avatar-img" src="../assets/img/100x100/img11.jpg" alt="Image Description">
             </span>
             <span class="avatar avatar-sm avatar-dark avatar-circle">
               <span class="avatar-initials">A</span>
             </span>
             <span class="avatar avatar-sm avatar-circle">
               <img class="avatar-img" src="../assets/img/100x100/img3.jpg" alt="Image Description">
             </span>
             <span class="avatar avatar-sm avatar-primary avatar-circle">
               <span class="avatar-initials">3+</span>
             </span>
           </div>
         </div>
       
         <div class="col-auto">
           <div class="avatar-group mb-1">
             <span class="avatar avatar-xs avatar-circle">
               <img class="avatar-img" src="../assets/img/100x100/img11.jpg" alt="Image Description">
             </span>
             <span class="avatar avatar-xs avatar-dark avatar-circle">
               <span class="avatar-initials">A</span>
             </span>
             <span class="avatar avatar-xs avatar-circle">
               <img class="avatar-img" src="../assets/img/100x100/img3.jpg" alt="Image Description">
             </span>
             <span class="avatar avatar-xs avatar-primary avatar-circle">
               <span class="avatar-initials">3+</span>
             </span>
           </div>
         </div>
       </div>

Status

Looking for larger or smaller status size? Add .avatar-sm-status or .avatar-lg-status for additional sizes.

Image Description
Image Description
<div class="avatar mr-3">
         <img class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
         <span class="avatar-status avatar-sm-status avatar-primary"></span>
       </div>
       <div class="avatar avatar-circle mr-3">
         <img class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
         <span class="avatar-status avatar-sm-status avatar-primary"></span>
       </div>

Color variants

Use predefined color classes.

Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
<div class="avatar avatar-circle mr-3">
         <img class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
         <span class="avatar-status avatar-sm-status avatar-primary"></span>
       </div>
       <div class="avatar avatar-circle mr-3">
         <img class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
         <span class="avatar-status avatar-sm-status avatar-secondary"></span>
       </div>
       <div class="avatar avatar-circle mr-3">
         <img class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
         <span class="avatar-status avatar-sm-status avatar-success"></span>
       </div>
       <div class="avatar avatar-circle mr-3">
         <img class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
         <span class="avatar-status avatar-sm-status avatar-danger"></span>
       </div>
       <div class="avatar avatar-circle mr-3">
         <img class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
         <span class="avatar-status avatar-sm-status avatar-warning"></span>
       </div>
       <div class="avatar avatar-circle mr-3">
         <img class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
         <span class="avatar-status avatar-sm-status avatar-info"></span>
       </div>
       <div class="avatar avatar-circle mr-3">
         <img class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
         <span class="avatar-status avatar-sm-status avatar-light"></span>
       </div>
       <div class="avatar avatar-circle mr-3">
         <img class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
         <span class="avatar-status avatar-sm-status avatar-dark"></span>
       </div>
       <div class="avatar avatar-circle mr-3">
         <img class="avatar-img" src="../assets/img/160x160/img2.jpg" alt="Image Description">
         <span class="avatar-status avatar-sm-status avatar-dark"></span>
       </div>

Forms

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Bootstrap Forms documentation

Form controls

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
<form>
         <div class="form-group">
           <label class="input-label" for="exampleFormControlInput1">Text</label>
           <input type="text" id="exampleFormControlInput1" class="form-control" placeholder="John Doe">
         </div>
       
         <div class="form-group">
           <label class="input-label" for="exampleFormControlInput2">Password</label>
           <input type="password" id="exampleFormControlInput2" class="form-control" value="********">
         </div>
       
         <div class="form-group">
           <label class="input-label">Helper text</label>
           <input type="password" class="form-control" value="**********">
           <span class="text-muted font-size-1">Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.</span>
         </div>
       
         <div class="form-group">
           <label class="input-label" for="exampleFormControlInput3">Email</label>
           <input type="email" id="exampleFormControlInput3" class="form-control" placeholder="name@example.com">
         </div>
       
         <div class="form-group">
           <label class="input-label" for="exampleFormControlSelect1">Select</label>
           <select id="exampleFormControlSelect1" class="form-control">
             <option>Choose an option</option>
             <option>2</option>
             <option>3</option>
             <option>4</option>
             <option>5</option>
           </select>
         </div>
       
         <div class="form-group">
           <label class="input-label" for="exampleFormControlSelect2">Multiple select</label>
           <select id="exampleFormControlSelect2" class="form-control" size="3" multiple>
             <option>1</option>
             <option>2</option>
             <option>3</option>
             <option>4</option>
             <option>5</option>
           </select>
         </div>
       
         <div class="form-group">
           <label class="input-label" for="exampleFormControlTextarea1">Textarea</label>
           <textarea id="exampleFormControlTextarea1" class="form-control" placeholder="Textarea field" rows="4"></textarea>
         </div>
       
         <div class="form-group">
           <label class="input-label">Range input</label>
           <input type="range" class="custom-range" value="3" min="0" max="10">
         </div>
       </form>

Input group break

Long contents don't fit in small screens? Use .input-group-{breakpoint}-down-break classes to break horizontal alignment and keep the same style in vertical order. Reduce browser size to see it in action.

<div class="input-group input-group-md-down-break">
         <!-- Custom Radio -->
         <div class="form-control">
           <div class="custom-control custom-radio">
             <input type="radio" class="custom-control-input" name="genderTypeRadio" id="genderTypeRadio1">
             <label class="custom-control-label" for="genderTypeRadio1">Male</label>
           </div>
         </div>
         <!-- End Custom Radio -->
       
         <!-- Custom Radio -->
         <div class="form-control">
           <div class="custom-control custom-radio">
             <input type="radio" class="custom-control-input" name="genderTypeRadio" id="genderTypeRadio2" checked>
             <label class="custom-control-label" for="genderTypeRadio2">Female</label>
           </div>
         </div>
         <!-- End Custom Radio -->
       
         <!-- Custom Radio -->
         <div class="form-control">
           <div class="custom-control custom-radio">
             <input type="radio" class="custom-control-input" name="genderTypeRadio" id="genderTypeRadio3">
             <label class="custom-control-label" for="genderTypeRadio3">Other</label>
           </div>
         </div>
         <!-- End Custom Radio -->
       </div>

Full vertical example:

<div class="input-group input-group-down-break">
         <!-- Custom Radio -->
         <div class="form-control">
           <div class="custom-control custom-radio">
             <input type="radio" class="custom-control-input" name="verticalExampleGenderTypeRadio" id="verticalExampleGenderTypeRadio1">
             <label class="custom-control-label" for="verticalExampleGenderTypeRadio1">Male</label>
           </div>
         </div>
         <!-- End Custom Radio -->
       
         <!-- Custom Radio -->
         <div class="form-control">
           <div class="custom-control custom-radio">
             <input type="radio" class="custom-control-input" name="verticalExampleGenderTypeRadio" id="verticalExampleGenderTypeRadio2" checked>
             <label class="custom-control-label" for="verticalExampleGenderTypeRadio2">Female</label>
           </div>
         </div>
         <!-- End Custom Radio -->
       
         <!-- Custom Radio -->
         <div class="form-control">
           <div class="custom-control custom-radio">
             <input type="radio" class="custom-control-input" name="verticalExampleGenderTypeRadio" id="verticalExampleGenderTypeRadio3">
             <label class="custom-control-label" for="verticalExampleGenderTypeRadio3">Other</label>
           </div>
         </div>
         <!-- End Custom Radio -->
       </div>

Custom file attachments

We use HS File Attach library to make file attachments functional.

For file inputs, swap the .form-control for .form-control-file.

<form>
         <div class="custom-file">
           <input type="file" class="js-file-attach custom-file-input" id="customFile"
                   data-hs-file-attach-options='{
                     "textTarget": "[for=\"customFile\"]"
                  }'>
           <label class="custom-file-label" for="customFile">Choose file</label>
         </div>
       </form>

Customized modern button look

<form>
         <!-- File Attachment Button -->
         <label class="btn btn-sm btn-primary transition-3d-hover file-attachment-btn" for="fileAttachmentBtn">
           <span id="customFileExample5">Choose file to upload</span>
           <input id="fileAttachmentBtn" name="file-attachment" type="file" class="js-file-attach file-attachment-btn-label"
                  data-hs-file-attach-options='{
                     "textTarget": "#customFileExample5"
                  }'>
         </label>
         <!-- End File Attachment Button -->
       </form>

Update photo

Upload Photo
<form>
         <label class="avatar avatar-xl avatar-circle mr-4" for="avatarUploader">
           <img id="avatarImg" class="avatar-img" src="../assets/img/160x160/img1.jpg" alt="Image Description">
         </label>
         <div class="btn btn-sm btn-primary file-attachment-btn">Upload Photo
           <input type="file" class="js-file-attach file-attachment-btn-label" id="avatarUploader"
                  data-hs-file-attach-options='{
                     "textTarget": "#avatarImg",
                     "mode": "image",
                     "targetAttr": "src"
                     "allowTypes": [".png", ".jpeg", ".jpg"]
                  }'>
         </div>
       </form>

or this one

<form>
         <!-- File Attachment Input -->
         <label class="file-attachment-input" for="fileAttachmentInput">
           <span id="customFileExample4">Browse your device and upload documents</span>
           <small class="d-block text-muted">Maximum file size 10MB</small>
       
           <input id="fileAttachmentInput" name="file-attachment" type="file" class="js-file-attach file-attachment-input-label"
                  data-hs-file-attach-options='{
                    "textTarget": "#customFileExample4"
                  }'>
         </label>
         <!-- End File Attachment Input -->
       </form>

Disabled & Readonly Fields

Use readonly or disabled attributes for .form-control

<div class="form-group row">
         <label class="col-sm-3 col-form-label">Readonly plain text</label>
         <div class="col-sm-9">
           <input type="text" class="form-control-plaintext" value="email@example.com" readonly>
         </div>
       </div>
       
       <div class="form-group row">
         <label class="col-sm-3 col-form-label">Readonly field</label>
         <div class="col-sm-9">
           <input type="text" class="form-control" value="Read only" readonly>
         </div>
       </div>
<div class="form-group">
         <label>Disabled input</label>
         <input type="text" class="form-control" placeholder="Disabled input" disabled>
       </div>
       
       <div class="form-group">
         <label>Disabled select</label>
         <select class="custom-select" disabled>
           <option>Choose an option</option>
           <option>2</option>
           <option>3</option>
           <option>4</option>
           <option>5</option>
         </select>
       </div>
       
       <div class="form-group">
         <label>Disabled textarea</label>
         <textarea class="form-control" placeholder="Disabled textarea" disabled></textarea>
       </div>
       
       <div class="form-group">
         <label>Disabled file input</label>
         <div class="custom-file">
           <input type="file" id="customFileExample1" class="custom-file-input" disabled>
           <label class="custom-file-label" for="customFileExample1">Choose file</label>
         </div>
       </div>
       
       <div class="form-group">
         <label>Disabled range input</label>
         <input type="range" class="custom-range" value="3" min="0" max="10" disabled>
       </div>

Input group Flush

<div class="row">
         <div class="col-md-6 mb-3 mb-md-0">
           <div class="input-group-flush mb-2">
             <input type="email" class="form-control" placeholder="Email" aria-label="Email">
           </div>
       
           <div class="input-group-flush mb-2">
             <input type="password" class="form-control" placeholder="Password" aria-label="Password">
           </div>
         </div>
       </div>

Input group Merge

<!-- Input Group -->
       <div class="input-group input-group-merge">
         <div class="input-group-prepend">
           <span class="input-group-text">
             <i class="far fa-user"></i>
           </span>
         </div>
         <input type="text" class="form-control" placeholder="Full name" aria-label="Full name">
       </div>
       <!-- End Input Group -->

Borderless form

Add .input-group-borderless to the parent class for an input form without borders.

<div class="row">
         <div class="col-md-6 mb-3 mb-md-0">
           <div class="input-group-borderless mb-2">
             <input type="email" class="form-control" placeholder="Email" aria-label="Email">
           </div>
       
           <div class="input-group-borderless mb-2">
             <input type="password" class="form-control" placeholder="Password" aria-label="Password">
           </div>
         </div>
       </div>

Pilled form

Use the .input-group-pill modifier class to make forms more rounded (with a larger border-radius and additional horizontal padding).

<div class="row">
         <div class="col-md-6 mb-3 mb-md-0">
           <div class="input-group-pill mb-2">
             <input type="email" class="form-control" placeholder="Email" aria-label="Email">
           </div>
       
           <div class="input-group-pill mb-2">
             <input type="password" class="form-control" placeholder="Password" aria-label="Password">
           </div>
       
           <!-- Input Group -->
           <div class="input-group input-group-pill input-group-merge">
             <div class="input-group-prepend">
               <span class="input-group-text">
                 <i class="far fa-user"></i>
               </span>
             </div>
             <input type="text" class="form-control" placeholder="Full name" aria-label="Full name">
           </div>
           <!-- End Input Group -->
         </div>
       </div>

Checkbox and radios

You will receive notifications about actions to your email.
<div class="form-group">
         <div class="custom-control custom-checkbox">
           <input type="checkbox" id="customCheck11" class="custom-control-input">
           <label class="custom-control-label" for="customCheck11">Unchecked</label>
         </div>
       </div>
       
       <div class="form-group">
         <div class="custom-control custom-checkbox">
           <input type="checkbox" id="customCheck12" class="custom-control-input" checked>
           <label class="custom-control-label" for="customCheck12">Checked</label>
         </div>
       </div>
       
       <div class="form-group">
         <div class="custom-control custom-checkbox">
           <input type="checkbox" id="customCheck13" class="custom-control-input indeterminate-checkbox" checked>
           <label class="custom-control-label" for="customCheck13">Indeterminate</label>
         </div>
       </div>
       
       <div class="form-group">
         <div class="custom-control custom-checkbox">
           <input type="checkbox" id="customHelperCheck1" class="custom-control-input">
           <label class="custom-control-label" for="customHelperCheck1">Notify about new notifications</label>
           <div class="text-muted font-size-1">You will receive notifications about actions to your email.</div>
         </div>
       </div>
       
       <div class="form-group">
         <div class="custom-control custom-checkbox">
           <input type="checkbox" id="customCheck14" class="custom-control-input" disabled>
           <label class="custom-control-label" for="customCheck14">Unchecked and disabled</label>
         </div>
       </div>
       
       <div class="form-group">
         <div class="custom-control custom-checkbox">
           <input type="checkbox" id="customCheck15" class="custom-control-input" checked disabled>
           <label class="custom-control-label" for="customCheck15">Checked and disabled</label>
         </div>
       </div>
You will receive notifications about actions to your email.
<div class="form-group">
         <div class="custom-control custom-radio">
           <input type="radio" id="customRadio1" class="custom-control-input" name="customRadio">
           <label class="custom-control-label" for="customRadio1">Unchecked</label>
         </div>
       </div>
       
       <div class="form-group">
         <div class="custom-control custom-radio">
           <input type="radio" id="customRadio2" class="custom-control-input" checked name="customRadio">
           <label class="custom-control-label" for="customRadio2">Checked</label>
         </div>
       </div>
       
       <div class="form-group">
         <div class="custom-control custom-radio">
           <input type="radio" id="customRadio3" class="custom-control-input" name="customRadio">
           <label class="custom-control-label" for="customRadio3">Unchecked</label>
         </div>
       </div>
       
       <div class="form-group">
         <div class="custom-control custom-radio">
           <input type="radio" id="customRadio4" class="custom-control-input" name="customRadio">
           <label class="custom-control-label" for="customRadio4">Notify about new notifications</label>
           <div class="text-muted font-size-1">You will receive notifications about actions to your email.</div>
         </div>
       </div>
       
       <div class="form-group">
         <div class="custom-control custom-radio">
           <input type="radio" id="customRadio5" class="custom-control-input" disabled name="customRadio">
           <label class="custom-control-label" for="customRadio5">Unchecked and disabled</label>
         </div>
       </div>
       
       <div class="form-group">
         <div class="custom-control custom-radio">
           <input type="radio" id="customRadio6" class="custom-control-input" checked disabled>
           <label class="custom-control-label" for="customRadio6">Checked and disabled</label>
         </div>
       </div>

Group checkboxes or radios on the same horizontal row by adding .form-check-inline to any .form-check.

<div class="form-group">
         <div class="form-check form-check-inline">
           <div class="custom-control custom-checkbox">
             <input type="checkbox" id="customInlineCheck1" class="custom-control-input">
             <label class="custom-control-label" for="customInlineCheck1">Unchecked</label>
           </div>
         </div>
         <div class="form-check form-check-inline">
           <div class="custom-control custom-checkbox">
             <input type="checkbox" id="customInlineCheck2" class="custom-control-input indeterminate-checkbox" checked>
             <label class="custom-control-label" for="customInlineCheck2">Indeterminate</label>
           </div>
         </div>
         <div class="form-check form-check-inline">
           <div class="custom-control custom-checkbox">
             <input type="checkbox" id="customInlineCheck3" class="custom-control-input" checked>
             <label class="custom-control-label" for="customInlineCheck3">Checked</label>
           </div>
         </div>
       </div>
<div class="form-group">
         <div class="form-check form-check-inline">
           <div class="custom-control custom-radio">
             <input type="radio" id="customInlineRadio1" class="custom-control-input" name="customInlineRadio">
             <label class="custom-control-label" for="customInlineRadio1">Unchecked</label>
           </div>
         </div>
         <div class="form-check form-check-inline">
           <div class="custom-control custom-radio">
             <input type="radio" id="customInlineRadio2" class="custom-control-input indeterminate-checkbox" checked name="customInlineRadio">
             <label class="custom-control-label" for="customInlineRadio2">Checked</label>
           </div>
         </div>
         <div class="form-check form-check-inline">
           <div class="custom-control custom-radio">
             <input type="radio" id="customInlineRadio3" class="custom-control-input indeterminate-checkbox" name="customInlineRadio">
             <label class="custom-control-label" for="customInlineRadio3">Unchecked</label>
           </div>
         </div>
       </div>

Checkbox bookmark New

<!-- Checkbbox Bookmark -->
       <div class="custom-control custom-checkbox-bookmark mb-2">
         <input type="checkbox" id="checkboxBookmark1" class="custom-control-input custom-checkbox-bookmark-input">
         <label class="custom-checkbox-bookmark-label" for="checkboxBookmark1">
           <span class="custom-checkbox-bookmark-default">
             <i class="far fa-star"></i>
           </span>
           <span class="custom-checkbox-bookmark-active">
             <i class="fas fa-star"></i>
           </span>
           <span class="text-dark ml-2">Star checkbox</span>
         </label>
       </div>
       <!-- End Checkbbox Bookmark -->
       
       <!-- Checkbbox Bookmark -->
       <div class="custom-control custom-checkbox-bookmark">
         <input type="checkbox" id="checkboxBookmark2" class="custom-control-input custom-checkbox-bookmark-input">
         <label class="custom-checkbox-bookmark-label" for="checkboxBookmark2">
           <span class="custom-checkbox-bookmark-default">
             <i class="far fa-bookmark"></i>
           </span>
           <span class="custom-checkbox-bookmark-active">
             <i class="fas fa-bookmark"></i>
           </span>
           <span class="text-dark ml-2">Bookmark checkbox</span>
         </label>
       </div>
       <!-- End Checkbbox Bookmark -->

Switches

<!-- Checkbox Switch -->
       <label class="toggle-switch d-flex align-items-center mb-3" for="customSwitch1">
         <input type="checkbox" class="toggle-switch-input" id="customSwitch1">
         <span class="toggle-switch-label">
           <span class="toggle-switch-indicator"></span>
         </span>
         <span class="toggle-switch-content">
           <span class="d-block">Unchecked</span>
         </span>
       </label>
       <!-- End Checkbox Switch -->
       
       <!-- Checkbox Switch -->
       <label class="toggle-switch d-flex align-items-center mb-3" for="customSwitch2">
         <input type="checkbox" class="toggle-switch-input" id="customSwitch2" checked>
         <span class="toggle-switch-label">
           <span class="toggle-switch-indicator"></span>
         </span>
         <span class="toggle-switch-content">
           <span class="d-block">Checked</span>
         </span>
       </label>
       <!-- End Checkbox Switch -->
       
       <!-- Checkbox Switch -->
       <label class="toggle-switch d-flex mb-3" for="customSwitch3">
         <input type="checkbox" class="toggle-switch-input" id="customSwitch3">
         <span class="toggle-switch-label">
           <span class="toggle-switch-indicator"></span>
         </span>
         <span class="toggle-switch-content">
           <span class="d-block">Notify about new notifications</span>
           <small class="d-block text-muted">You will receive notifications about actions to your email</small>
         </span>
       </label>
       <!-- End Checkbox Switch -->
       
       <!-- Checkbox Switch -->
       <label class="toggle-switch d-flex align-items-center mb-3" for="customSwitch4">
         <input type="checkbox" class="toggle-switch-input" id="customSwitch4" disabled>
         <span class="toggle-switch-label">
           <span class="toggle-switch-indicator"></span>
         </span>
         <span class="toggle-switch-content">
           <span class="d-block">Disabled</span>
         </span>
       </label>
       <!-- End Checkbox Switch -->
       
       <!-- Checkbox Switch -->
       <label class="toggle-switch d-flex align-items-center mb-3" for="customSwitch5">
         <input type="checkbox" class="toggle-switch-input" id="customSwitch5" checked disabled>
         <span class="toggle-switch-label">
           <span class="toggle-switch-indicator"></span>
         </span>
         <span class="toggle-switch-content">
           <span class="d-block">Checked & disabled</span>
         </span>
       </label>
       <!-- End Checkbox Switch -->

Validation states

Valid feedback
<div class="form-group">
         <label>Valid input</label>
         <input type="text" class="form-control is-valid" placeholder="Placeholder">
       </div>
       
       <div class="form-group">
         <label>Valid select</label>
         <select class="form-control custom-select is-valid">
           <option>Choose an option</option>
           <option>2</option>
           <option>3</option>
           <option>4</option>
           <option>5</option>
         </select>
         <span class="text-success font-size-1">Valid feedback</span>
       </div>
       
       <div class="form-group">
         <label>Valid textarea</label>
         <textarea class="form-control is-valid" placeholder="Textarea field" rows="4"></textarea>
       </div>
       
       <div class="form-group">
         <label>Valid file input</label>
         <div class="custom-file">
           <input type="file" id="customFileExample2" class="custom-file-input is-valid">
           <label class="form-control custom-file-label" for="customFileExample2">Choose file</label>
         </div>
       </div>
Invalid feedback
<div class="form-group">
         <label>Valid input</label>
         <input type="text" class="form-control is-invalid" placeholder="Placeholder">
       </div>
       
       <div class="form-group">
         <label>Valid select</label>
         <select class="form-control custom-select is-invalid">
           <option>Choose an option</option>
           <option>2</option>
           <option>3</option>
           <option>4</option>
           <option>5</option>
         </select>
         <span class="text-success font-size-1">Valid feedback</span>
       </div>
       
       <div class="form-group">
         <label>Valid textarea</label>
         <textarea class="form-control is-invalid" placeholder="Textarea field" rows="4"></textarea>
       </div>
       
       <div class="form-group">
         <label>Valid file input</label>
         <div class="custom-file">
           <input type="file" id="customFileExample3" class="custom-file-input is-invalid">
           <label class="form-control custom-file-label" for="customFileExample3">Choose file</label>
         </div>
       </div>

Buttons

Use Front's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Bootstrap Buttons documentation

Usage

<button type="button" class="btn btn-primary">Primary</button>

Button types

Use .btn-*, .btn-outline-*, .btn-soft-*, .btn-ghost-* classes to change the visual style of the button.

<button type="button" class="btn btn-primary">Primary</button>
       <button type="button" class="btn btn-outline-primary">Outline</button>
       <button type="button" class="btn btn-soft-primary">Soft</button>
       <button type="button" class="btn btn-ghost-primary">Ghost</button>
       <button type="button" class="btn btn-link">link</button>

Button pilled

<button type="button" class="btn btn-primary btn-pill">Primary</button>

Color variants New option

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

Outline buttons

Use .btn-outline-*

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

Soft buttons

Use .btn-soft-*

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

Ghost buttons

Use .btn-ghost-*

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

Button icons

<button type="button" class="btn btn-primary">
         Add to Cart
         <i class="fas fa-shopping-cart ml-1"></i>
       </button>
<button type="button" class="btn btn-primary btn-icon">
         <i class="fas fa-eye"></i>
       </button>
       <button type="button" class="btn btn-primary btn-icon">
         <i class="fas fa-plus"></i>
       </button>
       <button type="button" class="btn btn-primary btn-icon">
         <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
       </button>

Button group

<div class="btn-group btn-group-toggle" data-toggle="buttons">
         <label class="btn btn-primary active">
           <input type="radio" name="options" id="option1" checked> Active
         </label>
         <label class="btn btn-primary">
           <input type="radio" name="options" id="option2"> Radio
         </label>
         <label class="btn btn-primary">
           <input type="radio" name="options" id="option3"> Radio
         </label>
       </div>

Button sizes

Fancy larger smaller or extra smaller buttons? Add .btn-lg or .btn-sm for additional sizes.

<button type="button" class="btn btn-primary btn-pill">Primary</button>
<button type="button" class="btn btn-primary btn-icon btn-lg">
         <i class="fas fa-shopping-cart"></i>
       </button>
       <button type="button" class="btn btn-primary btn-icon">
         <i class="fas fa-shopping-cart"></i>
       </button>
       <button type="button" class="btn btn-primary btn-icon btn-sm">
         <i class="fas fa-shopping-cart"></i>
       </button>
       <button type="button" class="btn btn-primary btn-icon btn-xs">
         <i class="fas fa-shopping-cart"></i>
       </button>

Button with loader

Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.

<button class="btn btn-primary" type="button" disabled>
         <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
         <span class="sr-only">Loading...</span>
       </button>
       <button class="btn btn-primary" type="button" disabled>
         <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
         Loading...
       </button>
<button class="btn btn-primary" type="button" disabled>
         <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
         <span class="sr-only">Loading...</span>
       </button>
       <button class="btn btn-primary" type="button" disabled>
         <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
         Loading...
       </button>