Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Aquib Javed
Aquib Javed
8,289 Points

Help with CSS/Bootstrap in creating a sidebar that is responsive.

I'm trying to make a page with several panels using Bootstrap. The problem I'm facing, as shown in the pictures below, is that whenever I'm creating a sidebar with 3-column length, it's automatically pushing the row beneath it a little further down. Please refer to the pictures below:

I want the gap between two panels like this picture

I can get the above spacing if I manually set a height for the sidebar(any height, tried with 20px/50px/2px), but it causes a collapse of the sidebars if I then lower the size of my browser for a mobile view (i.e responsive).

If I don't however, set some height for the sidebars manually, it then creates a problem like this

So basically, I can get the expected spacing between the panels after setting up the sidebars, only if I manually set a height (any pixels of height, which is mainly confusing me), but which collapses if I go to the mobile view. But if I don't set the height, then it automatically pushes the panels beneath it. Can someone tell me how can I fix this issue And make sure that the sidebar doesn't collapse in a different viewport size?

Thanks!

2 Answers

Robert Manolis
STAFF
Robert Manolis
Treehouse Guest Teacher
Robert Manolis
Robert Manolis
Treehouse Guest Teacher

If I could see y the code I might be able to figure out what is happening

Aquib Javed
Aquib Javed
8,289 Points

okay here's the code:

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap 3</title>
        <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="styles.css">

    </head>
    <body>

        <div class = "navbar navbar-inverse navbar-static-top">

        <div class="container"> 
            <div class="navbar-header">
               <a href="#" class="navbar-brand">HackerNews</a>
               <button class="navbar-toggle" data-toggle="collapse" data-target = ".navHeaderCollapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>
        </div>  
                <div class="collapse navbar-collapse navHeaderCollapse">
                    <ul class = "nav navbar-nav navbar-right">
                        <li class = "dropdown"><a href = "#" class = "dropdown-toggle" data-toggle="dropdown">Login <b class = "caret"></b></a>
                        <ul class ="dropdown-menu">
                            <li><a href = "#">User</a></li>
                            <li><a href = "#">Moderator</a></li>
                            <li><a href = "#">Admin</a></li>
                        </ul>
                        </li>
                    </ul>
                    <ul class = "nav navbar-nav navbar-left">
                        <li class ="active" ><a href = "#">New</a></li>
                        <li><a href = "#">Top</a></li>
                        <li><a href = "#">Controversial</a></li>
                    </ul>
                </div>      
            </div>
        </div>


        <div class="container">
        <div class="row">
            <div class="col-lg-9">
                <div class="panel panel-default">
                    <div class="panel-body">

                        <h4>Shombare hartal dilona ken jamater baccha?<br><small>About an hour ago by Moyna</small></br></h4>

                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="list-group">
                    <a href = "#"class="list-group-item">
                        <h4 class = "list-group-item-heading">Jodi laage arki</h4>
                        <p class = "list-group-item-text">ekta bhejal ase, page ta responsive korte chaile ei sidebar ta bhejal kore dasdas dasdasda ssdnfsjn vdfivj sfjsdofijs odifjodsjfo asdjasdkjaslkd:/</p>
                    </a>

                </div>
            </div>

            <!--ekhan theke-->

            <!--ettuk-->
        </div>  
    </div>

    <!--ekhane you connect the loop arki -->
        <div class="container">
        <div class="row">
            <div class="col-lg-9">
                <div class="panel panel-default">
                    <div class="panel-body">

                        <h4>Mongolbare hartal dilona ken jamater baccha?<br><small>About an hour ago by Shona</small></br></h4>

                    </div>
                </div>
            </div>
        </div>  
    </div>

<div class="container">
        <div class="row">
            <div class="col-lg-9">
                <div class="panel panel-default">
                    <div class="panel-body">

                        <h4>Mongolbare hartal dilona ken jamater baccha?<br><small>About an hour ago by Shona</small></br></h4>

                    </div>
                </div>
            </div>
        </div>  
    </div>
    <!--ekhane you connect the loop arki -->



        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script src="js/bootstrap.js"></script>
    </body>

</html>

and here's the CSS:

.panel-body{
    margin-top: 10px;
    padding-top: 0;
}
.col-lg-3{
max-height: 20px; ***/*this one causes the problem if I comment this line out*/***
}
Robert Manolis
STAFF
Robert Manolis
Treehouse Guest Teacher
Robert Manolis
Robert Manolis
Treehouse Guest Teacher

did you try floating .col-lg-3 to the right to remove it from the DOM flow?

Also, what I find can really help with styling and spacing issues, is to open up the developer tools for your browser, the one that let's you see the markup and the box model, then you can literally see how much space is being applied where, and what might be getting your way.

I'm not really familiar with bootstrap yet, so I'm not sure what knew rules apply. Is it typical to add a lot of long class attributes in bootstrap? Are some of them for functionality or are they all just for refrencing?

Aquib Javed
Aquib Javed
8,289 Points

Most of these classes, as per my knowledge are applied for using Bootstrap's own generated css, so you don't really need to add much styling to your webpage, bootstrap does that for you. Will admit though, for a beginner like me, this long list of classes sometimes get a little too difficult, thanks for your help anyways!