CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
HomeBrainBox
HomeBrainBox

Reputation: 59

How to make an image screen-wide with Bootstrap?

I have tried to nest the image in a jumbotron and a container but to no avail. Here's my latest effort that didn't quite work out:

<div class="row">
  <div class="full-width-div">
    <div class="col-md-12">
      <img src="http://i665.photobucket.com/albums/vv18/luckycharm_boy/Miami-Skyline-HD-Wallpapers1.jpeg_zps18p2ssu0.gif" alt=“90s Video Game Aesthetic Miami Skyline Photo”/>
    </div>
  </div>  
</div>

Upvotes: 0

Views: 945

Answers (2)

dippas
dippas

Reputation: 60563

you are missing class container to wrap it, and add img-responsive to img

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-12">
      <img class="img-responsive" src="http://i665.photobucket.com/albums/vv18/luckycharm_boy/Miami-Skyline-HD-Wallpapers1.jpeg_zps18p2ssu0.gif" alt=“90s Video Game Aesthetic Miami Skyline Photo”/>
    </div>
  </div>
</div>

UPDATE (taken from comments)

that's because your image is smaller than the container 1024px(img) VS 1170px(in md view) so either

  • use a larger image like here

    or

  • set width:100% to img and also remove class img-responsive for larger screens (media queries)

Upvotes: 1

Hadnazzar
Hadnazzar

Reputation: 1616

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

Use rows to create horizontal groups of columns.

Content should be placed within columns, and only columns may be immediate children of rows.

You can specify for screen width also. 

For larger screens you can use col-lg-12 --> (≥1200px)
For medium screens you can use col-md-12 --> Desktops (≥992px)
For small  screens you can use col-sm-12 --> (≥768px)
For extra small screens you can use col-xs-12 --> Phones (<768px)

here is the working example : https://jsfiddle.net/melih193/8wzg9qfL/2/

Upvotes: 0

Related Questions