0

Hi i use a bootstrap grid and I have a problem - first section has content in container but second section is in container fluid (right column is a img, but left is just a text). I want that left column in second section will bee on the same vertical line as others which are in container.

Example code:

.second{
margin: 30px 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<section>
    <div class="container">
      <div class="row">
        <div class="col-md-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit animi eius, unde quidem expedita, esse saepe modi reiciendis sunt at provident vero, consequatur fugiat ipsa harum cum tenetur eligendi dolore.</div>
        <div class="col-md-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit animi eius, unde quidem expedita, esse saepe modi reiciendis sunt at provident vero, consequatur fugiat ipsa harum cum tenetur eligendi dolore.</div>
      </div>
    </div>
</section>


<section class="second">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed aut laborum obcaecati tempore aperiam doloribus praesentium ratione aliquid sapiente reiciendis ea in iste dolor perspiciatis quasi, architecto repudiandae. Nostrum, autem.
      </div>
      <div class="col-md-6">
        <img src="https://placeimg.com/640/480/any">
      </div>
    </div>
  </div>
</section>

enter image description here

Dawid Kwiatoń
  • 157
  • 2
  • 13
  • Why don't you just move the left column from the second container into the first container?? I think you need to clarify the question quite a bit. – WebDevBooster Feb 20 '18 at 16:24
  • it has to be in the same row as img but text in second section should be in the same vertical line as text from first section (padding doesn't work - this solution is not responsive) – Dawid Kwiatoń Feb 20 '18 at 16:33
  • Again, this doesn't make any sense whatsoever. There's no need for it to be in the same row as the image if it needs to be "on the same vertical line as the text from the first section". Absolutely no reason whatsoever. – WebDevBooster Feb 20 '18 at 16:37
  • @DawidKwiatoń what's not clear is why don't you just use `container` again in the second section? What's the point of using `container-fluid` at all? – Carol Skelly Feb 20 '18 at 16:46
  • the point is that the img in the second section must be without container – Dawid Kwiatoń Feb 20 '18 at 16:58

0 Answers0