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
Align single rows of items at the baseline in Bootstrap 4
Align single rows of items at the baseline in Bootstrap 4, use the .align-items-baseline class.To align at the baseline:
Read MoreAlign a flex item in the center with Bootstrap 4
To align a flex item in the center with Bootstrap 4, use the .align-self-center class.The following is my div for flex −Now add flex items and here I have applied the align-self-center class on the 3rd flex item − A-one B-one C-one D-one You can try to run the following code to implement the align-self-center class in Bootstrap −Example Bootstrap Example Align Specific Flex Item in the center A-one B-one C-one D-one
Read MoreStretch gathered items on different screens in Bootstrap 4
Use the .align-content-*-stretch in Bootstrap 4 to stretch gathered items on different screens.To stretch items on different screens −Stretch items on Small Screen Work 1 Work 2 Work 3 Work 4 Work 5 Work 6 Stretch items on Medium Screen Work 1 Work 2 Work 3 Work 4 Work 5 Work 6 Stretch items on Large Screen Work 1 Work 2 Work 3 Work 4 Work 5 Work 6 Let us see an example to stretch gathered items on different screen size ...
Read MoreSet key content with Bootstrap 4 card
Add key stuff to a Bootstrap card, using the bg-primary class with the card class.Use the bg-primary class in the card class − Eisner Award I have used the text-white class above, to set the text to be white.Let us see a example how to include key stuff in a Bootstrap 4 card −Example Bootstrap Example Awards The Pulitzer Prize Eisner Award Hugo & Nebula Awards
Read MoreBootstrap Event when the modal is fully hidden
The hidden.bs.modal event in Bootstrap fires when the modal is completely hidden.Firstly, click on the hide button to hide the modal −$("#button1").click(function(){ $("#newModal").modal("hide"); }); After clicking the button, the hidden.bs.modal fires and generates an alert using the following script −$("#newModal").on('hidden.bs.modal', function () { alert('The modal is completely hidden now!'); });Let us see an example to implement the hidden.bs.modal event −Example Bootstrap Example #button1 { width: 140px; padding: 20px; bottom: 150px; z-index: 9999; ...
Read MoreBootstrap 4 Button .btn-outline-info class
To set an outline on a button that indicates information, you need to use the btn-outline-info class in Bootstrap.Include the button element and set the btn-outline-info class − More Info You can try to run the following code to implement the btn-outline-info class −Example Bootstrap Example Event The following are the details: Event Timings 1PM TO 4PM Venue: 21 KH, HG Lane, Alabama For more information about the event: More Info
Read MoreAdd buttons in Bootstrap Navbar
Add buttons using class .navbar-btn to elements. You can try to run the following code to add a button to the navbarExample Bootstrap Example Example Submit Button Navbar Button
Read MoreAdd bottom rounded corners to an element in Bootstrap 4
If you want to add rounded corners to an element, then use the rounded-bottom class.Use it on any element like −Above, we have set demo as well for class, for our div that is a rectangle.Here is our demo CSS class − .demo { width: 110px; height: 150px; background-color: blue; } You can try to run the following code to add bottom rounded corners to an element −Example Bootstrap Example .demo { width: 110px; height: 150px; background-color: blue; } Rectangle We have a rectangles with rounded corners (bottom):
Read MoreAlign flex items in the center on different screen sizes in Bootstrap
To align items in the center on different screen sizes, use the justify-content-*-center class.The aligned flex items would be like the following for small screen size − GOLF CRICKET SQUASH The aligned flex items would be like the following for medium screen size − GOLF CRICKET SQUASH The aligned flex items would be like the following for large screen size − GOLF CRICKET SQUASH Let us see how to implement the justify-content-*-center −Example Bootstrap Example Sports Centered on small screen GOLF CRICKET SQUASH Centered on medium screen GOLF CRICKET SQUASH Centered on large screen GOLF CRICKET SQUASH
Read MoreBootstrap .nav-justified class
Make tabs or pills of equal widths as of their parent at screens wider than 768px using class .nav-justified along with .nav, .nav-tabs or .nav, .nav-pills respectively. On smaller screens, the nav links are stacked.Example Bootstrap Example Subjects Home Team Authors MVPs
Read More