responsive design with bootstrap

Question

I m trying to have a responsive page which has two buttons on the top and supposed to be centered. Under the buttons i added a google map which should cover the rest of the page. when i try the code bellow, the buttons are not centered and also not responsive. and somehow the map height is longer than the page so scrollbar shows up. And ideas where i m doing wrong ?

<div class="container">
            <div class="row">
                <div class="col-md-4 center-block">
                    <button >click me</button>
                    <button >click me</button>
                </div>
            </div>
            </div>

        <div class="map_container">
            <div id="googleMap" class="map_canvas"></div>
        </div>

CSS

.map_container{

    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.map_container .map_canvas{

    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

Giving `padding` a percentage uses the percentage of the parent's width, not the height. It's a quirk of `padding`. — 4castle, Apr 21 '16 at 20:11
Check JKillian answer about [Container-fluid vs .container](http://stackoverflow.com/a/22263969/1151408). Why not putting map inside container? — Yuri, Apr 21 '16 at 21:14

score 1 · Accepted Answer · edited May 23 '17 at 10:28

Two part question/answer:

The .center-block class only sets margin-right: auto; margin-left: auto; thus the browser will render the "block" centred assuming that the width is know. Works well with a <img width=" tag, but an undefined-width <div> is not of a know width, so most browsers ignore the margin:auto. There are two ways to fix this:

a. Create a innner div with a fixed width, i.e. <div style="width:200px">..buttons..</div>

b. (HTML5 proponents will wince at this, but...) The <center> tag is deprecated in HTML5 but still works in all the browsers I know of. e.g. <center>..buttons..</center> - so if it works then why not.
Harder to answer because there are several things that cause misbehaviour and I don't know (from your example) what effect you're trying to produce:

a. .map_canvas{ height:100%; width:100%; } - not sure why? Width and Height with percentages use the ancestor object metrics, so w=100% will use the full width of the viewport (expected) and h=100% will use the full height of the viewport, meaning the total combined height of the map-container and the container+buttons above it.

b. .map_container{ height:0; } - not sure why? There should never be a reason for that - either display:none or height: auto|length|initial|inherit.

c. .map_container{ position:relative; } -> .map_canvas{ position:absolute; } ??? Not sure what you're doing there? Have a look at #21022512 that has this Fiddle --- If that's it then remember to up-vote it.

PS: Try asking one question at a time - some StackExchange users may know the answer to one and not the other and then they may just not answer at all. And.., use jsfiddle.com to create a reproduction of your issue. The post a link to it in the question.

score 0 · Answer 2 · answered Apr 22 '16 at 05:22

You can achieve this purely using Bootstrap classes and little restructuring of HTML.

please check this jsfiddle.

<div class="container-fluid">
  <div class="row">
    <div class="col-md-12 text-center">
      <button class="btn btn-primary" >click me</button>
      <button class="btn btn-info" >click me</button>
    </div>
  </div>

  <div class="map_container">
    <div id="googleMap" class="map_canvas"></div>
    <script>
      function initMap() {
        var mapDiv = document.getElementById('googleMap');
        var map = new google.maps.Map(mapDiv, {
          center: {lat: 44.540, lng: -78.546},
          zoom: 8
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
        async defer></script>
  </div>

</div>

responsive design with bootstrap

2 Answers2