0

I have a question that has been surely asked 10000 times already but I don't really understand the answers. I want to make something simple : divide my screen in 3 columns, add some buttons on the 1 column, a google map in the second one and other buttons in the 3rd one.

How can I manage to do that properly?

For moment I added the buttons where I wanted, but when it comes to manage the map, I have problems usually with the size.

<div class="container">
 <div class="row">
    <div class="col-lg-4">
      <button type="button" class="btn btn-primary btn-lg">1</button>
      <button type="button" class="btn btn-default btn-lg">2</button>
    </div>

    <div class="col-lg-4">
      <div id="map-container" style="width: 500px; height: 300px;"></div>
    </div>
    <div class="col-lg-4">
      <form class>
          <b>Point A : <input type="text" class="form-control"></b>
          <b>Point B : <input type="text" class="form-control"><b>
          <button>Validate</button>
      </form> 
    </div>
  </div>

  <div class="row">
    <br></br>
  </div>

  <div class="row">
    <div class="col-lg-4"></div>
    <div class="col-lg-4">
      <button type="button" class="btn btn-success sharp">Good</button>
      <button type="button" class="btn btn-warning sharp">Normal</button>
      <button type="button" class="btn btn-danger sharp">Bad</button>
    </div>
    <div class="col-lg-4"></div>
  </div>
</div>
krakig
  • 1,515
  • 1
  • 19
  • 33

1 Answers1

1

You should set the map height style, but not the width. Also you should set:

#map-container img {
   max-width: none;
}

See this question on stackoverflow for more information.

Community
  • 1
  • 1
Nathan Wilson
  • 856
  • 5
  • 12