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 −ExampleLive Demo       Bootstrap Example                         Result   The following are the subjects:       Maths     Digital Electronics     For result, click below:   Result

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 −ExampleLive Demo       Bootstrap Example                         Web Tools   The following are the Tools:       JSON Editor     XML Editor     For more, click below:   Tools (Secondary Outline)

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 −ExampleLive Demo       Bootstrap Example                 ... Read More

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 −ExampleLive Demo       Bootstrap Example                       ... Read More

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 −ExampleLive Demo       Bootstrap Example                         Web Dev   ... Read More

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 −ExampleLive Demo       Bootstrap Example                         Awards   ... Read More

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 −ExampleLive Demo       Bootstrap Example                         Location             Company Locations       Singapore       Malaysia       Australia      

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 −ExampleLive Demo       Bootstrap Example                         Success Messages       Deal!         Cleared the 2nd  round!         Victory!         Task complete!    

To set an outline on a button that indicates warning, you need to use the btn-outline class in Bootstrap.For my class, I have taken the below button −   Warning (Errors) The button above has the class btn-outline-warning that allow us to add an orange outline stating warning action −You can try to run the following code to implement the btn-outline-warning class −ExampleLive Demo       Bootstrap Example                         Warning   The following are the warning messages:       semi-colon (;) missing     infinite loop     For more warning messages:   Warning (Errors)

To set green border, use the border-success class in Bootstrap 4.The below element will have green border since we have set the class of the as border-success class −   Green border You can try to run the following code to set green border to an element indicating success −ExampleLive Demo       Bootstrap Example                              .mystyle {        width: 150px;        height: 150px;        margin: 10px;      }       Rectangle   Green border