Bootstrap 4 Alpha 6 Column taking up full width

514
January 07, 2017, at 6:05 PM

I just upgraded one of my electron apps to Bootstrap's new Alpha 6 for Bootstrap 4. They made lots of adjustments to the grid system and flexbox and in turn that has given me some wonky bugs in my electron app. Currently I have a sidebar and a main area.

and the sidebar is taking up the whole width of the screen, even though I have it defined as .col-4 .col-xl-3,

And it is shoving everything to the right of it down below. How can I prevent this behavior from happening?

Answer 1

.row's, compensate for the guttering that gets applied to columns. From Docs

Rows are horizontal groups of columns that ensure your columns are lined up properly. We use the negative margin method on .row to ensure all your content is aligned properly down the left side.

Try the following:

JSFIDDLE

HTML

<div class="row">
    <div class="col-4 col-xl-3 no-gutter">
    LEFT
    </div>
    <div class="col-8 col-xl-9">
     RIGHT
    </div>
</div>
Rent Charter Buses Company
READ ALSO
Angularjs remove table row with different background color in odd even selected row

Angularjs remove table row with different background color in odd even selected row

I have a table with different background color in odd even row, also there is different background color for selected rowA button to remove the object in array that bind with the table data

381
make badge on button floating (materialize) [on hold]

make badge on button floating (materialize) [on hold]

I am trying to make a badge and icon in a button using materializecss, like this:

415
I cant put the pictures and text inline propperly

I cant put the pictures and text inline propperly

how can I put text beside picture without disturbing the other content?

361
How to add color in title text

How to add color in title text

I have "New! This is my webpage" textIn this I want to add red color to "New!" text

493