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
Stretch a flex item in Bootstrap 4
To stretch a flex item in Bootstrap 4, use the .align-self-stretch class. Here, the 2nd flex item is stretched using the align-self-stretch class in Bootstrap − A-one B-one C-one D-one You can try to run the following code to stretch a flex item −Example Bootstrap Example Align Specific Flex Item and Stretch A-one B-one C-one D-one
Read MoreDisplay flex items vertically and reversed in Bootstrap 4
The flex-column-reverse is used to display reversed flex items with vertical orientation. Add the flex-column-reverse class as in the following code snippet −After that, add flex items inside it − Demo 1 Demo 2 Demo 3 You can try to run the following code to show flex items vertically and reversed −Example Bootstrap Example Implementing Column Reverse Demo 1 Demo 2 Demo 3
Read MoreBootstrap 4 .flex-*-column-reverse class
Use the flex-*-column-reverse class to display flex items vertically and reversed on different screen sizes.Here’s the example of reversing flex items on medium device using “flex-md-column-reverse” class − One Two Three In the same way, set for large devices using “flex-lg-column-reverse” class − One Two Three Implementing the .flex-*-column-reverse class −Example Bootstrap Example Example Change the browser size to see the effect: Default One Two Three Flex on differet screen size (Medium-Reverse) One Two Three Flex on different screen size (Large-Reverse) One Two Three
Read MoreSet a grey border to an element in Bootstrap 4
Set a grey border to an element, using the border-secondary class in Bootstrap 4.Add it like the following example − I have also included the “mystyle” class to style the div − .mystyle { width: 250px; height: 150px; margin: 10px; } Let us see an example to implement the border-secondary class −Example Bootstrap Example .mystyle { width: 250px; height: 150px; margin: 10px; } Shape Rectangle with gray border
Read MoreAllow a label to be used for form validation with Bootstrap
Use the .control-label class in Bootstrap to allow a label to be used for form validation.You can try to run the following code to implement the control-label class in BootstrapExample Bootstrap Example Email- amit@demo.com
Read MoreContainer to create a grid of Bootstrap 4 cards of equal height and width
Set a container of cards, using the card-deck class.Work it inside the following div that would be of equal width and height − You can try to run the following code to implement the card-deck class −Example Bootstrap Example Demo Messages Note: Resize the browser to check the effect. Nothing new! Warning! Compile-time error! Check again! We won!
Read MoreAdd large shadow to an element in Bootstrap 4
Use the .shadow-lg class in Bootstrap to add large shadow to an elementYou can try to run the following code to implement .shadow-lg class −Example Bootstrap Example Learning Learn Tutorials for free Try programming examples Play Quiz and check your knowledge
Read MoreStyle Bootstrap 4 cards with bg-dark class
Use the bg-dark contextual class in Bootstrap 4 to add a gray background to a card −In the below code snippet, I have used the bg-dark class to style the Bootstrap card. With that, I have also the text-while class to set the text to be white − This is it! Let us see the complete example to work with bg-dark class −Example Bootstrap Example Notification This is it! How you doing?
Read MoreHow to initialize and compare strings?
Following example compares two strings by using str compareTo (string), str compareToIgnoreCase(String) and str compareTo(object string) of string class and returns the ascii difference of first odd characters of compared strings.Examplepublic class StringCompareEmp{ public static void main(String args[]) { String str = "Hello World"; String anotherString = "hello world"; Object objStr = str; System.out.println( str.compareTo(anotherString) ); System.out.println( str.compareToIgnoreCase(anotherString) ); System.out.println( str.compareTo(objStr.toString())); } }OutputThe above code sample will produce the following result.-32 0 0String compare by equals()This method compares this ...
Read MoreCreate a Bootstrap 4 card header
To create a card header in Bootstrap 4, use the card-header class. Set the header inside the card using the class − Product List After adding the header, add the body of the card as shown in the following code snippet −Product List Product One Product Two Let us see an example to learn how to create Bootstrap 4 card header −Example Bootstrap Example Products Product List Product One Product Two This was the list of products in stock.
Read More