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
Show flex items horizontally in Bootstrap
To show flex items horizontally, use the flex-row class.Add it to class −Now add flex items accordingly − TCS Wipro Accenture Gartner Here is the complete example to implement the flex items horizontally −Example Bootstrap Example Companies TCS Wipro Accenture Gartner
Read MoreBootstrap Filter list
To create a filter list, use the .list-group class in Bootstrap.You can try to run the following code to create a filter list −Example Bootstrap Example Tutorials Java jQuery PHP AngularJS Ruby C $(document).ready(function(){ $("#demo").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#newList li").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); });
Read MoreShow flex items right aligned and horizontally in Bootstrap
If you want to display flex items right aligned, horizontally and reversed, then use the flex-row-reverse class.Use the class like the following code snippet − ONE TWO THREE The following is an example to show reverse order of flex items −Example Bootstrap Example Flex Flex Row Reverse ONE TWO THREE Flex Row ONE TWO THREE
Read MoreUsage of Bootstrap Media Objects
The media object is to make the code for developing blocks of information drastically shorter.You can try to run the following code to implement media objectsExample Bootstrap Example Media heading This is some sample text. This is some sample text. ...
Read MoreBootstrap 4 .flex-*-row-reverse class implementation
To implement the flex items to be displayed as reversed, horizontal and right-aligned on different screen sizes, use the flex-*-row-reverse.Different screen sizes are for small, medium, large, and extra large screens. Let us see how to set reverse flex items for small screen − ONE TWO THREE You can try to run the following code to implement the flex-*-row-reverse class −Example Bootstrap Example Flex Row ...
Read MoreCreate a Bootstrap Media List
To create a Bootstrap media list in Bootstrap, you can try to run the following code −Example Bootstrap Example Media heading ...
Read MoreAlign a flex item at the end in Bootstrap 4
Use the .align-self-end class to align flex item at the end in Bootstrap 4.The following is my div −Now you need to set the flex items, wherein I am aligning the 3rd flex item − Item 1 Item 2 Item 3 Item 4 You can try to run the following code to implement the align-self-end class −Example Bootstrap Example Align Specific Flex Item from the end Item 1 Item 2 Item 3 Item 4
Read MoreBootstrap 4 .flex-wrap-reverse class
Use the flex-wrap-reverse class in Bootstrap 4 to wrap flex items and in reverse order.Here is the difference between flex-wrap and flex-wrap-reverse −Set wrap-flex-reverse as in the following code snippet − Rank 1 Rank 2 Rank 3 Rank 4 Rank 5 You can try to run the following code to implement flex-wrap-reverse class −Example Bootstrap Example Wrap Flex Wrap Rank 1 Rank 2 Rank 3 Rank 4 Rank 5 Rank 6 Rank 7 Rank 8 Rank 9 Rank 10 Rank 11 Rank 12 Rank 13 Rank 14 Rank 15 Rank 16 Rank 17 Rank 18 Rank 19 Rank 20 Flex Wrap - Reverse Rank 1 Rank 2 Rank 3 Rank 4 Rank 5 Rank 6 Rank 7 Rank 8 Rank 9 Rank 10 Rank 11 Rank 12 Rank 13 Rank 14 Rank 15 Rank 16 Rank 17 Rank 18 Rank 19 Rank 20
Read MoreBootstrap well class
A well is a container in that causes the content to appear sunken or an inset effect on the page. To create a well, simply wrap the content that you would like to appear in the well with a containing the class of .well.You can try to run the following code to implement well class in Bootstrap −Example Bootstrap Example This is demo text!
Read MoreBootstrap 4 .d-block class
Use the .d-block class in Bootstrap to create block element.The d-block class is set as shown in the below code snippet − block You can try to run the following code to implement the d-block class −Example Bootstrap Example Creating Blocks Resize the browser to check the effect. block block on small screen
Read More