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
Active Nav States in Bootstrap
For active states, place to active links in Bootstrap −You can try to run the following code to achieve thisExample Bootstrap Example Active State in navigations 29 Home 9 Mail
Read Moretooltip("show") method in Bootstrap
Use the tooltip(“show”) method in Bootstrap to display the tooltip. As shown below that the tooltip is visible on button click:$(document).ready(function(){ $(".btn-primary").click(function(){ $("[data-toggle='tooltip']").tooltip('show'); }); });The tooltip would be visible on a link wherein I have set the data-toggle attribute and the link text as shown in the following code snippet − On clicking the below button, the tooltip would be visible. You can try to run the following code to implement the tooltip(“show”) method −Example Bootstrap Example ...
Read MoreBootstrap 4 .flex-column in Bootstrap 4
Use the flex-column class to display flex items vertically − You need to now add the flex-item inside the flex-column class − First Second Let us see an example to learn how to implement the flex-column class in Bootstrap 4 −Example Bootstrap Example Flex Column First Second Third Fourth Fifth
Read MoreSet less important stuff with grey outlined Bootstrap 4 Button
To set less important stuff in Bootstrap, use the btn-outline-secondary class.The outline is applied on a button and a green color is applied using the same class − Tools (Secondary Outline) Above, I have set the btn-outline-secondary class as any normal class set on any element, which is button here.You can try to run the following code to learn how to set grey outline Bootstrap Button −Example Bootstrap Example Web Tools The following are the Tools: JSON Editor XML Editor For more, click below: Tools (Secondary Outline)
Read MoreBootstrap 4 .d-inline-flex class
Use the d-inline-flex class in Bootstrap to create an inline flexbox container −Now add the flex-items inside it as in the following code snippet − One Two Three You can try to run the following code to implement the .d-inline class −Example Bootstrap Example Understanding Inline Flex One Two Three
Read MoreBootstrap 4 .btn-outline-success Button class
Use the btn-outline-success class in Bootstrap to set green outline to a button.Green button outline states success and you can set a button like this − Result Above I have set the class on element just like we set a class on any other element in HTML or Bootstrap.Here is an example to learn how to work with the btn-outline-success class in Bootstrap −Example Bootstrap Example Result The following are the subjects: Maths Digital Electronics For result, click below: Result
Read MoreBootstrap Event when the modal is fully shown
The shown.bs.modal event in Bootstrap fires when the modal is completely displayed.The modal is displayed using the modal(show) method −$("#button1").click(function(){ $("#newModal").modal("show"); });Fire shown.bs.modal event and generate the alert as shown below −$("#newModal").on('shown.bs.modal', function () { alert('The modal is displayed completely!'); });You can try to run the following code to implement the shown.bs.modal event in Bootstrap −Example Bootstrap Example Entrance Exams The following is the result of the entrance ...
Read MoreDisplay flex items vertically and reversed on different screen sizes in Bootstrap 4
Use the column-reverse class on various screen size to display flex item vertically and reversed.For example: On medium screen size, use md-column-reverse −The following is the difference between column and column reverse −The following is an example to display flex items vertically and reversed on different screen sizes −Example Bootstrap Example Example Flex on different screen size (Column) First Second Third Flex on different screen size (Medium - Column Reverse) First Second Third Flex on different screen size (Large - Column Reverse) First Second Third
Read MoreUsage of Bootstrap thumbnail
With the thumbnail class in Bootstrap, you can easily create a thumbnail.Follow the below-given steps &minus − Add an tag with the class of .thumbnail around an image.This adds four pixels of padding and a gray border.On hover, an animated glow outlines the image.You can try to run the following code to create thumbnail −Example Bootstrap Example
Read MoreBootstrap hidden.bs.tab event
The hidden.bs.tab event fires when the tab is completely hidden in Bootstrap.Firsty, show the modal using show method as in the following code snippet −$(“.nav-tabs a”).click(function(){ $(this).tab('show'); });The hidden.bs.tab event fires and an alert generates after the tab hides −$(‘.nav-tabs a’).on(‘hidden.bs.tab’, function() { alert('Previous Tab is hidden now!'); });You can try to run the following code to implement the hidden.bs.tab event −Example Bootstrap Example Web Dev ...
Read More