PUBLISHED ON: JUNE 2, 2021
Bootstrap Overflow
When the contents are larger than their element then there is a chance of overflow. The overflow on any element does not make your website look good. Bootstrap adjusts this overflow using its default value and classes.
The notation used for overflow is .overflow-value where values are
- .overflow-auto - It automatically adjusts the overflow with a set height and weight. The contents will vertically scroll.
- .overflow-hidden - It hides the contents which are overflown.
- .overflow-show - It shows the overflown contents. The contents can expand beyond the given element block.
- .overflow-scroll - It will scroll down the contents from the element with set height and width.
Example: Overflow in Text
In the below example, we have shown how the overflow can be adjusted with the help of overflow classes. The container has predefined dimensions and the contents get adjusted according to the function of the classes.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<div class="container bg-light">
<div class="d-inline-block overflow-auto me-2 bg-white " style=" max-width: 200px; max-height: 100px">
<p> The <code> .overflow-auto </code> automatically adjust the contents in the container class. It add vertically scrolling to the element.</p>
</div>
<div class="d-inline-block overflow-hidden me-2 bg-white" style=" max-width: 200px; max-height: 100px">
<p> The <code> .overflow-hidden </code> hides the contents which are overflown. It truncates the overflown part</p>
</div>
<div class="d-inline-block overflow-visible me-2 bg-white " style=" max-width: 200px; max-height: 100px">
<p> The <code> .overflow-visible </code> is used to show overflow within the element.</p>
</div>
<div class="d-inline-block overflow-scroll bg-white " style=" max-width: 200px; max-height: 100px">
<p> The <code> .overflow-scroll </code> adds vertically scrolling to the element.</p>
</div>
</div>
</body>
</html>
Output:
Here is the output of the above program.
Example: Using overflow class with the images
In the above example, we have shown how textual contents are adjusted with the help of overflow classes. Now lets us see how images get adjusted with these classes.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<div class="container bg-light mt-5">
<div class="d-inline-block overflow-auto me-2 bg-white " style=" max-width: 200px; max-height: 150px">
<img src="pic1.png" alt="img">
</div>
<div class="d-inline-block overflow-hidden me-2 bg-white" style=" max-width: 200px; max-height: 150px">
<img src="pic1.png" alt="img">
</div>
<div class="d-inline-block overflow-visible me-3 bg-white " style=" max-width: 200px; max-height: 150px">
<img src="pic1.png" alt="img">
</div>
<div class="d-inline-block overflow-scroll bg-white ms-3 " style=" max-width: 200px; max-height: 150px">
<img src="pic1.png" alt="img">
</div>
</div>
</body>
</html>
Output:
Here is the output of the above program.
Conclusion
So now if you have any problem with overflow you can easily sort it out with the help of these overflow classes. Bootstrap 5 provides an easy and quick way to use these classes within the project.
