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 andrew schoenherr
andrew schoenherr
8,427 Points

Bootstrap col sizing help!!

I created a row. Inside the rows i should have 3 cols. I have col-lg-2.5, col-lg-2.5 and col-lg-7. The issue I am having is that the 3rd col at 7 falls below the content of cols 1 and 2. I want it positioned right of the first 2 cols. Where am i missing?

<body> <div class="container"> <div class="row">

        <div class="col-sm-12 col-lg-2.5">
        <a  href="TeeTimes.html">
            <img class="picnav" src="../images/teetime.jpg" alt="Golf ball on a tee">
        </a>
        <a  href="Rates.html">
            <img class="picnav" src="../images/rates.jpg" alt="Golfer swinging a golf club">
        </a>
        </div>




        <div class="col-sm-12 col-lg-2.5">
        <a  href="Events.html">
            <img class="picnav" src="../images/events.jpg" alt="Golf green with flag stick">
        </a>
        <a  href="Memberships.html">
            <img class="picnav" src="../images/memberships.jpg" alt="Golf balling rolling into the hole">
        </a>
        </div>


        <div class="col-lg-7">
            <h3 class="welcome">Welcome to Hickory Hills Golf Club</h3>
                <p class="homeDesciption">
                    The par-35, 9-hole golf course at Hickory Hills Golf Course in Brownstown, Indiana measures over 3100 yards from the back tees. It was designed by Harold England and opened in 1973. The manageable length of our golf course along with our affordable anytime rates make Hickory Hills Golf Course your best choice for outdoor recreation. Our golf course features rolling hills, magnificent fairways, and a healthy challenge.
                </P>

                <span style="display: block !important; width: 320px; text-align: center; font-family: sans-serif; font-size: 12px;" class="weatherp"><a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=zmw:47220.1.99999&bannertypeclick=wu_clean2day" title="Brownstown, Indiana Weather Forecast" target="_blank"><img src="http://weathersticker.wunderground.com/weathersticker/cgi-bin/banner/ban/wxBanner?bannertype=wu_clean2day_cond&airportcode=KBAK&ForcedCity=Brownstown&ForcedState=IN&zip=47220&language=EN" alt="Find more about Weather in Brownstown, IN" width="300" /></a><br><a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=zmw:47220.1.99999&bannertypeclick=wu_clean2day" title="Get latest Weather Forecast updates" style="font-family: sans-serif; font-size: 12px" target="_blank">Click for weather forecast</a></span>

        </div>
    </div>
</div>
Jacob Mishkin
Jacob Mishkin
23,118 Points

Can you please add your CSS, so we can help solve the issue.

1 Answer

Thomas van der Zel
Thomas van der Zel
16,796 Points
Thomas van der Zel
Thomas van der Zel
16,796 Points

Hi Andrew,

Although I'm not sure, I think your problem is in the 2.5 columns. I believe halves are not supported.

You can try using col-lg-3, col-lg-3, col-lg-6 to see if that solves the problem. If you're really tied to the 2.5 cols you could wrap the two divs in a 5 col div. And the splitting it in two 6 col divs. Similar to the suggested solution here: http://stackoverflow.com/questions/22986664/half-columns-in-twitter-bootstrap-3

Hope this helps you out!