How to align content inside container-fluid with a container on bootstrap 4?

Question

I'm trying to have a full width element on my website inside a contanier fluid between normal containers.

Is it possible to align always (even resizing the website) the content that is inside the container-fluid with the content inside the container?

Example what I have atm:

What I want to achieve:

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
 <body>
  <div class="container">
   <div class="row">
    <div class="col-12">
     <h1>Website title</h1>
    </div>
    <div class="col-12">
     <p>Website description</p>
    </div>
   </div>
  </div>

  <div class="container-fluid">
   <div class="row">
    <div class="col-12 p-0" style="background-color: thistle; border: 1px solid black;">
     <div id="box" style="margin: 30px; border: 1px solid black;">
      <h2>Full width content</h2>
     </div>
     
    </div>
   </div>
  </div>

  <div class="container">
   <div class="row">
    <div class="col-12">
     <p>Some more website description</p>
    </div>
   </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 </body>
</html>

score 2 · Answer 1 · answered Nov 06 '19 at 11:16

2

You can use an offset class for a column to make it on the left side, increase the offset width as far as you want. I hope so this will help you.

<div class="container-fluid">
            <div class="row">
                <div class="col-md-8 offset-md-4 p-0" style="background-color: thistle; border: 1px solid black;">
                    <div id="box" style="margin: 30px; border: 1px solid black;">
                        <h2>Full width content</h2>
                    </div>

                </div>
            </div>
        </div>

answered Nov 06 '19 at 11:16

Ashwin Bhamare

415
2
7

if I resize the website the element isn't align anymore – Cristian Nov 06 '19 at 11:24
yes it will be work you need to add responsive offset classes for same, Like if you want to align it on a small screen then use the class "offset-sm-4" likewise you need to align the classes for responsive – Ashwin Bhamare Nov 06 '19 at 11:30
Hello @Cristian, If my answer solved your issue then please accept my answer, thanks – Ashwin Bhamare Nov 07 '19 at 04:39

score 0 · Answer 2 · answered Nov 06 '19 at 12:04

Can you check with below code you have to change your html structure and put container in container fluid as @Paulie_D mentioned. Hope it will work for you.

<html>

<head>
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-12">
        <h1>Website title</h1>
      </div>
      <div class="col-12">
        <p>Website description</p>
      </div>
    </div>
  </div>

  <div class="container-fluid">
  <div class="full-width-section"  style="background-color: thistle; border: 1px solid black;">
    <div class="container">
    <div class="row">
      <div class="col-12">
        <div id="box" style="margin: 30px 0px; border: 1px solid black;">
          <h2>Full width content</h2>
        </div>
    </div>
      </div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-12">
        <p>Some more website description</p>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

</html>

score 0 · Answer 3 · answered Feb 26 '21 at 19:25

You can set the max-width CSS property element inside the .container-fluid as a .container class.

.my-container {
    border: 1px solid blue;
    max-width: 1140px;
    margin: 0 auto;
    padding: 15px;
}

Of course, then you should apply media-querys.

.container{
  border: 1px solid red;
}
.container-fluid {
  border: 1px dotted black;
}
.my-container {
  border: 1px solid blue;
  max-width: 1140px;
  margin: 0 auto;
  padding: 15px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Website Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>My First Bootstrap 4 Page</h1>
  <p>Resize this responsive page to see the effect!</p> 
</div>

<div class="container-fluid my-3">
  <div class="my-container my-4">    
    <h2>About Me</h2>
    <h5>Photo of me:</h5>
    <div class="fakeimg">Fake Image</div>
    <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
    <h3>Some Links</h3>
    <p>Lorem ipsum dolor sit ame.</p>
  </div>  
</div>

</body>
</html>

Paulie_D · Answer 4 · 2019-11-06T11:11:23.950

Add an additional .container inside your .container-fluid and that will get you most of the way.

Then adjust margins/padding as required.

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-12">
        <h1>Website title</h1>
      </div>
      <div class="col-12">
        <p>Website description</p>
      </div>
    </div>
  </div>

  <div class="container-fluid">
    <div class="container">
    <div class="row">
      <div class="col-12 p-0" style="background-color: thistle; border: 1px solid black;">
        <div id="box" style="margin: 30px; border: 1px solid black;">
          <h2>Full width content</h2>
        </div>

      </div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-12">
        <p>Some more website description</p>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

</html>

But I want the full width content be full width, if you put it inside a container it loses the full width behaviour — Cristian, Nov 06 '19 at 11:09
No, it doesn't. It's just that you need to change the bg color of the `.container-fluid` div. However if it's just a cg color issue then you could perhaps go another way - https://stackoverflow.com/questions/28565976/css-how-to-overflow-from-div-to-full-width-of-screen?lq=1 — Paulie_D, Nov 06 '19 at 11:13

How to align content inside container-fluid with a container on bootstrap 4?

4 Answers4