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
Articles by Nancy Den
Page 6 of 18
Align labels and groups of form controls in a horizontal layout with Bootstrap
Use the .form-horizontal class in Bootstrap to align labels and groups of form controls in a horizontal layout.You can try to run the following code to implement .form-horizontal class:Example Bootstrap Example Name Name Submit
Read MoreHow to position text to top right position on an image with CSS
To position text to top right, use the right and top property. You can try to run the following code to implement it:Example .box { position: relative; } img { width: 100%; height: auto; opacity: 0.6; } .direction { position: absolute; top: 10px; right: 19px; font-size: 13px; } Heading One Below image has text in the top right: Top Right Corner
Read MoreRole of CSS justify-content property flex-end value
Use the justify-content property with value flex-end to align the flex-items at the end.ExampleYou can try to run the following code to implement the flex-end value − .mycontainer { display: flex; background-color: red; justify-content: flex-end; } .mycontainer > div { background-color: orange; text-align: center; line-height: 60px; font-size: 30px; width: 100px; margin: 5px; } Quiz Q1 Q2 Q3 Q4
Read MoreAdd rounded borders to first and last link in the pagination using CSS
To add rounded borders, use the border-radius property. For top/ bottom left, use the border-top-left-radius property and for bottom, use border-bottom-left-radius. In the same way, set for top/bottom right.ExampleYou can try to run the following code to add rounded borders to first and last link in the pagination − .demo { display: inline-block; } .demo a { color: red; padding: 5px 12px; ...
Read MoreCSS grid-template-rows property
The grid-template-rows property is used to set the number of rows in the Grid.ExampleYou can try to run the following code to implement the grid-template-rows property − .container { display: grid; background-color: blue; grid-template-rows: 70px 190px; padding: 20px; grid-gap: 20px; } .container > div { background-color: orange; border: 2px solid gray; padding: 35px; font-size: 30px; text-align: center; } Game Board 1 2 3 4 5 6
Read MoreSet Button on Image with CSS
You can try to run the following code to set button on an image:Example .box { position: relative; width: 100%; max-width: 250px; } .box img { width: 100%; height: auto; } .box .btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } Button
Read MoreAnimate transform property with CSS Animation
To implement animation on transform property with CSS, you can try to run the following code −Example div { margin: auto; border: 2px solid blue; width: 300px; height: 400px; background-color: orange; animation: myanim 3s; } @keyframes myanim { 30% { transform: rotate(120deg); } } Demo
Read MoreRotate In Down Left Animation Effect with CSS
To create a rotate in down animation effect with CSS, you can try to run the following code −Example .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat; background-position: left top; padding-top:95px; margin-bottom:60px; -webkit-animation-duration: 10s; animation-duration: 10s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } } @keyframes rotateInDownLeft { 0% { transform-origin: left bottom; transform: rotate(-90deg); opacity: 0; } 100% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } Reload page function myFunction() { location.reload(); }
Read MoreDefine the width of each column in CSS Grid Layout
To set the width of each column in Grid Layout, use the grid-template-columns property.ExampleYou can try to run the following code to implement it − .container { display: grid; background-color: gray; grid-template-columns: 120px 80px 50px; padding: 20px; grid-gap: 20px; } .container > div { background-color: yellow; border: 2px solid gray; padding: 35px; font-size: 30px; text-align: center; } Game Board 1 2 3 4 5 6
Read MoreDisplay the overflowed content when hovering over the element with CSS
To display the overflowed content while hovering over elements, you can try to run the following code:Example div.demo { white-space: nowrap; width: 180px; overflow: hidden; border: 2px solid blue; } div.demo:hover { text-overflow: inherit; overflow: visible; } Hover to see the complete text below: Demo Text that will hide in this box.
Read More