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
Web Development Articles
Page 188 of 801
Bootstrap .modal("toggle") method
Use the .modal(“toggle”) method in Bootstrap to toggle the modal.As shown below, the modal generates on the click of a button −$(document).ready(function(){ $("#button1").click(function(){ $("#newModal").modal("toggle"); }); });Here is the button used above − Modal One You can try to run the following code to implement the modal(“toggle”) method −Example Bootstrap Example Sample Modal One × Sample Modal Click outside to close it. Close $(document).ready(function(){ $("#button1").click(function(){ $("#newModal").modal("toggle"); }); });
Read MoreContainer to create a grid of Bootstrap 4 cards like a group
To set a container for Bootstrap card and set it like a group, use the card-group class.Use it and create a grid like the following with two Bootstrap cards − Demo Text! Warning! The following is an example to create a grid (group of cards) in Bootstrap −Example Bootstrap Example Group of Messages Demo Text! Warning! Well done! Selected!
Read MoreBootstrap 4 .flex-wrap class
Use the flex-wrap class in Bootstrap 4 to wrap flex items. The following is the code snippet to wrap the flex items − . .
Read MoreAlign an element with the baseline of the parent in Bootstrap 4
Use the align-baseline class in Bootstrap 4 to align an element with the baseline of the parent elment.Set the align-baselinec class like the following code snippet −Now add the content inside it − Demo Baseline You can try to run the following code to align an element with the parent’s baseline −Example Bootstrap Example Example This is demo text Demo Baseline
Read MoreCSS Chroma Filter
Chroma Filter is used to making any particular color transparent and usually, it is used with images. You can use it with scrollbars also.ExampleImplementing the CSS Chroma Filter − Text Example: CSS Tutorials
Read MoreCSS :before pseudo-element
Use this element to insert some content before an element. The following example demonstrates how to use the :before element to add some content to any element.Example p:before { content: url(/images/bullet.gif) } This line will be preceded by a bullet. This line will be preceded by a bullet. This line will be preceded by a bullet.
Read MoreRole of CSS :hover Selector
Use the CSS :hover selector to style links on mouse over with CSS. You can try to run the following code to implement the :hover selector −Example a:hover { background-color: orange; } Qries Keep the mouse cursor on the above link and see the effect.
Read MoreSet Responsive Font Size using CSS
To set the responsive font size, use the ‘viewport width’ and set it to ‘vw’ unit. You can try to run the following code to use ‘vw’ unit −Example h1 { font-size:8vw; } This is demo heading This is demo text.
Read MoreStyle the active link with CSS
To style the active links, use the CSS :active selector. You can try to run the following code to style the active linksExample a:active { background-color: green; } Welcome to Qries Click on the above link to see the effect.
Read MoreRole of CSS :first-of-type Selector
Use the CSS :first-of-type selector to style every element that is the first element of its parent with CSS.ExampleYou can try to run the following code to implement the :first-of-type selector p:first-of-type { background: orange; } This is demo text1. This is demo text2.
Read More