Found 8894 Articles for Front End Technology

Make a group of buttons span the entire width of the screen with Bootstrap

Rishi Rathor
Updated on 12-Jun-2020 20:27:18

596 Views

To make a group of buttons span entire width of the screen, use the .btn-group-justified.You can try to run the following code to implement the .btn-group-justified class −ExampleLive Demo           Bootstrap Example                                 The following are the car brands:                BMW          Audi          Jeep          Datsun          Toyota             The following are FMCG:                ITC Limited          Colgate-Palmolive          Nestle          Britannia Industries Limited          

Create a tabbed navigation menu with Bootstrap

AmitDiwan
Updated on 27-Oct-2023 11:40:14

236 Views

To create a tabbed navigation menu, start with a basic unordered list with the base class of .nav and add class .nav-tabs. The navigation tab looks like the following on a web page − Create a Navigation tab Create a navigation tab with nav and nav-tabs − Home About Products Contact Us Set the Current Page Above, we have set the Home as active, since we wanted it to be the current page − Home Create a Tabbed Navigation Menu with ... Read More

Animate CSS z-index property

George John
Updated on 12-Jun-2020 08:40:05

599 Views

To implement animation on z-index property with CSS, you can try to run the following code −ExampleLive Demo                    div {             position: absolute;          }          #box div {             background-color: orange;             border: 2px solid yellow;             width: 100px;             height: 100px;             opacity: 0.3;          }          div#demo {             opacity: 1;             background-color: coral;             z-index: 1;             animation: myanim 3s;          }          @keyframes myanim {             30% {                z-index: 3;             }          }                     CSS z-index property                          One          Two          Three          Four          Five          Six          Seven          

Difference between PX, EM and Percent

Nishtha Thakur
Updated on 12-Jun-2020 08:22:52

440 Views

The px unit defines a measurement in screen pixels. The following is an example −div {    padding: 40px; }The em unit is a relative measurement for the height of a font in em spaces. Because an em unit is equivalent to the size of a given font, if you assign a font to 12pt, each "em" unit would be 12pt; thus, 2em would be 24pt.The following is an example −p {    letter-spacing: 4em; }The % unit defines a measurement as a percentage relative to another value, typically an enclosing element.p {    font-size: 14pt;    line-height: 80%; }

Animate CSS word-spacing property

Ankith Reddy
Updated on 12-Jun-2020 08:50:20

89 Views

To implement animation on the word-spacing property with CSS, you can try to run the following code −ExampleLive Demo                    div {             border: 2px solid blue;             background: orange;             animation: myanim 3s infinite;          }          @keyframes myanim {             50% {                word-spacing: 30px;             }         ... Read More

Animate CSS width property

Daniol Thomas
Updated on 12-Jun-2020 08:49:56

376 Views

To implement animation on width property with CSS, you can try to run the following code −ExampleLive Demo                    div {             width: 300px;             height: 250px;             background-color: maroon;             color: white;             animation: myanim 3s;          }          @keyframes myanim {             30% {                width: 500px;             }          }                     CSS width property                This is demo text!          

Animate transform property with CSS Animation

Nancy Den
Updated on 12-Jun-2020 08:50:49

137 Views

To implement animation on transform property with CSS, you can try to run the following code −ExampleLive Demo                    div {             margin: auto;             border: 2px solid blue;             width: 300px;             height: 400px;             background-color: orange;             animation: myanim 3s;          }          @keyframes myanim {             30% {                transform: rotate(120deg);             }          }                                    Demo          

Animate vertical-align property with CSS Animation

Arjun Thakur
Updated on 12-Jun-2020 08:40:54

417 Views

To implement animation on vertical-align property with CSS, you can try to run the following code −ExampleLive Demo                    img {             vertical-align: 80px;             animation: myanim 3s;          }          @keyframes myanim {             50% {                vertical-align:120px;             }          }                     CSS vertical-align property                        This is demo text. This is demo text. This is demo text. This is demo text.          

CSS rest-after Speech Media property

Nishtha Thakur
Updated on 12-Jun-2020 07:40:13

91 Views

The CSS rest-after property is useful for speech media to set pause after an element.The following is the syntax −rest-after: | none | x-weak | weak | medium | strong | x-strongHere, x-weak | weak | medium | strong | x-strong is the rest by the strength of pauseLet us see an example of rest-after speech media property −h1 {    rest-after: 15ms; }The time sets the pause in milliseconds.

Animate CSS outline-offset property

Krantik Chavan
Updated on 12-Jun-2020 08:41:33

303 Views

To implement animation on outline-offset property with CSS, you can try to run the following code −ExampleLive Demo                    div {             width: 350px;             height: 150px;             outline: 2px solid blue;             animation: myanim 3s infinite;          }          @keyframes myanim {             50% {               outline-offset: 50px;             }          }                     CSS outline-offset property          

Advertisements