Geek Answers Handbook

How to Make Bootstrap "Maps" Responsive

Bootstrap recently offers features called Maps, which is cool until it reaches a 747-pixel viewport. See image below.

enter image description here

As you can see, everything will go bad, the container will not fit. Is there any CSS fix we can do to make sure they look good with 747px and below ???

Here is my HTML:

<div class="row"> <div class="col-md-3"> <div class="card"> <img class="card-img-top" src="img/card1.jpg" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">This is Card #1</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card content.</p> <a href="http://v4-alpha.getbootstrap.com/components/card/" class="btn btn-primary">Learn More</a> </div> </div> </div> <div class="col-md-3"> <div class="card card-inverse card-primary text-center"> <img class="card-img-top" src="img/card2.jpg" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">This is Card #2</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card content.</p> <a href="http://v4-alpha.getbootstrap.com/components/card/" class="btn btn-primary">Learn More</a> </div> </div> </div> <div class="col-md-3"> <div class="card card-inverse card-success text-center"> <img class="card-img-top" src="img/card3.jpg" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">This is Card #3</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card content.</p> <a href="http://v4-alpha.getbootstrap.com/components/card/" class="btn btn-primary">Learn More</a> </div> </div> </div> <div class="col-md-3"> <div class="card card-inverse card-info text-center"> <img class="card-img-top" src="img/card4.jpg" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">This is Card #4</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card content.</p> <a href="http://v4-alpha.getbootstrap.com/components/card/" class="btn btn-primary">Learn More</a> </div> </div> </div> </div>

Check out my JSFIDDLE: https://jsfiddle.net/a9wav5g1/1/

Any idea ??? How to fix it?

+8
html css twitter-bootstrap
source share
4 answers

If you are only talking about images that do not match the containing div, just add

 img{ width:100%; height:auto; }

to the images you need or , class img-responsive

Codepen http://codepen.io/noobskie/pen/WQQZVQ?editors=110

More specific

 .card-img-top{ width:100%; height:auto; }

Also for div conatiner, if you need full width, just add <div class="container-fluid">

+9
source share

Check this out for all screen sizes lg , md , sm and xs

HTML

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Bootstrap, from Twitter</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="description" content="" /> <meta name="author" content="" /> <!-- Le styles --> <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" /> <link href="style.css" rel="stylesheet" /> </head> <body> <div class="container"> <div class="row"> <div class="col-lg 3 col-md-3 col-sm-12 col-xs-12"> <div class="card"> <img class="card-img-top" src="http://www.themdfactor.com/wp-content/uploads/2015/09/card1.jpg" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">This is Card #1</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card content.</p> <a href="http://v4-alpha.getbootstrap.com/components/card/" class="btn btn-primary">Learn More</a> </div> </div> </div> <div class="col-lg 3 col-md-3 col-sm-12 col-xs-12"> <div class="card card-inverse card-primary text-center"> <img class="card-img-top" src="http://www.themdfactor.com/wp-content/uploads/2015/09/card1.jpg" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">This is Card #2</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card content.</p> <a href="http://v4-alpha.getbootstrap.com/components/card/" class="btn btn-primary">Learn More</a> </div> </div> </div> <div class="col-lg 3 col-md-3 col-sm-12 col-xs-12"> <div class="card card-inverse card-success text-center"> <img class="card-img-top" src="http://www.themdfactor.com/wp-content/uploads/2015/09/card1.jpg" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">This is Card #3</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card content.</p> <a href="http://v4-alpha.getbootstrap.com/components/card/" class="btn btn-primary">Learn More</a> </div> </div> </div> <div class="col-lg 3 col-md-3 col-sm-12 col-xs-12"> <div class="card card-inverse card-info text-center"> <img class="card-img-top" src="http://www.themdfactor.com/wp-content/uploads/2015/09/card1.jpg" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">This is Card #4</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card content.</p> <a href="http://v4-alpha.getbootstrap.com/components/card/" class="btn btn-primary">Learn More</a> </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="script.js"></script> </body> </html>

