Bootstrap 3 Full Width Image and Div in Container

bootstrap 3 full width image and div in container

As suggested above, you can create a helper class

.padding-0 {
    padding: 0;
}

and apply it to any HTML elements for which you need a padding reset. So in your case, it would look like this:

<div class="row">
    <div class="col-md-12 padding-0">
        <img src="http://placehold.it/350x150" />
    </div>    
</div> 

For the second problem, set height of .gray class to auto :

@media () {
    .gray {
        height: auto;
    }
}

Note: You could also remove line-height: 80px, it's optional :)

http://jsfiddle.net/rq9ycjcx/8/

How to make my image full width with bootstrap 3

Without a verifiable example I'm going to guess it's because your image isn't large enough to expand into it's container at larger viewport sizes.

Your typical responsive image class looks like this:

.img-responsive {
  display: block;
  height: auto;
  max-width: 100%;
}

The max-width property is what's limiting your image from expanding after a certain point. When set to 100% the max width the image will be what ever it's natural width is. If you have a 400px wide image, the image will expand/shrink when its container element is 400px or less. If the container is more than 400px it stops expanding.

The reason max-width: 100%; is used is to help keep your imagery sharp. You can use width: 100%; in place of max-width but your images will become blurry and pixelate once stretched beyond their native resolution.

Below is and example of what I believe you are experiencing. Below this example is another using width: 100%;.

.container {  width: 80%;  margin-left: auto;  margin-right: auto;}img {  display: block;  height: auto;  max-width: 100%;}

<div class="container">  <img src="http://placehold.it/600x200/"></div>
<div class="container">  <img src="http://placehold.it/1200x200/ff0"></div>

Bootstrap 3 full width div's in container-fluid

You could try just replacing the 100% with auto

like this:

.band {
  width: auto !important;
  background-color: #D7EAD8;
  color: #323F3F;
}

How to fit an image inside a Bootstrap 3 div?

Just add you images width to 100%.

But as you are saying user will upload various kind of images, so can use object-fit property.

Add the CSS like this:

.fit-image{
width: 100%;
object-fit: cover;
height: 300px; /* only if you want fixed height */
}

<div class="col-sm-6 col-md-6 col-lg-4">
<img src="images/dummy_image.png" class="img-responsive fit-image">
</div>

You will find the details about object-fit and object-position here : https://css-tricks.com/on-object-fit-and-object-position/

Full-width background image in Bootstrap 3

This is caused by the standard behavior of cover. If you resize your desktop browser to a portrait like size, you'll see what I mean.

One option would be to use a media query, so when page is viewed in portrait mode, it will look somewhat better.

body,html {  height: 100%;}body {  padding-top: 50px;}.full {  padding: 0 !important;  margin: 0 auto !important;  background-size: cover;  overflow: hidden;}.wide {  width: 100%;  height: auto;}
.logo {  color: #fff;  font-weight: 800;  font-size: 14pt;  padding: 25px;  text-align: center;}.line {  padding-top: 20px;  white-space: no-wrap;  overflow: hidden;  text-align: center;}@media (orientation: portrait) {  .full {    background-size: 200% auto;    background-position: top right;  }}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /><div class="navbar navbar-inverse navbar-fixed-top">  <div class="container">    <div class="navbar-header">      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">        <span class="icon-bar"></span>        <span class="icon-bar"></span>        <span class="icon-bar"></span>      </button>      <a class="navbar-brand" href="#">Brand</a>    </div>    <div class="collapse navbar-collapse">      <ul class="nav navbar-nav">        <li class="active"><a href="#">Home</a>        </li>        <li><a href="#about">About</a>        </li>      </ul>      <ul class="nav navbar-nav navbar-right">        <li><a href="#">Username</a>        </li>      </ul>    </div>    <!--/.nav-collapse -->  </div></div>
<div class="full" style="background-image:url('https://c.stocksy.com/a/RcN300/z0/805779.jpg');">  <div class="container">    <div class="row clearfix">      <div style="padding: 0 0 400px 0;">        <div class="col-xs-5 line">          <hr>        </div>        <div class="col-xs-2 logo text-center">Logo</div>        <div class="col-xs-5 line">          <hr>        </div>      </div>    </div>  </div></div>
<div class="container">  <div class="text-center">    <h1>Content</h1>  </div></div><!-- /.container -->

Stretch image to fit full container width bootstrap

Check if this solves the problem:

<div class="container-fluid no-padding">
  <div class="row">
    <div class="col-md-12">
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1300%C3%97400&w=1300&h=400" alt="placeholder 960" class="img-responsive" />
    </div>
  </div>
</div>

CSS

.no-padding {
  padding-left: 0;
  padding-right: 0;
}

Css class no-padding will override default bootstrap container padding.

Full example here.

---

@Update
If you use bootstrap 4 it could be done even simpler

<div class="container-fluid px-0">
  <div class="row">
    <div class="col-md-12">
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1300%C3%97400&w=1300&h=400" alt="placeholder 960" class="img-responsive" />
    </div>
   </div>
</div>

Updated example here.

---

Related Topics