How to set one column control over height in Bootstrap ?

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
    integrity=
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
    crossorigin="anonymous">
  
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, 
    then Bootstrap JS -->
    integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous">
  </script>
    
  <script src=
    integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous">
  </script>
    
  <script src=
    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>

chevron_right


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.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.