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
Set large modal in Bootstrap
Use the .modal-lg class in Bootstrap to set large modal with more width.You can try to run the following code to set large modal;Example Bootstrap Example Examination Result × Warning If JavaScript isn't enabled in your web browser, then you may not be able to see the result. Close
Read Moreborder-info class in Bootstrap 4
Use the border-info class in Bootstrap, to set a border that indicates information. Set the class as if you use any other class in Bootstrap: Details Above, we added border-info class. Another class, “one” is used to give shape to the div element −.one { width: 180px; height: 180px; margin: 55px; }You can try to run the following code to implement the border-info class on a rectangle −Example Bootstrap Example .one { width: 180px; height: 180px; margin: 55px; } Rectangle with a border to set information: Details
Read MoreAdd a gray background color to the active link in a default Bootstrap navbar
To add gray background color to the active link, use the .active class in Bootstrap.You can try to run the following code to implement .active class −Example Bootstrap Example Website Home Tutorials Quiz Demo This is demo text.
Read MoreAlign an element with the bottom of the parent element's font in Bootstrap 4
Use align-text-bottom class to align an element with the bottom of the parent element's font.You need to set the align-text-bottom class as shown below − Bottom Text You can try to run the following code to implement the align-text-bottom class in Bootstrap 4 −Example Bootstrap Example Example This is demo text Demo Baseline Top Alignment Top Text Bottom Text
Read MoreSet disabled links with Bootstrap
For each of the .nav classes, if you add the .disabled class, it will create a gray link that also disables the :hover state.You can try to run the following code to set disabled links −Example Bootstrap Example Website Home Team Authors MVPs Website (With disabled links) Home Team Authors (disabled link) MVPs
Read MoreAdd a background color to the active list item in a Bootstrap list group
Use the .active class to add gray background color to the active list item in a list group in Bootstrap.You can try to run the following code to add background color to the active list item −Example Bootstrap Example Features of Java Interface Multi-threading Packages Collection Serialization
Read MoreAlign gathered items "around" in Bootstrap 4
Use .align-content-around class to align gathered items "around" in Bootstrap 4.The align-content-around class is set like the below code snippet −After that add the flex items − One Two Three Four Let us see an example to align gathered items around −Example Bootstrap Example Example This is demo text One Two Three Four Five Six Seven Eight Nine Ten Eleven Twleve Thirteen Fourteen
Read MoreJustified Nav in Bootstrap
For justified nav in Bootstrap, use the .nav-justfied class. You can try to run the following code for justified nav on a web page:Example Bootstrap Example Subjects Home Tutorials Videos QA Tutors
Read MorePills with Dropdowns Bootstrap Example
To form pills with dropdowns, you can try to run the following exampleExample Bootstrap Example Website Home About Products Online Compiler Image Editor Services Contact
Read MoreDisplay flex items vertically on different screen sizes in Bootstrap 4
To show flex items vertically on different screen sizes, use the flex-*- column class. For small, medium and large screen sizes, use it as −For Small screen size −For Medium screen size −For Large screen size −Let us see an example to learn how to set flex items vertically on different screen sizes −Example Bootstrap Example Example Note: Change the browser size to see the effect. Default One Two Three Flex on differet screen size (Medium) One Two Three Flex on differet screen size (Large) One Two Three
Read More