Need help with bootstrap grid col-md

[casioBH]

Hello everyone,

I am trying to make only one grid with “col-md-8” and “col-md-4” but the problem is that I got two rows with maximum width, but I want only one horizontal div, left to be width col-md-8 and right to be col-md-4

I have no idea what could be wrong with my code, for me it is all correct.

Thanks in advance!

My code is:

    <div class="container">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="left-side">Left part col-md-8</div>
                        </div>
                        <div class="col-md-4">
                            <div class="right-side">Right part col-md-4</div>
                        </div>

                                        </div>
   </div>

[Paulie_D]

Looks like it works to me:

https://codepen.io/Paulie-D/pen/YxqgzW

[casioBH]

Yes, I got the sme result and look, but that is not what I want.

I want only one box, for example this pink one, which left side would be width:col-md-8 and left width: col-md-4.

Not two rows below each other…

thanks

[Lionel]

Looks like the code is fine bro; take a look at the source, maybe you’re not calling bootstrap correctly into the page.

[Lionel]

Oh; wait… I think the result you’re experiencing is about screen size. If you open the code sent by Paulie in a new tab, in full screen, you’ll be able to see the result you want. But since you’re only using “col-md”, the columns will work only from an specific screen width.

Try adding col-sm instead col-md.

[Author]

Posts