- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Found 8894 Articles for Front End Technology
![Smita Kapse](https://www.tutorialspoint.com/assets/profiles/13597/profile/60_103706-1512718957.jpg)
100 Views
To set how many columns an element should span, use the column-span property. You can try to run the following code to implement the column-span property:ExampleLive Demo .demo { column-count: 4; column-rule-color: maroon; column-rule-style: dashed; } h1 { column-span: all; } ... Read More
![George John](https://www.tutorialspoint.com/assets/profiles/13511/profile/60_58410-1512537824.png)
1K+ Views
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
![Nitya Raut](https://www.tutorialspoint.com/assets/profiles/13573/profile/60_92249-1512715559.jpg)
290 Views
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
![Chandu yadav](https://www.tutorialspoint.com/assets/profiles/22330/profile/60_142811-1519038104.jpg)
1K+ Views
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
![Vrundesha Joshi](https://www.tutorialspoint.com/assets/profiles/13566/profile/60_88163-1512715024.jpg)
83 Views
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
![Ankith Reddy](https://www.tutorialspoint.com/assets/profiles/22328/profile/60_142162-1519038074.jpg)
65 Views
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
![Nishtha Thakur](https://www.tutorialspoint.com/assets/profiles/13598/profile/60_104893-1512719058.jpg)
122 Views
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
![George John](https://www.tutorialspoint.com/assets/profiles/13511/profile/60_58410-1512537824.png)
118 Views
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
![Chandu yadav](https://www.tutorialspoint.com/assets/profiles/22330/profile/60_142811-1519038104.jpg)
207 Views
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
![Daniol Thomas](https://www.tutorialspoint.com/assets/profiles/13551/profile/60_130035-1512726078.jpg)
703 Views
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