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
Web Development Articles
Page 738 of 801
Bootstrap Event when the modal is about to be hidden
The hide.bs.modal event in Bootstrap fires when the modal is about to be hidden.Firstly, hide the Bootstrap modal on button click −$("#button1").click(function(){ $("#newModal").modal("hide"); });Now, use the hide.bs.modal class and generate the alert when the modal is about to hide on button click −$("#newModal").on('hide.bs.modal', function () { alert('The modal is about to be hidden.'); });Let us see an example stating the usage of hide.bs.modal event −Example Bootstrap Example #button1 { width: ...
Read MoreDisplay flex items vertically in Bootstrap 4
To display flex items vertically, use the flex-column class in Bootstrap 4 −Now set the flex-items in it − One Two Three Four Five Let us see an example to learn how to learn how to display flex-column class − Example Bootstrap Example Example of Flex Column Stating the usage of flex column class: One Two Three Four Five
Read MoreBootstrap 4 .flex-*-column class
Use the .flex-*- column class in Bootstrap to show flex items vertically on different screen sizes:Set it vertically on small, medium, large, etc screen size. Let us see it on small and medium screen size:Small Screen SizeFlex on different screen size (Small) One Two Three Medium Screen SizeFlex on different screen size (Medium) One Two Three The following is an example implementing what I have shown above the usage of flex-*-column −Example Bootstrap Example ...
Read Moreborder-top-0 class in Bootstrap 4
Use the border-top-0 class in Bootstrap 4 to remove the top border.Set the border-top-0 class − Rectangle is missing the TOP border. Let us see an example to implement the border-top-0 class −Example Bootstrap Example .mystyle { width: 350px; height: 170px; margin: 10px; } Heading Two Rectangle is missing the TOP border.
Read MoreSet orange border on an element in Bootstrap to indicate danger
To set orange border to an element, use the border-warning class − Danger (Orange border) Set the style for the element − .mystyle { width: 200px; height: 100px; margin: 10px; } Let us see an example to implement the border-warning class in Bootstrap −Example Bootstrap Example .mystyle { width: 200px; height: 100px; margin: 10px; } The following are two Rectangles: Danger (Orange border)
Read MoreSet a white border to an element in Bootstrap
Use the border-white class in Bootstrap 4 to set white border to an element. This has white border The test class above styles the element as shown below − .test { width: 120px; height: 100px; margin: 10px; background: blue; } Let us see an example to implement the border-white class in Bootstrap −Example Bootstrap Example .test { width: 120px; height: 100px; margin: 10px; background: blue; } Two Rectangles This has white border This has orange border
Read MoreBootstrap 4 Button .btn-outline-dark class
Use the .btn-outline-dark class in Bootstrap to set dark outline on a button.The following is an example of a button with dark outline −Set the above outline to the button, using the btn-outline-dark class as shown below − Submit You can try to run the following code to implement the btn-outline-dark class −Example Bootstrap Example Bootstrap 4 Learning btn-outline-dark class usage: Submit
Read MoreBootstrap .modal("toggle") method
Use the .modal(“toggle”) method in Bootstrap to toggle the modal.As shown below, the modal generates on the click of a button −$(document).ready(function(){ $("#button1").click(function(){ $("#newModal").modal("toggle"); }); });Here is the button used above − Modal One You can try to run the following code to implement the modal(“toggle”) method −Example Bootstrap Example Sample Modal One × Sample Modal Click outside to close it. Close $(document).ready(function(){ $("#button1").click(function(){ $("#newModal").modal("toggle"); }); });
Read MoreContainer to create a grid of Bootstrap 4 cards like a group
To set a container for Bootstrap card and set it like a group, use the card-group class.Use it and create a grid like the following with two Bootstrap cards − Demo Text! Warning! The following is an example to create a grid (group of cards) in Bootstrap −Example Bootstrap Example Group of Messages Demo Text! Warning! Well done! Selected!
Read MoreBootstrap 4 .flex-wrap class
Use the flex-wrap class in Bootstrap 4 to wrap flex items. The following is the code snippet to wrap the flex items − . .
Read More