CSS

 /* Put your css in here */ /* Tutorial Name: Bootstrap 4 Tutorial Author: Samuel Dalusung */ @import 'main.css'; /* GENERAL STYLES -------------------------------------------------*/ body { font-family:'Lato', sans-serif; font-size:1em; color:#777; font-weight:300; line-height:1.7; overflow-x:hidden; } h1,h2,h3,h4,h5,h6 { color:#333; line-height:1.4; font-weight:700; } .mx-width { max-width:960px; margin:0 auto; } a,a:hover { color:#563d7c; text-decoration:none; } img { max-width:100%; } header { padding-bottom:50px; } .intro { font-family:'Lato'; font-size:60px; line-height:1; font-weight:300; color:#fff } .learn { font-family:'Lato'; font-size:27px; line-height:1.4; font-weight:300; color:#fff; } .jumbotron-fluid { padding:0; } /* PARALLAX -------------------------------------------------*/ .parallax { text-align:center; background-position:center center; background-repeat:no-repeat; background-size:cover; background-attachment:fixed!important; overflow:hidden; } .parallax-pattern-overlay { background-image:url(../img/pattern.png); background-repeat:repeat; } /* HEADING -------------------------------------------------*/ .heading { padding-bottom:15px; text-align:center; max-width:960px; margin:0 auto; padding-top:80px; } .heading h2 { font-weight:600; font-family:'Raleway'; font-size:40px; color:#333; margin:0; padding:5px; } .heading h2::first-letter { color:#563d7c; font-weight:700; } .heading h3 { font-size:1em; line-height:1.7; } #site-title { max-width:150px; } /* CONTACT -------------------------------------------------*/ input.form-control { background:#fff; border:solid 1px #ddd; color:#000; padding:15px 30px; margin-right:3%; margin-bottom:30px; outline:none; border-radius: 0; } textarea.form-control { background:#fff; color:#000; border:solid 1px #ddd; padding:15px 30px; margin-bottom:40px; outline:none; height:200px; border-radius: 0; } button.contact.submit { background:#333; font-family:'Lato',sans-serif; color:#fff; font-size:1em; font-weight:400; text-align:center; margin:0; border:none!important; border-radius:3px; padding:15px 45px; } button.contact.submit:hover { background:#563d7c; } .form-control:focus{ border-color: #563d7c; outline: 0; } .done { display:none; } /* CONTACT -------------------------------------------------*/ .footer { background:#563d7c; margin-top:120px; position:relative } .footer .container { padding:60px 0 20px; } .footer ul { margin:0 auto; margin-bottom:30px; margin-top:10px; text-align:center; list-style-type:none; padding-left:0; } .footer ul li { text-align:center; display:inline-block; background:rgba(0,0,0,0.2); color:#fff; line-height:45px; margin:0 4px; width:45px!important; height:45px!important; -webkit-border-radius:3px; border-radius:3px; } .footer ul li:hover { background:#2a2a2a; } .footer ul li:hover a { color:#fff; } .footer ul li a { color:#fff; width:42px!important; height:42px!important; } .footer ul li ai { line-height:45px; color:#fff; } .footer p { color:#fff; font-size:.9em; line-height:24px; font-weight:300; text-align:center; text-transform:uppercase; } .footer a,.footer a:hover { color:#fff; } /* MEDIA QUERIES -------------------------------------------------*/ @media screen and (max-width:768px) { input .contact .col-md-6{ width:40.5%; margin: 15px 15px 0 58px; } textarea .contact .col-md-12 { margin: 15px 15px 0 58px; } button #submit .contact .submit{ margin: 15px 15px 0 42px; } }

And if there is only a problem with the image, add this

 .card-img-top{ width:100%; height:auto; }
+1
source share

You should clarify what you need, but I think this helps:

 @media screen and (max-width:768px) { img { width:100%; } .container { max-width:100%; width: 100%; } .col-md-3{ width:100%; float:left; margin:0; } } 

 <div class="row"> <div class="col-md-3"> <div class="card card-inverse card-primary text-center"> </div> </div>

...

https://jsfiddle.net/6hpqo2u8/1/

You can also update html:

 <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12">...</div>
+1
source share

add the .img-fluid class to your image. He works.

0
source share

More articles:


All Articles