Alex Onsman has Published 203 Articles

Turn an image into a Bootstrap 4 card background

Alex Onsman

Alex Onsman

Updated on 17-Jun-2020 11:04:37

3K+ Views

Use the card-img-overlay class to turn an image into a card background.You need to first set the element and then use the card-img-overlay class as in the following code snippet −         Avro     Tutorial for Apache Avro     Learn   ... Read More

Bootstrap 4 .border-warning class

Alex Onsman

Alex Onsman

Updated on 16-Jun-2020 13:26:02

154 Views

Use the border-warning class in Bootstrap to set orange border to an element.To add orange border, set the div as −   Warning (Orange border) You can try to run the following code to implement the border-warning class −ExampleLive Demo       Bootstrap Example     ... Read More

Style navigation tabs inside the Bootstrap 4 card header

Alex Onsman

Alex Onsman

Updated on 16-Jun-2020 13:03:44

218 Views

To style navigation tab inside the card header in Bootstrap 4, use the .card-header-tabs and create navigation tabs like the below example −The following is an example to style navigation tabs inside the Bootstrap 4 card header −ExampleLive Demo       Bootstrap Example       ... Read More

Bootstrap 4 .card-header-pills class

Alex Onsman

Alex Onsman

Updated on 16-Jun-2020 12:57:54

429 Views

Use the card-header-pills class in Bootstrap 4 to style navigation pills in card header.Set the navigation using the card-header-pills −The following is the code snippet to use the car-header-pills class with the na-pills class −                     Java   ... Read More

Bootstrap 4 .border-secondary class

Alex Onsman

Alex Onsman

Updated on 16-Jun-2020 11:56:36

156 Views

Use the border-secondary class in Bootstrap 4 to add a gray border to an element.Set the border as −   Gray border I have styled our element as shown in the following code snippet − .test {   width: 200px;   height: 150px;   margin: 10px; } You can ... Read More

tooltip("show") method in Bootstrap

Alex Onsman

Alex Onsman

Updated on 16-Jun-2020 09:13:04

216 Views

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 ... Read More

Set less important stuff with grey outlined Bootstrap 4 Button

Alex Onsman

Alex Onsman

Updated on 16-Jun-2020 09:10:44

48 Views

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 ... Read More

Bootstrap 4 .btn-outline-success Button class

Alex Onsman

Alex Onsman

Updated on 16-Jun-2020 09:09:03

228 Views

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 ... Read More

shown.bs.tooltip event in Bootstrap

Alex Onsman

Alex Onsman

Updated on 16-Jun-2020 08:55:32

253 Views

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 ... Read More

Bootstrap 4 .border-danger class

Alex Onsman

Alex Onsman

Updated on 16-Jun-2020 08:52:41

202 Views

Use the border-danger class to set a red border to an element.Set the border-danger class to an element as if we include any other class −   Red Border Above, we have also set another class “new”, to style the element − .new {   width: 120px;   height: 120px; ... Read More

Advertisements