Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Articles by Amit Diwan
Page 2 of 8
Set light grey outlined Bootstrap 4 Button
To set an outline on a button that is of light grey color, you need to use the btn-outline-light class in Bootstrap.Use the class as − Sample You can try to run the following code to implement the btn-outline-light class −Example Bootstrap Example Demo Button A light colored button is visible below: Sample
Read MoreBootstrap 4 .rounded-circle class
To create a rounded circle with Bootstrap, use the rounded-circle class.Add the rounded-circle class in the Above, we also have a test class, which is a CSS class to style the circle −.test { width: 270px; height: 320px; background-color: yellow; }You can try to run the following code to implement the rounded-circle class in Bootstrap 4 −Example Bootstrap Example .test { width: 350px; height: 320px; background-color: yellow; } Circle We have a circle below:
Read MoreBootstrap 4 .card-text class
Use the card-text class in Bootstrap to set text in a card. Add this class in your web page by including it as any other class in an element, for example, tag in the below given code snippet − Demo text in a card The text in the card is added inside the class using the card-text class − Demo Title Demo text in a card You can try to run the following code to implement the card-text class −Example Bootstrap Example Demo Demo Title Demo text in a card
Read MoreAlign single rows of items at the baseline in Bootstrap 4
Align single rows of items at the baseline in Bootstrap 4, use the .align-items-baseline class.To align at the baseline:
Read MoreAlign a flex item in the center with Bootstrap 4
To align a flex item in the center with Bootstrap 4, use the .align-self-center class.The following is my div for flex −Now add flex items and here I have applied the align-self-center class on the 3rd flex item − A-one B-one C-one D-one You can try to run the following code to implement the align-self-center class in Bootstrap −Example Bootstrap Example Align Specific Flex Item in the center A-one B-one C-one D-one
Read MoreSet key content with Bootstrap 4 card
Add key stuff to a Bootstrap card, using the bg-primary class with the card class.Use the bg-primary class in the card class − Eisner Award I have used the text-white class above, to set the text to be white.Let us see a example how to include key stuff in a Bootstrap 4 card −Example Bootstrap Example Awards The Pulitzer Prize Eisner Award Hugo & Nebula Awards
Read MoreImplement .popover("toggle") method in Bootstrap
To toggle the popover on button click, use the popver(“toggle”) method.Set the popover toggle as −$(document).ready(function(){ $(".btn-default").click(function(){ $("[data-toggle='popover']").popover('toggle'); }); });On button click, the popover generates − (Course) Toggle Popover The popver, on button click, generates the popover on a link − Learn The following is an example stating the usage of popver(“toggle”) method −Example Bootstrap Example Learn The following is the button: (Course) Toggle Popover $(document).ready(function(){ $(".btn-default").click(function(){ $("[data-toggle='popover']").popover('toggle'); }); });
Read MoreBootstrap 4 card styled with bg-secondary class
Add less important stuff, using the card class with the bg-secondary contextual class in Bootstrap.This class adds a gray background −Inside that, add the card body − English You can try to run the following code to implement the card class with bg-secondary class in Bootstrap −Example Bootstrap Example Languages English French Chinese Russian
Read MoreAlign single rows of items at the end in Bootstrap 4
To align single rows of items at the end, use the .align-items-end class in Bootstrap 4.Align using the align-items-end class −Now add the flex items to align single rows of items − Product 1 Product 2 Product 3 Let us see an example to align single rows of items at the end −Example Bootstrap Example Align Flex Items on a single row at the end Product 1 Product 2 Product 3 Product 4
Read Moreshown.bs.popover Bootstrap event
The shown.bs.popover event fires when the popover is completely visible.Firstly, display the popover on button click using the following code −$(".btn-default").click(function(){ $("[data-toggle='popover']").popover('show'); });After that, fire the popover shown.bs.popover event and generate alert −$("[data-toggle='popover']").on('shown.bs.popover', function(){ alert('Popover is completely visible!'); });You can try to run the following code to implement the show.bs.popover event −Example Bootstrap Example Awards Here's the list: List $(document).ready(function(){ ...
Read More