Bootstrap 3: create 2 blocks with their own content in the same line with bootstrap 3 container

Question

Need to get such result:

Any solution with central block width = fixed container width. Red blocks width depends on user screen size.

If it's a trouble with HTML+CSS then js variant.

I think, you need to use `display:flex` property. – vishnu Jul 27 '18 at 10:29 — vishnu, Jul 27 '18 at 10:29
https://stackoverflow.com/q/23794713/6191987 – vishnu Jul 27 '18 at 10:41 — vishnu, Jul 27 '18 at 10:41
@vishnu Thanks! trying to use the solution. – GrinderZ Jul 27 '18 at 10:57 — GrinderZ, Jul 27 '18 at 10:57

score 1 · Accepted Answer · answered Jul 27 '18 at 11:41

You can use flex for this & with calc from CSS3. However, you still need to adjust max-width based on bootstrap breakpoints of .container class.

.wrapper {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
}

.left {
  max-width: calc(calc(100% - 720px)/2);
  background-color: red;
  display: block;
}

.container {
  background-color: yellow;
}

.right {
  max-width: calc(calc(100% - 720px)/2);
  background-color: green;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="wrapper">
  <div class="left">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
  </div>
  <div class="container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
  </div>
  <div class="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
  </div>
</div>

I searched for solution only for big screens so my fiddle is: https://jsfiddle.net/GrinderZ/pd05qasn/21 — GrinderZ, Jul 27 '18 at 12:55

score 0 · Answer 2 · answered Jul 27 '18 at 10:03

as i can see red blocks are 1/2 width of blue one so it can go like this

<div class="row">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3> LEFT </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6> CENTER </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3> RIGHT </div>
</div>

Or if you want to hide red blocks on phone sizes you can put hidden-xs instead of col-xs-3 and put col-xs-12 in center div instead of col-xs-6

It all depends on your wish what will it do on small screens.

Edited question: central block width = container width; Red blocks width depends on user screen size. — GrinderZ, Jul 27 '18 at 10:06

Alcaeus D · Answer 3 · 2018-07-27T10:35:49.547

You can always do this, but it's not an orthodox method:

<div class="row text-center">
    <div class="col-lg-3">
        <p>something red here</p>
    </div>
    <div class="col-lg-6 container">
        <p>something green here</p>
    </div>
    <div class="col-lg-3">
        <p>something red here</p>
    </div>
</div>

Also nothing stops you from adding your container inside your middle col like this:

<div class="row text-center">
        <div class="col-lg-3">
            <p>something red here</p>
        </div>
        <div class="col-lg-6">
            <div class="container">
             <p>Your new row/cols can be inserted here</p>
            </div>
        </div>
        <div class="col-lg-3">
            <p>something red here</p>
        </div>
    </div>

for smaller screens you should modify your classes according to col-md-*, col-sm-* and col-xs-* . Also check the official link

EDIT: If you want to always have the middle container (i.e. 60% width) and the sidebars resized according to screen resolution you can do the following:

You can add a new class in your container so it is like this: <div class="col-lg-6 container myclass"> , then you can override the bootstrap css with your new class in your custom.css file, i.e.:

.myclass{ width: 60%!important; } Next step is to create media queries for your desirable resolutions like this:

@media (max-width: 1024px){ .myclass{ width: 60%!important; }

@media (max-width: 768px){ .myclass{ width: 60%!important; }

And so on... Check about media queries here , but you can find more on the web

In such variant central div width=50% and red blocks width=25% (styles from bootstrap css for col-lg-*). But I need fixed width container in the center. — GrinderZ, Jul 27 '18 at 10:24
So you want for example your sidebars to be resized but maintain your container to same width always ? — Alcaeus D, Jul 27 '18 at 10:25

Bootstrap 3: create 2 blocks with their own content in the same line with bootstrap 3 container

3 Answers3