How to set one column control over height in Bootstrap ?

Last Updated : 26 Jun, 2020

Creating an HTML document using Bootstrap and make more than one column. The task is to set the control to a column over the height using Bootstrap. The way to do this is by utilizing another div interior in the left column. The inward div ought to be position: absolute.

Example:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
  <!-- Required meta tags -->
  <meta charset="utf-8"> 
  <meta name="viewport" content= 
    "width=device-width, initial-scale=1,  
    shrink-to-fit=no"> 
  
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href= 
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
    integrity= 
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
    crossorigin="anonymous"> 
  
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js,  
    then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity= 
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"> 
  </script> 
    
  <script src= 
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity= 
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous"> 
  </script> 
    
  <script src= 
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
    integrity= 
"sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
    crossorigin="anonymous"> 
  </script> 
  
  <title> 
    How to set one column control  
    over height in Bootstrap ? 
  </title> 
  
  <style type="text/css"> 
    .bg-1 { 
      background-color: yellow; 
    } 
  
    .bg-2 { 
      background-color: lightgreen; 
    } 
  </style> 
</head> 
  
<body> 
  <center> 
    <h1 style="color: green"> 
      GeeksforGeeks 
    </h1> 
  </center> 
  
  <div class='container'> 
    <div class='row'> 
      <div class='col-3 bg-1 overflow-auto'> 
        <div class="position-absolute"> 
          A Computer Science portal for geeks.  
          It contains well written, well thought 
          and well explained computer science  
          and programming articles, quizzes and  
          many other contents. 
          A Computer Science portal for geeks.  
          It contains well written, well thought 
          and well explained computer science  
          and programming articles, quizzes and  
          many other contents. 
        </div> 
      </div> 
      <div class='col-9 bg-2'> 
        A Computer Science portal for geeks.  
        It contains well written, well thought 
        and well explained computer science  
        and programming articles, quizzes and  
        many other contents. 
        A Computer Science portal for geeks.  
        It contains well written, well thought 
        and well explained computer science  
        and programming articles, quizzes and  
        many other contents. 
        A Computer Science portal for geeks.  
        It contains well written, well thought 
        and well explained computer science  
        and programming articles, quizzes and  
        many other contents. 
      </div> 
    </div> 
  </div> 
</body> 
  
</html> 

Output:

In the above example,
The position property is used to place a component relative to its parent’s position and changes the layout around it.
The overflow property indicates what ought to happen in case content overflows an element’s box. This property indicates whether to clip content or to include scrollbars when an element’s content is as well big to fit in an indicated region.

Suggest improvement

How to wrap the text around an image using HTML and CSS ?

DTD Full Form

Share your thoughts in the comments

How to set one column control over height in Bootstrap ?

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?