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 on Trending Technologies
Technical articles with clear explanations and examples
Avoid wrapping flex-items in Bootstrap
Use the flex-nowrap class in Bootstrap 4 to avoid wrapping the flex items.Here you can see the difference between wrap and nowrap −Above the flex-items are not wrapped. This is achieved using the flex-nowrap class in Bootstrap 4 − One Two Three Four Five Six Seven Eight Nine The following is an example to avoid wrapping flex items −Example Bootstrap Example FLEX WRAP AND NOWRAP Flex items will wrap One Two Three Four Five Six Seven Eight Nine Flex items won't wrap One Two Three Four Five Six Seven Eight Nine
Read MoreCreate a green button (success) with Bootstrap
Use the .btn-success class in Bootstrap to create a green button that indicates successExample Bootstrap Example Click below if you want to know the result of successful students: Submit
Read MoreDark grey outlined Bootstrap 4 Button
To set dark grey outlined border to a button, use the btn-outline-dark class.Include the brn-outline-dark class as if you add any other class to an element. Here, we have the button element since we want a dark grey outline for our button: Dark gray outline Let us see an eample to implement the btn-outline-dark class in Bootstrap −Example Bootstrap Example Bootstrap 4 Learning btn-outline-dark class usage: Dark gray outline
Read MoreCreate Dismissal Alerts in Bootstrap
To create a dismissal alert −Add a basic alert by creating a wrapper and adding a class of .alert and one of the four contextual classes, for example, .alert-success, .alert-info, etc.Also add optional .alert-dismissable to the above class.Add a close button.You can try to run the following code to create dismissal alerts −Example Bootstrap Example × Success! Well done its submitted. × Info! Take this info.
Read MoreBootstrap 4 Button .btn-outline-primary class
The btn-outline-primary class is used in Bootstrap 4 to set blue outlined button.Add blue outline to the button using the btn-outline-primary class as shown in the following code snippet − Result You can try to run the following code to implement the btn-outline-primary class −Example Bootstrap Example Result Click below to get the result: Result
Read MoreHow to implement Bootstrap 4 .flex-*-nowrap class
The flex-*-nowrap class works like flex-no-wrap class to avoid wrapping of flex items.However, if you want to avoid wrapping on different screen sizes, then use the flex-*-no-wrap class like −flex-lg-nowrap: Avoid wrapping on large screen sizeflex-sm-nowrap: Avoid wrapping on small screen sizeflex-md-nowrap: Avoid wrapping on medium screen sizeThe following is an example to implement the flex-*-nowrap class −Example Bootstrap Example Flex items will wrap One ...
Read MoreSet success action for a list item in a list group with Bootstrap
Use the list-group-item-success class in Bootstrap to set success action for a list item in a list group.You can try to run the following code to implement the list-group-item-success class −Example Bootstrap Example Java Interfaces Multi-threading Packages
Read MoreContainer to create a grid of Bootstrap 4 cards
Create a grid of cards with Bootstrap 4, using the card-columns class.Set the grid inside the class − Include the card body inside the card container as in the following code snippet. I have added the card body under the card-class. The card-class is added inside the card-columns class − Accessories Let us see an example to create a grid of cards in Bootstrap −Example Bootstrap Example Products Accessories Furnitures
Read MoreStretch single rows of items in Bootstrap 4
Use the .align-items-stretch class to stretch single rows of items in Bootstrap 4.To stretch single rows of items −
Read MoreAlign an element with the top of the tallest element on the line in Bootstrap 4
Use align-top class to align an element with the top of the tallest element on the line.Align the element like this − Top Alignment Let us see an example to implement the align-top class in Bootstrap 4 −Example Bootstrap Example Example This is demo text Demo Baseline Top Alignment Middle Alignment Bottom Alignment
Read More