Prime Study Hub

Bootstrap 4 Badges Badges are used to highlight additional information to any content in your ideal website. To create badge, Use badge class with any of the contextual classes like badge-warning to your <span> element that represents the badge. Here is how badge headers will look like? Lets see an example, <h1>Your heading <span class="badge badge-warning">New</span></h1> <h2>Your heading <span class="badge badge-warning">New</span></h2> <h3>Your heading <span class="badge badge-warning">New</span></h3> <h4>Your heading <span class="badge badge-warning">New</span></h4> <h5>Your heading <span class="badge badge-warning">New</span></h5> <h6>Your heading <span class="badge badge-warning">New</span></h6> Demo See the Pen Bootstrap 4 Badges - Basic by Prime Stu...

Bootstrap 4 Card Designs A card is a best way to showcase your products, highlight your top-management team in your organization or display your ideal plan, vision, strategy etc.. in your website to improve the satisfaction of customers. To satisfy this Bootstrap 4 cards provides the variety of ideal design options with responsiveness based on your needs. Let's see how to create a basic card? Add card class to create a card Add card-body class to include content in your card For example,   <div class="card">     <div class="card-body">       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.     </div>   </div> Cards with Contextual classes The Bootstrap 4 cards provides wide variety of contextual classes, you can use this to change the background of the card or to change the text color. Lets see how to ap...

Bootstrap 4 Breadcrumb Breadcrumb indicates the current location of the user by highlighting the navigational hierarchy. The Bootstrap 4 provides the .breadcrumb class which styles a list into a breadcrumb with separators. Bootstrap 4 separators are automatically added through ::before and content property . Let's see how to create an breadcrumb? Include a .breadcrumb class to your element whether it is a ordered list or unordered list. Add a .breadcrumb-item class, inside your each list element. Add a active class to your list element to indicate the users current page. This should be always the last list element. <ol class="breadcrumb">     <li class="breadcrumb-item"><a href="#">Bootstrap</a></li>     <li class="breadcrumb-item"><a href="#">Bootstrap 4</a></li>     <li class="breadcrumb-item active" aria-current="page">Breadcrum...

Bootstrap 4 Alert Box Bootstrap 4 supports a variety of responsive alert messages using predefined contextual classes. The list of contextual classes are, Primary ( .alert-primary ) Secondary ( .alert-secondary )  Success ( .alert-success ) Danger ( .alert-danger ) Warning ( .alert-warning ) Info ( .alert-info ) Light ( .alert-light ) and  Dark ( .alert-dark ) The Bootstrap 4 provides an optional dismiss button as well as it also supports the large length of text without breaking the flexibility. To create an alert box, include the .alert class in your element followed by any of the contextual classes that are mentioned above. Let's look into an example, <div class="alert alert-info" role="alert">   <strong><i class="fa fa-info-circle" aria-hidden="true"></i></strong> Use this alert box when you need to highlight the <b>info</b> message! </div> Demo See the Pen BOOTS...

Bootstrap 4 Jumbotron The Bootstrap 4 jumbotron captures the user's attention with some eye-catching content, offer, discount, etc… Include a .jumbotron class to a <div> element to create remarkable jumbotron. Let's see how to create a jumbotron design? <div class="container"> <div class="jumbotron">   <h1 class="display-4">Bootstrap 4 Jumbotron!</h1>   <p class="lead">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>   <hr class="my-4">   <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>   <p class="lead">     <a class="btn btn-primary btn...

Bootstrap 4 supports extraordinary ways to validate your form using the charismatic Tooltips. It also supports both .valid and .invalid feedback as well. For custom validation, you'll need to include  novalidate  attribute in your form like below, <form class="needs-validation" novalidate > </form> The .valid-tooltip class is used to display the valid feedback message. For invalid feedback message, you'll simply have to include .invalid-tooltip class. Lets see an example, <div class="container"> <h3> <a href="https://primestudyhub.blogspot.com/search/label/Bootstrap%204" target="_blank">BOOTSTRAP 4 FORM VALIDATION - ADVANCED</a></h3> <a href="https://primestudyhub.blogspot.com/search/label/Bootstrap%204" target="_blank">Learn More</a> <form class="needs-validation" novalidate> <div class="form-row"> <div class=...

Bootstrap 4 form validation This bootstrap 4 form validation supports widely used browsers with ideal responsiveness. It provides a valuable response to your customer based on their input with HTML5 form validation. It also supports the custom validation as well. If you like to learn more about the different types of form layouts click here . Note: Bootstrap highly recommends  custom validation styles as native browser defaults are not announced to screen readers. Example <div class="container"> <h3> <a href="https://primestudyhub.blogspot.com/search/label/Bootstrap%204" target="_blank">BOOTSTRAP 4 FORM VALIDATION</a></h3> <form class="needs-validation" novalidate> <div class="form-row"> <div class="input-group col-md-4 mb-2 mr-sm-2"> <div class="input-group-prepend"> <div class="input-group-text">Name</div> ...

Bootstrap 4 form design Design responsive and fancy styled forms using bootstrap 4 form components. This drives the ideal visibility of your website. Bootstrap 4 provides the three types of form layouts, Default ( Stacked ) forms Form grid Inline forms Default (Stacked) forms Include a  .form-group  class to your form is the best way to wrap your desired form into some structure. It persuades ideal grouping of labels, help text, controls, validations etc.. <form> <div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" id="name" placeholder="Enter Name"> </div> <div class="form-group"> <label for="email">Email</label> <input type="email" class="form-control" id="email" placeholder="Enter Email"> </div> <div class="fo...

Bootstrap 4 radio button This Bootstrap 4 radio button design outlines the most important things you should do when creating a form in your website in order to improve your brand identity and customer satisfaction. It covers Bootstrap 4 Radio Button Group, Radio Button Style, Stacked, Inline and Without labels Radio Button and More. Follow these practices to improve the brand identity to your website. Radio button is a best way to make a single choice among many different options. STACKED RADIO BUTTON This is the default radio button. Any number of radios that are created will be vertically stacked and appropriately spaced with  .form-check  class by adding into your input element. Follow the below example to understand in depth. <div class="form-check"> <input class="form-check-input" type="radio" name="Radios" id="Radio1" value="Option1"> <label class="form-check-label" for="Radio...

The textAngular is a fascinating tool for HTML Text Editor using AngularJS framework. This provides a lots of features in HTML text editing, few of them are listed below. Two Way Data Binding Easy Setting Up the Editor Styling the Editor Customising the Toolbar Toggle HTML / Rich Text Works with browsers like Chrome, Firefox, and IE8+ Very Important Does not use an iFrame. You can download the textAngular by clicking  here  or you can use the CDN URL below. CDN URL:  https://cdnjs.cloudflare.com/ajax/libs/textAngular /1.4.2/dist/textAngular.min.js Include the script tag similar to the following, < script src = ' https://cdnjs.cloudflare.com/ajax/libs/textAngular/1.4.2/dist/textAngular.min.js ' ></ script > Your js file should be like this, var myApp = angular.module('MyApp', ['textAngular']); This creates a dependency to  textAngular  in your app module. Next Step, you have to create an html element that holds the ed...