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
Add dropdown menu to buttons using Bootstrap
To add a dropdown to a button, simply wrap the button and dropdown menu in a .btn-group.You can try to run the following code to add dropdown menu to buttons −Example Bootstrap Example Default Action Another action Something else here Separated link Primary Action Another action Something else here Separated link
Read MoreBootstrap 4 .card-img-top class
Use the card-img-top class in Bootstrap to set the image at the top inside a card −After that add the card and card body − Swift 4 Learn Swift 4 Begin You can try to run the following code to implement the card-img-top class in Bootstrap 4 −Example Bootstrap Example SWIFT 4 Tutorial Video Tutorial on Switft 4 Swift 4 Learn Swift 4 Begin
Read MoreBootstrap 4 .border-white class
To set white border to an element, use the border-white class.Add white border − This has white border Above, I have also added a style to set the div element −.mystyle { width: 200px; height: 100px; margin: 10px; background: blue; }Let us see an eample to implement the border-white class in Bootstrap −Example Bootstrap Example .mystyle { width: 200px; height: 100px; margin: 10px; background: blue; } The following are two Rectangles: This has white border This has orange border
Read MoreUse dropdowns with any button size using Bootstrap
Use btn-large, .btn-sm, or .btn-xs class to use dropdowns with any button size.Let us see an example of btn-largeExample Bootstrap Example Default Action Another action Something else here Separated link
Read MoreSet important information for a list item in a list group with Bootstrap
use the list-group-item-info class in Bootstrap to set key information for a list item in a list group.You can try to run the following code to implement the list-group-item-info class −Example Bootstrap Example Java Interfaces Multi-threading Packages
Read MoreNest button groups with Bootstrap
Nest button groups within another button group i.e, place a .btn-group within another .btn-group. This is done when you want dropdown menus mixed with a series of buttons.To nest button groups, you can try to run the following code −Example Bootstrap Example Rank Marks Subjects Maths Science English
Read MoreSet all list items on a single line with Bootstrap
To set all list items on a single line, use the .list-inline class.You can try to run the following code to implement the .list-inline class −Example Bootstrap Example Technologies Home PHP Java jQuery JavaScript Ruby
Read MoreSet Menus to drop up with Bootstrap
Menus can also be built to drop up rather than down. To achieve this, simply add .dropup to the parent .btn-group container. You can try to run the following code set menus to drop up −Example Bootstrap Example Dropdown Subject Programming Web Dev Database Networking Dropup Subject Programming Web Dev Database Networking
Read MoreAdd information with Bootstrap 4 card
To add information to a card in Bootstrap 4, use the bg-info class.Use the card class with the bg-info class:Add the card body after that using the card-body class − Demo Text You can try to run the following code to add information −Example Bootstrap Example Festival Celebration Reach till 5PM
Read MoreUsage of btn-xs Bootstrap class
Create an extra small button using the btn-xs Bootstrap class. You can try to run the following code to implement the btn-xs class:Example Bootstrap Example Subject Programming Web Dev Database Networking
Read More