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 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 MoreBootstrap page-header class
Page header is used to add appropriate spacing around the headings on a page.To use a page header, wrap your heading in a with a class of .page-header −Example Bootstrap Example Header Subtext for header Demo text! Demo text! Demo text! Demo text! Demo text! Demo text! Demo text! Demo text! Demo text!
Read MorePlace an element in the middle of the parent element in Bootstrap 4
Use align-middle class to place an element in the middle of the parent element.To place an element in the middle − Middle Alignment Let us seen an example to implement the align-middle class in Bootstrap 4 −Example Bootstrap Example Example This is demo text Demo Baseline Top Alignment Middle Alignment Bottom Alignment
Read MoreBootstrap 4 .flex-fill class
Use the flex-fill class to set the flex items to be equal width in Bootstrap 4.Set the flex item inside the set as flex − Example 1 Example 2 Example 3 Example 4 The following is an example displaying the implementation of flex-fill class −Example Bootstrap Example With flex-fill Example 1 Example 2 Example 3 Example 4 Without .flex-fill: Example 1 Example 2 Example 3 Example 4
Read More