HTML & CSS

Bootstrap 5: Vertically Center an Element inside a Div

Updated: March 3, 2023 By: Pennywise

The examples below show you how to vertically center an element that locates inside a div element. We are going to use Bootstrap 5 and its d-flex class to make the parent div become a flexbox…

Most Popular Open-Souce CSS Frameworks (2024)

Updated: January 24, 2024 By: Guest Contributor

Using CSS frameworks helps you create modern, industry-standard UI/UX in a record time. Nowadays, they are widely used on a huge amount of websites around the world by individuals, startups, agencies, and big enterprises. Using a…

Bootstrap 5: How to Create Icon Buttons with Text

Updated: August 26, 2021 By: A Goodman

In the example below, we’ll use Bootstrap and Bootstrap icons delivered from a CDN. Include the Bootstrap library and the Bootstrap Icons font stylesheet in the <head> of your HTML file like this: Now we’re ready…

Bootstrap 5: Card Examples

Updated: August 26, 2021 By: A Goodman

The examples below show you how to create beautiful cards with Bootstrap 5. Example 1: Product Card Screenshot: The code: Example 2: Profile Card Screenshot: The code (without HTML boilerplate): Conclusion We’ve examined a few examples…

CSS Flexbox: Make an Element Fill the Remaining Space

Updated: October 18, 2022 By: A Goodman

You can use the flex-grow property to force an item to fill the remaining space on the main axis of a flex container. The item will expand as much as possible and occupy the free area….

CSS: Center Text inside a Div with Flexbox

Updated: August 16, 2021 By: Guest Contributor

There are several ways to center text inside a div element, but CSS Flexbox may be the most convenient approach. What you need to do is to style the div element like this: Complte Example Screenshot:…

CSS Grid: repeat() and auto-fill example

Updated: August 16, 2021 By: A Goodman

The example below shows you how to create a simple responsive layout with a CSS grid. We will use the repeat() function and the auto-fill keyword to get the job done. There’s no need to use…

CSS Gradient Text Color Examples

Updated: July 29, 2021 By: A Goodman

A few examples of creating gradient text in CSS. Example 1: Linear-gradient text. Screenshot: The code: Example 2: Radial-gradient Text Screenshot: The code: Example 3: Repeating-linear-gradient Text Screenshot: The code: Final Words We’ve gone through some…

CSS: Styling Scrollbar Example

Updated: July 21, 2021 By: A Goodman

For WebKit browsers (Google Chrome, Microsoft Edge, Safari, etc), you can customize the style of a scrollbar such as background color, width, thumb, tract… by using pure CSS. Example Preview: The Code: That’s it. Happy coding!

CSS: Styling Input’s Placeholder Text Examples

Updated: February 8, 2023 By: A Goodman

This article walks you through a couple of different examples of styling the placeholder text of an input/textarea field by using the ::placeholder pseudo-element in CSS. Example 1 In most browsers, placeholder text is light grey…

CSS: Adjust the Gap between Text and Underline

Updated: February 8, 2023 By: Napoleon

This article shows you a couple of different ways to increase or decrease the space between text and underline when using text-decoration: underline in CSS. Using text-underline-offset property The text-underline-offset property is used to set the…

CSS @keyframes Examples

Updated: February 8, 2023 By: A Goodman

This article walks you through a couple of different examples of using @keyframes to create animation in CSS. The Moving Box This example will create a box that moves in a rectangular orbit. Besides the change…

1 5 6 7 8