CODEWITHSUNDEEP
htmlcssbootstrap-4
Giorgi Tsiklauri
Giorgi Tsiklauri

Reputation: 11120

"row" in CSS Bootstrap is very high, can I make it of the same height as its embedded div?

I have a simple website, with Bootstrap CSS.

<!DOCTYPE html>

<html lang="en">

    <head>

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
                        
        <style>
        
                /* width */
                ::-webkit-scrollbar {
                    width: 5px;
                }

                /* Scrollbar background */
                ::-webkit-scrollbar-track {
                    background: rgb(244, 244, 244);
                }

                /* Scrollbar handle */
                ::-webkit-scrollbar-thumb {
                    background: rgba(200, 200, 200, 12);
                }

                /* Scrollbar handle on hover */
                ::-webkit-scrollbar-thumb:hover {
                    background: rgb(80, 20, 160);
                }
                
                
                p, ul {
                    font-family:Consolas;
                    padding:1%;
                    font-size:12px
                }
                
                footer {
                    text-align:center;
                    font-size:10px;
                }
                
                
                #scrollablediv {
                    overflow-y: scroll;
                    height:50%;
                }

                
                /* Making images black-and-white and colourful when hovered. */
                img {
                    -webkit-filter: grayscale(100%);
                    -moz-filter: grayscale(100%);
                    filter: grayscale(100%);
                    transition: all .5s ease;
                }       
                img:hover {
                    -webkit-filter: grayscale(0%);
                    -moz-filter: grayscale(0%);
                    filter: grayscale(0%);
                }       
        </style>
        
    </head>

    <body style="margin:.2%; padding:3%; height: 70px">

        <header>
            <h1 style="font-family:consolas; font-size:18px">Header here!</h1>
        </header>
    
        <hr>
                
        <div class="row">
        
            <div class="col-lg-2">
            </div>
        
            <div class="col-lg-10">
                <div id="scrollablediv">
                    <h6>Title1</h6>
                    <p>
                        <b>TL;DR:</b> Some text..
                        <br><br>
                        <b>TS;WM:</b> Some text..
                    </p>

                    <h6>Title2</h6>
                    <p> Some text..
                    </p>

                    <h6>Title3</h6>
                    
                    <ul style="font-family:Consolas; font-size:12px; list-style-position: inside;">
                        <li>
                            Some text..
                        <li>
                        <li>
                            Some text..
                        <li>
                    </ul>                       
                
                    <h6>Title4</h6>
                    <p>
                        Some text..
                    </p>
            
                    <h6>Title5</h6>
                    <p>
                        Some text..
                    </p>

                    <h6>Title6</h6>
                    
                    <ul style="font-family:Consolas; font-size:12px; list-style-position: inside;">
                        <li>
                            Some text..
                        <li>
                        <li>
                            Some text..
                        <li>
                    </ul>   
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <footer>© 2022.</footer>
            </div>
        <div class="row">

        <script src="bootstrap-5.2.2-dist/js/bootstrap.bundle.min.js"></script>
    </body>
</html>

When it renders on a desktop monitor, <div class="row"> element gets really high, respectively, pushing this property to all its children elements (cols).

If you'll open this website, you'll notice, that height of the scrollablediv element is not that high, but its container row element is really high. I want to have a wrapper row of the same size as its children cols.

How would I do that?

Upvotes: 0

Views: 32

Answers (1)

Helping Hands
Helping Hands

Reputation: 150

Hope it's work for you !!!

you need to add class align-items-start in main row, and also set height of scrollable div in px instead of %

/* width */
                ::-webkit-scrollbar {
                    width: 5px;
                }

                /* Scrollbar background */
                ::-webkit-scrollbar-track {
                    background: rgb(244, 244, 244);
                }

                /* Scrollbar handle */
                ::-webkit-scrollbar-thumb {
                    background: rgba(200, 200, 200, 12);
                }

                /* Scrollbar handle on hover */
                ::-webkit-scrollbar-thumb:hover {
                    background: rgb(80, 20, 160);
                }
                
                
                p, ul {
                    font-family:Consolas;
                    padding:1%;
                    font-size:12px
                }
                
                footer {
                    text-align:center;
                    font-size:10px;
                }
                
                
                #scrollablediv {
                    overflow-y: scroll;
                    height:300px;
                }

                
                /* Making images black-and-white and colourful when hovered. */
                img {
                    -webkit-filter: grayscale(100%);
                    -moz-filter: grayscale(100%);
                    filter: grayscale(100%);
                    transition: all .5s ease;
                }       
                img:hover {
                    -webkit-filter: grayscale(0%);
                    -moz-filter: grayscale(0%);
                    filter: grayscale(0%);
                } 
<body style="margin:.2%; padding:3%; height: 70px">

        <header>
            <h1 style="font-family:consolas; font-size:18px">Header here!</h1>
        </header>
    
        <hr>
                
        <div class="row align-items-start">
        
            <div class="col-lg-2">
            </div>
        
            <div class="col-lg-10">
                <div id="scrollablediv">
                    <h6>Title1</h6>
                    <p>
                        <b>TL;DR:</b> Some text..
                        <br><br>
                        <b>TS;WM:</b> Some text..
                    </p>

                    <h6>Title2</h6>
                    <p> Some text..
                    </p>

                    <h6>Title3</h6>
                    
                    <ul style="font-family:Consolas; font-size:12px; list-style-position: inside;">
                        <li>
                            Some text..
                        <li>
                        <li>
                            Some text..
                        <li>
                    </ul>                       
                
                    <h6>Title4</h6>
                    <p>
                        Some text..
                    </p>
            
                    <h6>Title5</h6>
                    <p>
                        Some text..
                    </p>

                    <h6>Title6</h6>
                    
                    <ul style="font-family:Consolas; font-size:12px; list-style-position: inside;">
                        <li>
                            Some text..
                        <li>
                        <li>
                            Some text..
                        <li>
                    </ul>   
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <footer>© 2022.</footer>
            </div>
        <div class="row">

        <script src="bootstrap-5.2.2-dist/js/bootstrap.bundle.min.js"></script>
    </body>

Upvotes: 1

Related Questions