Amit Diwan has Published 103 Articles

Remove the left border from an element in Bootstrap 4

Amit Diwan

Amit Diwan

Updated on 18-Jun-2020 07:52:24

499 Views

The border-left-0 class is used to remove the left border in Bootstrap 4.Use it like the following example −   Removing left border Let us see an example to remove the left border of an element −ExampleLive Demo       Bootstrap Example                             .demo {       width: 220px;       height: 220px;       margin: 50px;     }             Bootstrap 4     Removing left border  

Bootstrap 4 .d-block class

Amit Diwan

Amit Diwan

Updated on 18-Jun-2020 07:50:38

593 Views

Use the .d-block class in Bootstrap to create block element.The d-block class is set as shown in the below code snippet −   block You can try to run the following code to implement the d-block class −ExampleLive Demo       Bootstrap Example       ... Read More

Wrap flex items in reversed order in Bootstrap

Amit Diwan

Amit Diwan

Updated on 18-Jun-2020 07:48:35

127 Views

To wrap flex items in reverse order, you need to use the flex-wrap-reverse class in Bootstrap.To wrap reverse flex items, use the flex-wrap-reverse class −Now add the flex items accordingly −   Rank 1   Rank 2   Rank 3   Rank 4 Let us see an example to implement ... Read More

Show flex items right aligned and horizontally in Bootstrap 4 on a specific screen size

Amit Diwan

Amit Diwan

Updated on 18-Jun-2020 07:38:39

69 Views

To show flex items on the right, horizontal on specific screen sizes, use the flex-*-row-reverse class in Bootstrap 4.Let us see how to set reverese flex items on different screen sizes −Small Screen Size: flex-sm-row-reverse Medium Screen Size: flex-md-row-reverse Large Screen Size: flex-lg-row-reverseYou can try to run the following code to ... Read More

Bootstrap 4 .flex-row class

Amit Diwan

Amit Diwan

Updated on 18-Jun-2020 07:27:40

216 Views

Use the flex-row class in Bootstrap to dispay flex items horizontally.Achieve the following using the flex-row class −Now add the flex-items in the class to allow horizontal alignment −   Audi   BMW   Benz You can try to run the following code to implement the flex-row class −ExampleLive Demo ... Read More

Toggle Bootstrap Modal

Amit Diwan

Amit Diwan

Updated on 18-Jun-2020 07:25:35

368 Views

Use the .modal(“toggle”) method in Bootstrap to toggle the modal.On button click, the modal generates using the modal(“toggle”) method −$(document).ready(function(){   $("#button1").click(function(){     $("#newModal").modal("toggle");   }); });The button is set here using the following code snippet −   Modal One You can try to run the following code to ... Read More

Bootstrap 4 .card-footer class

Amit Diwan

Amit Diwan

Updated on 18-Jun-2020 07:23:31

959 Views

Use the card-footer class in Bootstrap 4 to set the footer of a Bootstrap card.Add it using the class −   Add footer message here The card-footer class comes after the card-header and card-body class −   Details   Timings: 4PM - 8PM   Reach before 4PM You can try ... Read More

Bootstrap 4 .flex-*-row class implementation

Amit Diwan

Amit Diwan

Updated on 18-Jun-2020 07:21:43

123 Views

To set flex items horizontally for different screen sizes like large, small, medium, etc, use the flex-*-row class.Let us see which flex-*-row class is used for different screen sizes −Small Screen Size: flex-sm-row Medium Screen Size: flex-md-row Large Screen Size: flex-lg-rowThe following is an example to set flex items horizontally for ... Read More

Bootstrap .popover("show") method

Amit Diwan

Amit Diwan

Updated on 18-Jun-2020 07:18:57

917 Views

Display the popover using the popver(“show”) method.You need to set the popover as −   Sample Now display the popover −$(document).ready(function(){   $(".btn-default").click(function(){     $("[data-toggle='popover']").popover('show');   }); });Let us see the complete example display how to implement the popover(“show”) method −ExampleLive Demo       Bootstrap Example ... Read More

Display flex items horizontally on a specific screen size in Bootstrap

Amit Diwan

Amit Diwan

Updated on 18-Jun-2020 07:15:45

393 Views

To set flex item horizontally in different screen size, use the flex-*-row class.The varied screen sizes is set for small, medium, large and extra large screen size. Let us see how to align flex items horizontally for small screen size −Flex Row (Small Screen)   Audi   BMW   ... Read More

Advertisements