How to Create an Overflow Class with Bootstrap 5 - ambistech

Overflow is a class used to wrap content contained in an element.

These contents can be in the form of text, images, or videos.

In this tutorial, we will try to create an overflow class for text in Bootstrap 5.

Before moving on to the tutorial, we first know the various overflow classes on Bootstrap 5.

There are four kinds of classes, there are:

• overflow-visible
• overflow-hidden
• overflow-scroll
• overflow-auto

Let's start with the first one.

1. Overflow Visible

In this overflow visible class, text that appears to exceed the size of the element will still appear and will not be truncated.

Consider the following program.

		 	
    <div class="container p-3 rounded-3 bg-secondary-subtle overflow-visible" style="width:300px; height:150px; margin-bottom:100px;">
    	<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.

2. Overflow Hidden

The next class is overflow-hidden.

In this overflow hidden, text that exceeds the size of the element will be hidden and not displayed on the screen.

Consider the following program.

		 	
    <div class="container p-3 rounded-3 bg-secondary-subtle overflow-hidden" style="width:300px; height:150px; margin-bottom:100px;">
    	<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.

3. Overflow Scroll

In this overflow-scroll class, text that exceeds the size of the element will be stored intact within that element.

And automatically provided a scrollbar vertically and a scrollbar horizontally.

Consider the following program.

		 	
    <div class="container p-3 rounded-3 bg-secondary-subtle overflow-scroll" style="width:300px; height:150px; margin-bottom:100px;">
    	<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.

4. Overflow Auto

In this overflow-auto class, if the text exceeds the size of the element, a scrollbar is automatically created.

If the excess text is only in the vertical part, an overflow-y scrollbar will be provided.

And if the excess text is only on the horizontal part, it will provide an overflow-x scrollbar.

Consider the following program.

		 	
    <div class="container p-3 rounded-3 bg-secondary-subtle overflow-auto" style="width:300px; height:150px; margin-bottom:100px;">
    	<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.

That was an example of using class overflow in Bootstrap 5. Furthermore, bootstrap 5 also provides classes for overflow-x properties and classes for overflow-y properties, which you can learn from the tutorial next tutorial.