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
Bootstrap 4 .flex-row-reverse class
Use the flex-row-reverse class in Bootstrap to reverse the order of flex items. It also aligns the flex items to the right.Let us see the difference between the default arrangement of flex items and result of row-reverse class −For reversing the order of rows, we have used the flex-row-reverse class like the following code snippet:The following is an example to implement the flex-row-reverse class −Example Bootstrap Example Flex Flex Row Reverse A-ONE B-ONE C-ONE Flex Row A-ONE B-ONE C-ONE
Read MoreNon-Nav (standard) links in Bootstrap
Use the standard links that are not within the regular navbar navigation component, and then use the class navbar-link to add proper colors for the default and inverse navbar options.You can try to run the following code to set standard links −Example Bootstrap Example Website Copyright TP
Read MoreImplement .popover("toggle") method in Bootstrap
To toggle the popover on button click, use the popver(“toggle”) method.Set the popover toggle as −$(document).ready(function(){ $(".btn-default").click(function(){ $("[data-toggle='popover']").popover('toggle'); }); });On button click, the popover generates − (Course) Toggle Popover The popver, on button click, generates the popover on a link − Learn The following is an example stating the usage of popver(“toggle”) method −Example Bootstrap Example Learn The following is the button: (Course) Toggle Popover $(document).ready(function(){ $(".btn-default").click(function(){ $("[data-toggle='popover']").popover('toggle'); }); });
Read MoreBootstrap 4 card styled with bg-secondary class
Add less important stuff, using the card class with the bg-secondary contextual class in Bootstrap.This class adds a gray background −Inside that, add the card body − English You can try to run the following code to implement the card class with bg-secondary class in Bootstrap −Example Bootstrap Example Languages English French Chinese Russian
Read MoreCreate Table with Bootstrap
To create a table with Bootstrap, you can try to run the following codeExample Bootstrap Table Sports Table Footballer Rank Messi 1 Neymar 2
Read MoreAlign single rows of items at the end in Bootstrap 4
To align single rows of items at the end, use the .align-items-end class in Bootstrap 4.Align using the align-items-end class −Now add the flex items to align single rows of items − Product 1 Product 2 Product 3 Let us see an example to align single rows of items at the end −Example Bootstrap Example Align Flex Items on a single row at the end Product 1 Product 2 Product 3 Product 4
Read MoreBootstrap 4 .border-left-0 class
Use the border-left-0 class to remove the left border of an element.Remove the left border of a using the class inside the − Removing left border The “one” class is also set in the class to style it − .one { width: 220px; height: 220px; margin: 50px; } You can try to run the following code to work with the border-left-0 class −Example Bootstrap Example .one { width: 220px; height: 220px; margin: 50px; } Bootstrap 4 Removing left border
Read MoreBootstrap .btn-info class
Use the .btn-info class to create a button for informational alert messages −Example Bootstrap Example Info Button
Read Moreshown.bs.popover Bootstrap event
The shown.bs.popover event fires when the popover is completely visible.Firstly, display the popover on button click using the following code −$(".btn-default").click(function(){ $("[data-toggle='popover']").popover('show'); });After that, fire the popover shown.bs.popover event and generate alert −$("[data-toggle='popover']").on('shown.bs.popover', function(){ alert('Popover is completely visible!'); });You can try to run the following code to implement the show.bs.popover event −Example Bootstrap Example Awards Here's the list: List $(document).ready(function(){ ...
Read MoreBootstrap navbar-static-top class
To create a navbar that scrolls with the page, add the .navbar-static-top class. This class does not require adding the padding to the .Example Bootstrap Example Car Accessories Car Cover Car Mobile Holder Car Mobile Charger
Read More