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
Articles by Ricky Barnes
Page 6 of 9
Set 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 MoreStretch a flex item on different screens in Bootstrap 4
To stretch a flex item on different screens in Bootstrap 4, use the .align-self-*-stretch class.To strect in on different screens, you need to use align-self-sm-stretch, align-self-md-stretch, align-self-lg-stretch, etc. Below is an example for small screen size − A-one B-one C-one D-one You can try to run the following code to stretch a flex item on different screen sizes −Example Bootstrap Example Align Specific Flex Item and Stretch A-one B-one C-one D-one Small Screen Size A-one B-one C-one D-one Medium Screen Size A-one B-one C-one D-one Large Screen Size A-one B-one C-one D-one
Read MoreSet blue outlined Bootstrap 4 Button
To set blue outlined Bootstrap 4 button, use the .btn-outline-primary class.Add a blue outline to a button − Blue outline You can try to run the following code to implement the btn-outline-primary class in Bootstrap −Example Bootstrap Example Bootstrap 4 You can see blue outline below: Blue outline
Read MoreBootstrap 4 Button .btn-outline-light class
Use the btn-outline-light class in Bootsrap 4 to set light grey outlined button.To include it on the web page, set it as a class in the element as shown in the following code snippet −Let us see an example to implement the btn-outline-light class −Example Bootstrap Example Demo Button Below is a light grayed outline button: Sample
Read MoreAlign gathered items from the start in Bootstrap 4
To align gathered items from the start, use the .align-content-start class in Bootstrap 4.Set the items as shown below − Work 1 Work 2 Work 3 Work 4 Work 5 Work 6 You can try to run the following code to implement the align-content-start in Bootstrap 4 −Example Bootstrap Example Align Flex Items Work 1 Work 2 Work 3 Work 4 Work 5 Work 6 Work 7 Work 8 Work 9 Work 10 Work 11 Work 12 Work 13 Work 14
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 MoreBootstrap 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 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 MoreBootstrap 4 .flex-row-reverse class
Use the flex-row-reverse class in Bootstrap to reverse the order of flex items. It also aligns the flex items to the right.Let us see the difference between the default arrangement of flex items and result of row-reverse class −For reversing the order of rows, we have used the flex-row-reverse class like the following code snippet:The following is an example to implement the flex-row-reverse class −Example Bootstrap Example Flex Flex Row Reverse A-ONE B-ONE C-ONE Flex Row A-ONE B-ONE C-ONE
Read More