Twitter Bootstrap Question posted in

How to Target Twitter Bootstrap <768px and 480px Breakpoints

I was looking to understand how i can target screen sizes below 768px and specifically sizes of 480px. I am currently trying to create a page that will show 3 logos for 3 different sites and this works well but falls over when reaching below 768px.

My HTML code:

<!doctype html>
<html>
    <head>
        <title>Bootstrap Layout</title>
        <link rel="stylesheet" href="custom.css">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="darkbg col-sm-4 col-xs-12"><img src="logo1.jpg"/></div>
                <div class="darkerbg col-sm-4 col-xs-12"><img src="logo2.jpg"/></div>
                <div class="darkestbg col-sm-4 col-xs-12"><img src="logo3.jpg"/></div>
            </div>
        </div>
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    </body>
</html>

My CSS:

/* custom stylesheet */

.darkbg {
    background: #999;
    text-align:center;
}

.darkbg img, 
.darkerbg img, 
.darkestbg img {
    width:100%;
    }

.darkerbg {
    background: #666;
    text-align:center;
}

.darkestbg {
    background: #333;
    text-align:center;
}

The problem lies when I use the class “col-xs-12” as the logos look too large on the screen and this should resemble the col-sm and be spread over 4 columns as col-xs-4. This fixes this issue but when i reach the breakpoint of 480px then the logos look too small and as far as i know the lowest breakpoint is col-xs which targets the screen size of 768px so i am not sure how i am able to fix this issue.

I understand that I can use media queries, but abit confused as to what code I need to write to show each logo on top of each other when reaching the size of 480px.

If somebody could please advise, would really appreciate it.

Tags:

2

Answers


  1. 0

    Probably the simplest solution is to give the .row > .col-* divs a display: block rule for widths below 480px. That will force each of them to take a full row (one above another).

    Something like this should work: 

    @media (max-width: 480px) {
  .row .col-xs-12 {
    display: block;
  }
}

    (note: don’t know by heart, but it’s possible you might need a selector with greater specificity in order to override the default bootstrap rules)

    Useful link: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

    Login or Signup to reply.
  2. 0

    Here are 3 example Snippets. One of these may help depending on your ultimate requirements and you could always create a custom build of Bootstrap too.

    Grid Example) You could resize the images @480px etc.

    1) Without using the grid: build a simple class to change the display property @480px and resize the images however you want at whatever breakpoint, etc.

    2) Same as Example 1 but the images are set at 100% width @480px.

    See example Snippet at Full Page.

    .darkbg,
.darkbg.img-thumbnail {
  background: #999;
}
.darkerbg,
.darkerbg.img-thumbnail {
  background: #666;
}
.darkestbg,
.darkestbg.img-thumbnail {
  background: #333;
}
/**Grid**/

@media (max-width: 768px) {
  .img-block {
    text-align: center;
  }
  .img-block img {
    width: 150px;
  }
}
/**One**/

.img-block-one img {
  display: inline-block;
  width: 30%;
  padding: 5px;
  margin: 10px;
}
@media (max-width: 480px) {
  .img-block-one img {
    display: block;
    width: 50%;
    margin: 5px auto;
  }
}
/**Two**/

.img-block-two img {
  display: inline-block;
  width: 30%;
  padding: 5px;
  margin: 10px;
}
@media (max-width: 480px) {
  .img-block-two img {
    display: block;
    width: 100%;
    margin: 10px 0;
  }
}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <h2 class="text-center">Grid Example</h2>

  <div class="row img-block">
    <div class="col-sm-4 col-xs-12">
      <img src="http://placehold.it/350x350/eee/000" class="img-responsive img-thumbnail darkbg" />
    </div>
    <div class="col-sm-4 col-xs-12">
      <img src="http://placehold.it/350x350/eee/000" class="img-responsive img-thumbnail darkerbg" />
    </div>
    <div class="col-sm-4 col-xs-12">
      <img src="http://placehold.it/350x350/eee/000" class="img-responsive img-thumbnail darkestbg" />
    </div>
  </div>
</div>
<hr>
<div class="container">
  <h2 class="text-center">Example One</h2>

  <div class="img-block-one text-center">
    <img src="http://placehold.it/350x350/f00/fff" class="img-responsive darkbg" />
    <img src="http://placehold.it/350x350/f00/fff" class="img-responsive darkerbg" />
    <img src="http://placehold.it/350x350/f00/fff" class="img-responsive darkestbg" />
  </div>
</div>
<hr>
<div class="container">
  <h2 class="text-center">Example Two</h2>

  <div class="img-block-two text-center">
    <img src="http://placehold.it/350x350/ff0/000" class="img-responsive darkbg" />
    <img src="http://placehold.it/350x350/ff0/000" class="img-responsive darkerbg" />
    <img src="http://placehold.it/350x350/ff0/000" class="img-responsive darkestbg" />
  </div>
</div>
<hr>

    Heres and example of centering vertically and horizontally. I places the rules inside a media-query so they only work above 480px because it may or may not be beneficial for this sort of display on smaller devices: media query itself can be removed as it doesn’t change the anything else. These is also a width component to the new img-block-one class that can be adjusted to suit your needs.

    Hope this helps.

    .darkbg {
  background: #999;
}
.darkerbg {
  background: #666;
}
.darkestbg {
  background: #333;
}
.img-block-one img {
  display: inline-block;
  width: 30%;
  padding: 5px;
  margin: 10px;
}
@media(min-width: 481px) {
  .img-block-one {
    width: 65%;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
  }
}
@media (max-width: 480px) {
  .img-block-one img {
    display: block;
    width: 50%;
    margin: 5px auto;
  }
}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="img-block-one text-center">
    <img src="http://placehold.it/350x350/f00/fff" class="img-responsive darkbg" />
    <img src="http://placehold.it/350x350/f00/fff" class="img-responsive darkerbg" />
    <img src="http://placehold.it/350x350/f00/fff" class="img-responsive darkestbg" />
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search