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 27 of 49
Bootstrap Event when the modal is fully hidden
The hidden.bs.modal event in Bootstrap fires when the modal is completely hidden.Firstly, click on the hide button to hide the modal −$("#button1").click(function(){ $("#newModal").modal("hide"); }); After clicking the button, the hidden.bs.modal fires and generates an alert using the following script −$("#newModal").on('hidden.bs.modal', function () { alert('The modal is completely hidden now!'); });Let us see an example to implement the hidden.bs.modal event −Example Bootstrap Example #button1 { width: 140px; padding: 20px; bottom: 150px; z-index: 9999; ...
Read MoreStretch gathered items on different screens in Bootstrap 4
Use the .align-content-*-stretch in Bootstrap 4 to stretch gathered items on different screens.To stretch items on different screens −Stretch items on Small Screen Work 1 Work 2 Work 3 Work 4 Work 5 Work 6 Stretch items on Medium Screen Work 1 Work 2 Work 3 Work 4 Work 5 Work 6 Stretch items on Large Screen Work 1 Work 2 Work 3 Work 4 Work 5 Work 6 Let us see an example to stretch gathered items on different screen size ...
Read MoreAdd bottom rounded corners to an element in Bootstrap 4
If you want to add rounded corners to an element, then use the rounded-bottom class.Use it on any element like −Above, we have set demo as well for class, for our div that is a rectangle.Here is our demo CSS class − .demo { width: 110px; height: 150px; background-color: blue; } You can try to run the following code to add bottom rounded corners to an element −Example Bootstrap Example .demo { width: 110px; height: 150px; background-color: blue; } Rectangle We have a rectangles with rounded corners (bottom):
Read MoreImplement .popover("toggle") method in Bootstrap
To toggle the popover on button click, use the popver(“toggle”) method.Set the popover toggle as −$(document).ready(function(){ $(".btn-default").click(function(){ $("[data-toggle='popover']").popover('toggle'); }); });On button click, the popover generates − (Course) Toggle Popover The popver, on button click, generates the popover on a link − Learn The following is an example stating the usage of popver(“toggle”) method −Example Bootstrap Example Learn The following is the button: (Course) Toggle Popover $(document).ready(function(){ $(".btn-default").click(function(){ $("[data-toggle='popover']").popover('toggle'); }); });
Read MoreAlign single rows of items at the end in Bootstrap 4
To align single rows of items at the end, use the .align-items-end class in Bootstrap 4.Align using the align-items-end class −Now add the flex items to align single rows of items − Product 1 Product 2 Product 3 Let us see an example to align single rows of items at the end −Example Bootstrap Example Align Flex Items on a single row at the end Product 1 Product 2 Product 3 Product 4
Read Moreshown.bs.popover Bootstrap event
The shown.bs.popover event fires when the popover is completely visible.Firstly, display the popover on button click using the following code −$(".btn-default").click(function(){ $("[data-toggle='popover']").popover('show'); });After that, fire the popover shown.bs.popover event and generate alert −$("[data-toggle='popover']").on('shown.bs.popover', function(){ alert('Popover is completely visible!'); });You can try to run the following code to implement the show.bs.popover event −Example Bootstrap Example Awards Here's the list: List $(document).ready(function(){ ...
Read MoreCreate a block element on a specific screen width with Bootstrap 4
To create a block on a specific screen width, use the .d-*-block class.The specific screen width can be small, medium, large and extra large. Set the class indivifually based on the screen size as shown below − d-sm-block d-md-block d-lg-block< /span> d-xl-block Let us see the complete example to learn how to create a block element on a specific screen width −Example Bootstrap Example Blocks Resize the browser to check the effect d-block d-sm-block d-md-block d-lg-block d-xl-block
Read MoreCreate a Flexbox container with Bootstrap 4
Use the d-flex class in Bootstrap to create a flexbox container.Here, I have set two flex items − One Two Above, I have used the d-flex class to set the container. The container has both the flex items styled using the bg-primary and bg-warning classes respectively.Let us see the complete example −Example Bootstrap Example Understanding Flex One Two
Read MoreSet a green border to an element in Bootstrap to indicate success
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 −Example Bootstrap Example .mystyle { width: 150px; height: 150px; margin: 10px; } Rectangle Green border
Read MoreBootstrap 4 Button .btn-outline-warning class
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 −Example Bootstrap Example Warning The following are the warning messages: semi-colon (;) missing infinite loop For more warning messages: Warning (Errors)
Read More