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
Create a block element on a specific screen width with Bootstrap 4
To create a block on a specific screen width, use the .d-*-block class.The specific screen width can be small, medium, large and extra large. Set the class indivifually based on the screen size as shown below − d-sm-block d-md-block d-lg-block< /span> d-xl-block Let us see the complete example to learn how to create a block element on a specific screen width −Example Bootstrap Example Blocks Resize the browser to check the effect d-block d-sm-block d-md-block d-lg-block d-xl-block
Read MoreCustomize links using the active class to indicate the current page
You can customize links using the active class to indicate the current page.You can try to run the following code to customize links using the active classExample Bootstrap Example Elements « e1 e2 e3 e4 »
Read MoreAdd hover color to a table with Bootstrap
To add hover color to table, use the table-hover class. You can try to run the following code to implement the table-hover class:Example Bootstrap Table Footballer Rank Footballer Rank Country Messi 1 Argentina Neymar 2 Brazil Ronaldo 3 Portugal
Read MoreSizing Bootstrap pagination-* class
To size Bootstrap pagination-* class, use the pagination-lg and pagination-sm class.You can try to run the following code to size pagination −Example Bootstrap Example Questions Large Pagination « Q1 Q2 Q3 Q4 Q5 » Small Pagination « Q1 Q2 Q3 Q4 Q5 »
Read MoreBootstrap .btn-sm class
To create a small button in Bootstrap, use the .btn-sm class.You can try to run the following code to implement the btn-sm classExample Bootstrap Example Small button Result
Read MoreBootstrap .modal("hide") method
The .modal(“hide”) method in Bootstrap hides the modal.Hide the Bootstrap modal on the click of a button −$("#button1").click(function(){ $("#newModal").modal("hide"); });The modal is shown using the modal(“show”) method −$("#newModal").modal("show");Let us see an example of the modal(‘hide”) method −Example Bootstrap Example #button1 { width: 140px; padding: 20px; bottom: 150px; z-index: 9999; font-size:15px; position: absolute; margin: ...
Read MoreBootstrap 4 .d-*-flex class
Use the .d-*-flex class in Bootstrap to set a flexbox container on a screen size as shown below −d-flex d-sm-flex d-md-flex d-lg-flexAbove the flex is set for different screen sizes, for example,d-sm-flex = Flex for Small Screen Sized-md-flex = Flex for Medium Screen Sized-lg-flex = Flex for Large Screen Sized-xl-flex = Flex for Extra Large Screen SizeLet us see an example of the class −Example Bootstrap Example Understanding Flex d-flex Small Screen Size Medium Screen Size Large Screen Size Extra Large Screen Size
Read MoreBootstrap .pager class
Get the pager links using the .pager Bootstrap class.You can try to run the following code to implement the .pager class in BootstrapExample Bootstrap Example Questions Previous Next
Read MoreStretch gathered items in Bootstrap 4
To stretch gathered items, use the .align-content-stretch class in Bootstrap 4. Use the align-content-stretch class as −
Read MoreUsage of Bootstrap next class to right-align the links
Use the .next class in Bootstrap to right align the links. You can try to run the following code to implement the .next class:Example Bootstrap Example Answers ← Older Newer →
Read More