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;   margin: 20px; } You can try to run the following code to implement the border-danger class −ExampleLive Demo       Bootstrap Example                             .new {       width: 120px;       height: 120px;       margin: 20px;      }         Rectangle with red border:   Red Border

Use .align-content-*-around to align gathered items "around" on different screens in Bootstrap 4.Align the gathered items around on different devices as shown below −Small DevicesMedium DevicesLarge DevicesYou can try to run the following code to implement the align-content-*-around class −ExampleLive Demo       Bootstrap Example                               Example           One       Two       Three       Four       Five       Six ... Read More

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 −ExampleLive Demo       Bootstrap Example                                   Example       This is demo text       Demo Baseline       Top Alignment       Middle Alignment       Bottom Alignment    

Use the .align-items-*-baseline in Bootstrap 4 to align single rows of items at the baseline on different screens.On different screen sizes, align single rows of items as shown below −Align at the baseline on Small Screen Size   Item 1   Item 2   Item 3   Item 4 Align at the baseline on Medium Screen Size   Item 1   Item 2   Item 3   Item 4 Align at the baseline on Large Screen Size   Item 1   Item 2   Item 3   Item 4 You can try to run the following code to align single ... Read More

Use the border-top-0 class to remove the top border from an element.Set the class as if we add any other class to an element −   Top border is missing Above, I have taken as our element. Another class “mystyle” is also added that styles our div −.mystyle {   width: 350px;   height: 170px;   margin: 10px; }You can try to run the following code to work with the border-top-0 class in Bootstrap 4 −ExampleLive Demo       Bootstrap Example                             .mystyle {       width: 350px;       height: 170px;       margin: 10px;     }         Rectangle   Top border is missing

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