Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to set one column control over height in Bootstrap?
In this article, we will learn how we can set one column control over height in bootstrap? To solve this problem, first we make two different columns on the web page using Bootstrap classes, then we will use a div element inside one of those columns with position absolute to set the control of that particular column over height in bootstrap.
Let us now practically understand the above approach or the process in details by implementing it inside the different code examples.
Steps
Step 1 − In the first step, we will define two different bootstrap columns inside a row using the bootstrap classes.
Step 2 − In the next step, we will assign position: relative property to one of those columns so that, we can add a div with position: absolute to that particular column and give the column control over height.
Step 3 − In the final step, we will insert the text inside the columns that will be visible on the screen.
Example
The below example will illustrate how you can set one column control over height in bootstrap −
<html>
<head>
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel = "stylesheet">
<style>
.column1-bg{
background-color: bisque;
}
.column2-bg{
background-color: aqua;
}
</style>
</head>
<body>
<div class = "container">
<h1 class = "display-6"> How to set one column control over height in Bootstrap ? </h1>
<p class = "lead"> The second columns in the below row has the control over the height. </p>
<div class = "row">
<div class = "col-8 column1-bg">
<p> Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. </p>
<p> The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more. </p>
</div>
<div class = "col-4 column2-bg overflow-auto position-relative">
<div class = "position-absolute">
<p> Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. </p>
<p> The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more. </p>
</div>
</div>
</div>
</div>
<!-- bootstrap JavaScript cdn -->
<script src = "https://code.jquery.com/jquery-3.5.1.slim.min.js"> </script>
<script src = "https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>
In the above example, we have implemented the approach or the solution to set one columns control over height in bootstrap using the bootstrap classes. In this example, the control over height is given to the second column of the row.
Let us see one more code example in which the control to the height is given to the first column.
Algorithm
The algorithm of this example is very similar to the above example. You just need to reverse or exchange the HTML of both the columns with each other to change the column control as shown in below example.
Example
The example below will explain how you can give control over the height to the first column in the row−
<html>
<head>
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel = "stylesheet" >
<style>
.column1-bg{
background-color: bisque;
}
.column2-bg{
background-color: aqua;
}
</style>
</head>
<body>
<div class = "container">
<h1 class = "display-6"> How to set one column control over height in Bootstrap ? </h1>
<p class = "lead"> The second columns in the below row has the control over the height. </p>
<div class = "row">
<div class = "col-4 column1-bg overflow-auto position-relative">
<div class = "position-absolute">
<p> Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. </p>
<p> The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more. </p>
</div>
</div>
<div class = "col-8 column2-bg">
<p> Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. </p>
<p> The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more. </p>
</div>
</div>
</div>
<!-- bootstrap JavaScript cdn -->
<script src = "https://code.jquery.com/jquery-3.5.1.slim.min.js"> </script>
<script src = "https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"> </script> <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>
In this example, we use the same logic to give the control over height to the first columns instead of second one.
Conclusion
In this article, we have learned about giving the control over height to only one particular column in bootstrap with the help of two different code examples to see the practical implementation of our approach towards the problem.
18 Views
