Front End Technology Articles - Page 624 of 860

To position text to bottom left, use the bottom and left property. You can try to run the following code to position text to bottom left on an imageExampleLive Demo                    .box {             position: relative;          }          img {             width: 100%;             height: auto;             opacity: 0.6;          }          .direction {             position: absolute;             bottom: 10px;             left: 19px;             font-size: 13px;          }                     Heading One       Below image has text in the bottom left:                          Bottom Left Corner          

To create a disabled button look, use the CSS opacity property.ExampleYou can try to run the following code to create a disabled look of a button −Live Demo                    .btn1 {             color: black;             text-align: center;             font-size: 15px;          }          .btn2 {             color: black;             text-align: center;             font-size: 15px;             opacity: 0.5;          }                     Result       Click below for result:       Enabled       Disabled    

You can try to run the following code to create a vertical button groupExampleLive Demo                    .mybtn .button {             background-color: orange;             border: 1px solid green;             width: 120px;             color: white;             font-size: 14px;             padding: 10px;             text-align: center;             text-decoration: none;             display: block;          }                              Result          Result          Result          Result          

To set the color between columns, use the column-rule-color property. You can try to run the following code to implement the column-rule-color property.With that, we will also set the style of the column rule:ExampleLive Demo                    .demo {             column-count: 4;             column-gap: 50px;             column-rule-color: orange;             column-rule-style: dashed;          }                              This ... Read More

The shorthand property for column rule is column-rule property. You can try to run the following code to implement the column-rule propertyExampleLive Demo                    .demo {             column-count: 4;             column-gap: 50px;             column-rule: 2px dotted orange;          }                              This is demo text. This is demo text. This is demo text.          This ... Read More

Use the column-gap property to set the gap between the columns. You can try to run the following code to implement the column-gap property, with value 50px:ExampleLive Demo                    .demo {             column-count: 4;             column-gap: 50px;          }                              This is demo text. This is demo text. This is demo text. This is demo text.          This is ... Read More

To fill columns, use the column-fill property. You can try to run the following code to implement the column-fill property, with balance form:ExampleLive Demo                    .demo {             column-count: 4;             column-fill: balance;          }                              This is demo text. This is demo text. This is demo text.          This is demo text. This is demo text. This is ... Read More

To specify the number of columns an element should be divided into, use the column-count property.You can try to run the following code to implement the column-count property with 4 columnsExampleLive Demo                    .demo {             column-count: 4;          }                              This is demo text. This is demo text. This is demo text.          This is demo text. This is demo text. This is ... Read More

You can try to run the following code to center pagination on a web page:ExampleLive Demo                    .demo {             display: inline-block;          }          .demo1 {             text-align: center;          }          .demo a {             color: red;             padding: 5px 12px;             text-decoration: none;             transition: background-color 2s;             border: 1px solid orange;             font-size: 18px;          }          .demo a.active {             background-color: orange;             color: white;             border-radius: 5px;          }          .demo a:hover:not(.active) {             background-color: yellow;          }          .demo a:first-child {             border-top-left-radius: 10px;             border-bottom-left-radius: 10px;          }          .demo a:last-child {             border-top-right-radius: 10px;             border-bottom-right-radius: 10px;          }                     Our Quizzes                                                

The space as shown in the following figure, between rows and columns are called Grid Gaps