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>
Copy

Link color

Use the .alert-link utility class to quickly provide matching colored links within any alert.

<div class="alert alert-primary" 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>
Copy

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>
Copy

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>
Copy

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>
Copy

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>
Copy

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>
Copy

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>
Copy

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>
Copy
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>
Copy

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>
Copy
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>
Copy

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>
Copy

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>
Copy

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>
Copy

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>
Copy

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>
Copy

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.
Add another email 
<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>
Copy

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>
Copy

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>
Copy

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>
Copy

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>
Copy

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>
Copy

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>
Copy

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>
Copy
<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>
Copy

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>
Copy

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 -->
Copy

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>
Copy

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>
Copy

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>
Copy
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>
Copy

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>
Copy
<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>
Copy

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 -->
Copy

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 -->
Copy

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>
Copy
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>
Copy

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>
Copy

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>
Copy

Button pilled 

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

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>
Copy

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>
Copy

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>
Copy

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>
Copy

Button icons 

<button type="button" class="btn btn-primary">
         Add to Cart
         <i class="fas fa-shopping-cart ml-1"></i>
       </button>
Copy
<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>
Copy

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>
Copy

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>
Copy
<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>
Copy

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>
Copy
<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>
Copy