How to Create an Overflow-x and Overflow-y using Bootstrap 5.

In the previous tutorial, we learned how to create a basic overflow.

In this tutorial, we will learn how to create an overflow class for vertical dimensions and horizontal dimensions.

The vertical overflow class has the class property overflow-y-*. While horizontal overflow has the class property overflow-x-*.

Before continuing on the tutorial, you should have learned about basic overflow first.

Let's start with the first one.

1. Overflow-x

In this overflow-x class, the text will only appear horizontally.

There are four class properties that can be used, there are visible, hidden, scroll, and auto.

overflow-x-visible

With the visible property, the text will appear in its entirety outside the element.

		 	
    <div class="container p-3 rounded-3 bg-secondary-subtle overflow-x-visible" style="width:300px; height:150px;">
    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

Display results like this.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

overflow-x-hidden

The text will be truncated and hidden inside the element.

		 	
    <div class="container p-3 rounded-3 bg-secondary-subtle overflow-x-hidden" style="width:300px; height:150px;">
    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

overflow-x-scroll

In this scroll property, the element will provide a horizontal scrollbar function.

		 	
    <div class="container p-3 rounded-3 bg-secondary-subtle overflow-x-scroll" style="width:300px; height:150px;">
    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

overflow-x-auto

Automatically, the element will provide a horizontal scrollbar if needed, otherwise it is not present.

		 	
    <div class="container p-3 rounded-3 bg-secondary-subtle overflow-x-auto" style="width:300px; height:150px;">
    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

2. Overflow-y

In this overflow-y property, the text will appear vertically. Likewise, the scrollbar also appears vertically.

Similar to overflow-x, overflow-y also has four class properties, there are visible, hidden, scroll, and auto.

overflow-y-visible

		 	
    <div class="container p-3 rounded-3 bg-secondary-subtle overflow-y-visible" style="width:300px; height:150px;">
    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

overflow-y-hidden

		 	
    <div class="container p-3 rounded-3 bg-secondary-subtle overflow-y-hidden" style="width:300px; height:150px;">
    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

overflow-y-scroll

		 	
    <div class="container p-3 rounded-3 bg-secondary-subtle overflow-y-scroll" style="width:300px; height:150px;">
    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

overflow-y-auto

		 	
    <div class="container p-3 rounded-3 bg-secondary-subtle overflow-y-auto" style="width:300px; height:150px;">
    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

Bootstrap

Formulir Kontak

ambistech