CODEWITHSUNDEEP
csstwitter-bootstrap
Hans de Jong
Hans de Jong

Reputation: 2078

How to make a div flush with the left margin when inside a Bootstrap container

I am trying to make a shader to go all the way to the left (or right) depending on my page. The problem comes with using the container.

What I want: Screenshot of web page with a large photo background with a semi-transparent block on top of it. The block starts from the very left hand edge and is a third of the web page in width.

HTML:

<div class="container">
  <div class="col-xs-5">  
    <div class="shader" style="margin-top: 500px;">
      <h3>Super cool title</h3>
      <p>
        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.
      </p>
    </div>
  </div>
</div>

And the following CSS:

.shader {
  background-color: rgb(254, 254, 254);
  background-color: rgba(254, 254, 254, 0.85);
  padding: 15px;
  border-radius: 5px;
}

The problem is, if I put it inside the container, it won't go to the side. If I put it outside the container, It won't stop after the col block.

I have tried this with a fluid container, but it still won't go all the way to the side. I also have to do a lot of trickery to align things out properly.

Upvotes: 1

Views: 1980

Answers (1)

BSMP
BSMP

Reputation: 4797

Two problems:

  1. All col divs need to be in a row div. You're missing a row div.

  2. Both types of container divs have 15px of padding. If you want content inside of it flush with the edge you need to either:

    • Remove the padding from the container class so everything in the container touches the edges or
    • Give your shader a negative margin so the other elements in the container do not to touch the edge.

Example below assumes you only want the shader to touch the edge. I also added an image placeholder as the background so you can see the shader touches the edge. You only need the change to the shader class:

body {
	background: url(http://placehold.it/1000x1000);
    background-size: cover;
}

.shader {
  background-color: rgb(254, 254, 254);
  background-color: rgba(254, 254, 254, 0.85);
  padding: 15px;
  margin-left: -15px;
  border-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<div class="container-fluid">
 <div class="row">
 
  <div class="col-xs-5">  
    <div class="shader" style="margin-top: 500px;">
      <h3>Super cool title</h3>
      <p>
        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.
      </p>
    </div>
  </div>
  <div class="col-xs-7">
  
  </div>
 </div>
</div>

Upvotes: 3

Related Questions