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
CSS Framework Articles
Page 38 of 45
Remove borders from an element in Bootstrap
Use the border-0 class in Bootstrap 4 to remove all borders from an element in Bootstrap 4 − no border Above, we have the div class to no-border class and this allow us to remove the borders from the element.Let us see an example to implement the border-0 class in Bootstrap −Example Bootstrap Example .mystyle { width: 120px; height: 100px; margin: 10px; background: maroon; } Rectangle no border
Read MoreBootstrap .modal("show") method
The modal(“show”) method opens a modal like below −The modal is displayed using the modal(“show”) method as shown below −$("#newModal").modal("show");Let us see an example of modal(“show”) method −Example Bootstrap Example #button1 { width: 140px; padding: 20px; bottom: 150px; z-index: 9999; font-size: 15px; position: absolute; margin: 0 auto; } ...
Read MoreSet a light grey border to an element in Bootstrap 4
To set a light grey border to an element, use the border border-light class in Bootstrap 4.Adding a light border is easy as shown below − This element has light border You can try to run the following code to implement the border-light-class −Example Bootstrap Example .demo { width: 150px; height: 220px; margin: 15px; } Demo This element has light border
Read MoreBootstrap 4 .border-primary class
Add a blue border to an element in Bootstrap 4 using the border-primary class as shown below:Set the class as − Blue Border You can try to run the following code to implement the border-primary class −Example Bootstrap Example .demo { width: 250px; height: 170px; margin: 10px; } Demo Heading Blue Border
Read MoreBootstrap 4 .border-right-0 class
Use the border-right-0 class in Bootstrap to remove the right border.To remove the right border − Rectangle is missing the right border. Style the div as −.mystyle { width: 350px; height: 170px; margin: 10px; }You can try to run the following code to implement the border-right- 0 class −Example Bootstrap Example .mystyle { width: 350px; height: 170px; margin: 10px; } Heading Two Rectangle is missing the right border.
Read MoreBootstrap 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 More