Bootstrap 5: Vertically Center an Element inside a Div

September 8, 2021 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 in 2021

August 30, 2021 A Goodman

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

August 26, 2021 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

August 26, 2021 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

August 16, 2021 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

August 16, 2021 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

August 16, 2021 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

July 29, 2021 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

July 21, 2021 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!

Javascript: Set HTML lang attribute programmatically

July 21, 2021 A Goodman

You can dynamically change the lang attribute of your HTML document just by using pure Javascript like this: For more clarity, take a look at the example below. Example Preview We are going to build a…

CSS: Styling Input’s Placeholder Text Examples

June 16, 2021 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

June 13, 2021 The Plumber

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…

1 2