CODEWITHSUNDEEP
htmlcsstwitter-bootstrapflexbox
Dennis
Dennis

Reputation: 3690

Bootstrap flexbox columns next to each other instead of under each other

I am having difficulty fixing my layout using Bootstrap CSS with flexbox.

My layout should look like this:

English           <rowdata>
French            <rowdata>
Dutch             <rowdata>
                  <rowdata>
                  <rowdata>
                  <rowdata>

However, one of the row data's contains a rather large element, with a lot of checkboxes (to indicate the different date parts), and because of this width the entire right side will cause my layout to shift completely below the language "tabs". How do I solve this?

This is the JSFiddle that shows the issue: https://jsfiddle.net/751pbsu3/

And here is the same fiddle, but without the checkbox field (that screws up the layout), to show how it should look like: https://jsfiddle.net/j8e0th5g/

Upvotes: 0

Views: 181

Answers (1)

Shubham
Shubham

Reputation: 210

Here is the working example, you have to use bootstrap breakpoints.Check the class col-md-2 and col-md-10 that i have attached

This is the JSFiddle that resolved the issue: https://jsfiddle.net/mko72x6y/1/

Upvotes: 1

Related Questions