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
Bootstrap Articles
Page 28 of 49
Set positive action to the Bootstrap 4 card
To set positive/ success action to a card in Bootstrap, use the card-success class.Here, I have set the card-success class like we set class on any element like . Deal! In the same way, set other success messages − Task complete! Let us implement success action on a Bootstrap 4 card −Example Bootstrap Example Success Messages Deal! Cleared the 2nd round! Victory! Task complete!
Read Morecard-title class in Bootstrap 4
Use the card-title class in Bootstrap 4 to set title for the card like the following example −The card title set above used the card-title class inside the card-body class. In addition, I have used the card-text class to set text inside the Bootstrap card as shown in the below give code snippet − Company Locations Singapore Malaysia Australia You can try to run the following code to implement the card-title class −Example Bootstrap Example Location Company Locations Singapore Malaysia Australia
Read Morehide.bs.popover Bootstrap event
The hide.bs.popover event fires when the popover is about to be hidden.Add a click button to hide the popver using the popver(“hide”) method −$(".btn-default").click(function(){ $("[data-toggle='popover']").popover('hide'); });After clicking the button, fire the popover event and generate an alert using the hide.bs.popver event in Bootstrap −$("[data-toggle='popover']").on(hide.bs.popover', function(){ alert('Popover is about to be hidden!'); });You can try to run the following code to implement the hide.bs.popover event −Example Bootstrap Example Awards ...
Read MoreBootstrap .tab("show") method
Use the Bootstrap .tab(“show”) method to display the tabs.The following are the nav tabs − Home PHP C#.NET Ruby HTML5 Using a script and the tab(“show”) method, the above tabs are displayed as in the following code snippet −$(document).ready(function(){ $(".nav-tabs a").click(function(){ $(this).tab('show'); }); });Let us see an example to learn how to display tabs using the tab(“show”) method −Example Bootstrap Example Web Dev ...
Read Moreshow.bs.tab event in Bootstrap
The show.bs.event fires when the tab is about to be displayed.Display the tab using the nav-tabs class − Home Java CSS Bootstrap jQuery After that, you need to use the show.bs.tab class to generate an alert after the tab is clicked, but just before it is displayed −$('.nav-tabs a').on('show.bs.tab', function(){ alert('New tab will be visible now!'); });You can try to run the following code to implement the show.bs.tab event −Example Bootstrap Example ...
Read Moretooltip("show") method in Bootstrap
Use the tooltip(“show”) method in Bootstrap to display the tooltip. As shown below that the tooltip is visible on button click:$(document).ready(function(){ $(".btn-primary").click(function(){ $("[data-toggle='tooltip']").tooltip('show'); }); });The tooltip would be visible on a link wherein I have set the data-toggle attribute and the link text as shown in the following code snippet − On clicking the below button, the tooltip would be visible. You can try to run the following code to implement the tooltip(“show”) method −Example Bootstrap Example ...
Read MoreSet less important stuff with grey outlined Bootstrap 4 Button
To set less important stuff in Bootstrap, use the btn-outline-secondary class.The outline is applied on a button and a green color is applied using the same class − Tools (Secondary Outline) Above, I have set the btn-outline-secondary class as any normal class set on any element, which is button here.You can try to run the following code to learn how to set grey outline Bootstrap Button −Example Bootstrap Example Web Tools The following are the Tools: JSON Editor XML Editor For more, click below: Tools (Secondary Outline)
Read MoreBootstrap 4 .btn-outline-success Button class
Use the btn-outline-success class in Bootstrap to set green outline to a button.Green button outline states success and you can set a button like this − Result Above I have set the class on element just like we set a class on any other element in HTML or Bootstrap.Here is an example to learn how to work with the btn-outline-success class in Bootstrap −Example Bootstrap Example Result The following are the subjects: Maths Digital Electronics For result, click below: Result
Read MorePlace an element in the middle of the parent element in Bootstrap 4
Use align-middle class to place an element in the middle of the parent element.To place an element in the middle − Middle Alignment Let us seen an example to implement the align-middle class in Bootstrap 4 −Example Bootstrap Example Example This is demo text Demo Baseline Top Alignment Middle Alignment Bottom Alignment
Read Moreshown.bs.tooltip event in Bootstrap
The shown.bs.tooltip event in Bootstrap fires when the tooltip is completely displayed:$("[data-toggle='tooltip']").on('shown.bs.tooltip', function(){ alert('Tooltip is completely visible now.'); });The data-toggle attribute above is set on a link, wherein the popup will originate on button click as shown in the following code snippet: Timings You can try to run the following code to implement the shown.bs.tooltip event −Example Bootstrap Example Event Here tooltip will be displayed using the "Show" ...
Read More