Using Leaflet inside Bootstrap container?Sizing Leaflet Map inside bootstrapBootstrap and Leaflet - Grid IssueBootstrap navbar and leaflet zoom controlsLeaflet Opacity Control Using Slider For BootstrapLeaflet map loads incorrectly when inside a Bootstrap .collapse elementPlacing controls outside map container with Leaflet?MarkerCluster don't work with geojson layer in leafletRemove routing-container of leaflet-routingUsing ArcGIS JavaScript API feature table using bootstrap wrappersleaflet search control not showing up in geodjango app

Calculate the frequency of characters in a string

Deletion of copy-ctor & copy-assignment - public, private or protected?

Should I be concerned about student access to a test bank?

If "dar" means "to give", what does "daros" mean?

How do hiring committees for research positions view getting "scooped"?

Violin - Can double stops be played when the strings are not next to each other?

How to define limit operations in general topological spaces? Are nets able to do this?

What should I install to correct "ld: cannot find -lgbm and -linput" so that I can compile a Rust program?

How are passwords stolen from companies if they only store hashes?

Hausdorff dimension of the boundary of fibres of Lipschitz maps

How to generate binary array whose elements with values 1 are randomly drawn

Why are there no stars visible in cislunar space?

What does Deadpool mean by "left the house in that shirt"?

Synchronized implementation of a bank account in Java

Worshiping one God at a time?

Using Past-Perfect interchangeably with the Past Continuous

Is it insecure to send a password in a `curl` command?

Is there a hypothetical scenario that would make Earth uninhabitable for humans, but not for (the majority of) other animals?

Is honey really a supersaturated solution? Does heating to un-crystalize redissolve it or melt it?

Help rendering a complicated sum/product formula

Does .bashrc contain syntax errors?

How is the partial sum of a geometric sequence calculated?

Geography in 3D perspective

What is the significance behind "40 days" that often appears in the Bible?



Using Leaflet inside Bootstrap container?


Sizing Leaflet Map inside bootstrapBootstrap and Leaflet - Grid IssueBootstrap navbar and leaflet zoom controlsLeaflet Opacity Control Using Slider For BootstrapLeaflet map loads incorrectly when inside a Bootstrap .collapse elementPlacing controls outside map container with Leaflet?MarkerCluster don't work with geojson layer in leafletRemove routing-container of leaflet-routingUsing ArcGIS JavaScript API feature table using bootstrap wrappersleaflet search control not showing up in geodjango app













1















I have problem rendering leaflet map in a webpage using bootstrap. I have two columns col-4, col-8 in a bootstrap container. the col-4 has some text and col-8 has to render the leaflet map. But the map overlaps all other containers. I am not getting the styling right. Below is the html, css and js code.



HTML:



<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Version</title>
<meta charset="utf-8">
<meta name"viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css">


<script type="text/javascript" src="js/uikit.js"></script>
<script type="text/javascript" src="js/leaflet.js"></script>


</head>
<body>




<nav class ="navbar navbar-default navbar-fixed-top" role ="navigation">
<a class="navbar-brand" href="#"><img id ="logo" src="image/bootstrap.png">Bootstrap</a>


<div class ="container-fluid">
<div class ="navbar-header">
<button type="button" class ="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-main">
<span class="sr-only">Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>



</div>

<div class ="collapse navbar-collapse" id ="navbar-collapse-main">
<ul class ="nav navbar-nav navbar-right">
<li><a class="active" href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>

</ul>

</div>

</div>
</nav>



<div class="padding" id ="map-container">
<div class="container">
<div class ="row">
<div class="col-md-4">
<p>Lorem ipsum dolor sit amet, qui ea delenit qualisque, ne duo tollit dolore hendrerit. Exerci postulant eos at, has causae electram id. Legimus contentiones eum te, eos eligendi vituperata ad, no ferri offendit referrentur vis. Homero virtute habemus ad sed, nec ferri viris in. Te labore adolescens ius, his consulatu eloquentiam ea, mea nulla appareat dignissim an. Ei his magna expetenda, nihil copiosae quo ut, percipit insolens mea an.
</p>


</div>

<div class ="col-md-8">

<!--p>Lorem ipsum dolor sit amet, qui ea delenit qualisque, ne duo tollit dolore hendrerit. Exerci postulant eos at, has causae electram id. Legimus contentiones eum te, eos eligendi vituperata ad, no ferri offendit referrentur vis. Homero virtute habemus ad sed, nec ferri viris in. Te labore adolescens ius, his consulatu eloquentiam ea, mea nulla appareat dignissim an. Ei his magna expetenda, nihil copiosae quo ut, percipit insolens mea an.
</p-->
<div id="map"></div>

</div>

</div>

</div>
</div>

</div>
</body>
<script type="text/javascript" src="js/main.js"></script>
</html>


CSS:



html, body
height:100%;
width:100%;


.navbar
background-color:#FFFFFF;
padding:1% 0;
font-size:12px;



.navbar-brand
min-height:60px;
padding:0 20px 5px;
font-size: 16px



#logo
height:55px;
width:55px;
margin: 10px 20px 10px 20px;
display:inline-block;



.navbar-default .navbar-nav li a
color:#707b7c;


#navbar-collapse-main
margin-right: 30px


#map-container

padding-top:120px;
padding-left:10px;




#map
position: absolute;
margin:0;
padding:0;
border: 1px solid black;
border-radius: 8px;



JS:



console.log("Document ready!");

// initialize the map on the "map" div with a given center and zoom
var map = L.map('map',
center: [50.99, 10.191],
zoom: 6,
minZoom:6,
maxBounds:[[55.3915921070334,20.610351562500004],[47.17477833929906,1.7138671875000002]]
);



var basemap = L.tileLayer("https://s.basemaps.cartocdn.com/light_all/z/x/yr.png");
basemap.addTo(map);









share|improve this question




























    1















    I have problem rendering leaflet map in a webpage using bootstrap. I have two columns col-4, col-8 in a bootstrap container. the col-4 has some text and col-8 has to render the leaflet map. But the map overlaps all other containers. I am not getting the styling right. Below is the html, css and js code.



    HTML:



    <!DOCTYPE html>
    <html>
    <head>
    <title>Bootstrap Version</title>
    <meta charset="utf-8">
    <meta name"viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/style.css">


    <script type="text/javascript" src="js/uikit.js"></script>
    <script type="text/javascript" src="js/leaflet.js"></script>


    </head>
    <body>




    <nav class ="navbar navbar-default navbar-fixed-top" role ="navigation">
    <a class="navbar-brand" href="#"><img id ="logo" src="image/bootstrap.png">Bootstrap</a>


    <div class ="container-fluid">
    <div class ="navbar-header">
    <button type="button" class ="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-main">
    <span class="sr-only">Navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>



    </div>

    <div class ="collapse navbar-collapse" id ="navbar-collapse-main">
    <ul class ="nav navbar-nav navbar-right">
    <li><a class="active" href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>

    </ul>

    </div>

    </div>
    </nav>



    <div class="padding" id ="map-container">
    <div class="container">
    <div class ="row">
    <div class="col-md-4">
    <p>Lorem ipsum dolor sit amet, qui ea delenit qualisque, ne duo tollit dolore hendrerit. Exerci postulant eos at, has causae electram id. Legimus contentiones eum te, eos eligendi vituperata ad, no ferri offendit referrentur vis. Homero virtute habemus ad sed, nec ferri viris in. Te labore adolescens ius, his consulatu eloquentiam ea, mea nulla appareat dignissim an. Ei his magna expetenda, nihil copiosae quo ut, percipit insolens mea an.
    </p>


    </div>

    <div class ="col-md-8">

    <!--p>Lorem ipsum dolor sit amet, qui ea delenit qualisque, ne duo tollit dolore hendrerit. Exerci postulant eos at, has causae electram id. Legimus contentiones eum te, eos eligendi vituperata ad, no ferri offendit referrentur vis. Homero virtute habemus ad sed, nec ferri viris in. Te labore adolescens ius, his consulatu eloquentiam ea, mea nulla appareat dignissim an. Ei his magna expetenda, nihil copiosae quo ut, percipit insolens mea an.
    </p-->
    <div id="map"></div>

    </div>

    </div>

    </div>
    </div>

    </div>
    </body>
    <script type="text/javascript" src="js/main.js"></script>
    </html>


    CSS:



    html, body
    height:100%;
    width:100%;


    .navbar
    background-color:#FFFFFF;
    padding:1% 0;
    font-size:12px;



    .navbar-brand
    min-height:60px;
    padding:0 20px 5px;
    font-size: 16px



    #logo
    height:55px;
    width:55px;
    margin: 10px 20px 10px 20px;
    display:inline-block;



    .navbar-default .navbar-nav li a
    color:#707b7c;


    #navbar-collapse-main
    margin-right: 30px


    #map-container

    padding-top:120px;
    padding-left:10px;




    #map
    position: absolute;
    margin:0;
    padding:0;
    border: 1px solid black;
    border-radius: 8px;



    JS:



    console.log("Document ready!");

    // initialize the map on the "map" div with a given center and zoom
    var map = L.map('map',
    center: [50.99, 10.191],
    zoom: 6,
    minZoom:6,
    maxBounds:[[55.3915921070334,20.610351562500004],[47.17477833929906,1.7138671875000002]]
    );



    var basemap = L.tileLayer("https://s.basemaps.cartocdn.com/light_all/z/x/yr.png");
    basemap.addTo(map);









    share|improve this question


























      1












      1








      1








      I have problem rendering leaflet map in a webpage using bootstrap. I have two columns col-4, col-8 in a bootstrap container. the col-4 has some text and col-8 has to render the leaflet map. But the map overlaps all other containers. I am not getting the styling right. Below is the html, css and js code.



      HTML:



      <!DOCTYPE html>
      <html>
      <head>
      <title>Bootstrap Version</title>
      <meta charset="utf-8">
      <meta name"viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <link rel="stylesheet" href="css/style.css">


      <script type="text/javascript" src="js/uikit.js"></script>
      <script type="text/javascript" src="js/leaflet.js"></script>


      </head>
      <body>




      <nav class ="navbar navbar-default navbar-fixed-top" role ="navigation">
      <a class="navbar-brand" href="#"><img id ="logo" src="image/bootstrap.png">Bootstrap</a>


      <div class ="container-fluid">
      <div class ="navbar-header">
      <button type="button" class ="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-main">
      <span class="sr-only">Navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </button>



      </div>

      <div class ="collapse navbar-collapse" id ="navbar-collapse-main">
      <ul class ="nav navbar-nav navbar-right">
      <li><a class="active" href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>

      </ul>

      </div>

      </div>
      </nav>



      <div class="padding" id ="map-container">
      <div class="container">
      <div class ="row">
      <div class="col-md-4">
      <p>Lorem ipsum dolor sit amet, qui ea delenit qualisque, ne duo tollit dolore hendrerit. Exerci postulant eos at, has causae electram id. Legimus contentiones eum te, eos eligendi vituperata ad, no ferri offendit referrentur vis. Homero virtute habemus ad sed, nec ferri viris in. Te labore adolescens ius, his consulatu eloquentiam ea, mea nulla appareat dignissim an. Ei his magna expetenda, nihil copiosae quo ut, percipit insolens mea an.
      </p>


      </div>

      <div class ="col-md-8">

      <!--p>Lorem ipsum dolor sit amet, qui ea delenit qualisque, ne duo tollit dolore hendrerit. Exerci postulant eos at, has causae electram id. Legimus contentiones eum te, eos eligendi vituperata ad, no ferri offendit referrentur vis. Homero virtute habemus ad sed, nec ferri viris in. Te labore adolescens ius, his consulatu eloquentiam ea, mea nulla appareat dignissim an. Ei his magna expetenda, nihil copiosae quo ut, percipit insolens mea an.
      </p-->
      <div id="map"></div>

      </div>

      </div>

      </div>
      </div>

      </div>
      </body>
      <script type="text/javascript" src="js/main.js"></script>
      </html>


      CSS:



      html, body
      height:100%;
      width:100%;


      .navbar
      background-color:#FFFFFF;
      padding:1% 0;
      font-size:12px;



      .navbar-brand
      min-height:60px;
      padding:0 20px 5px;
      font-size: 16px



      #logo
      height:55px;
      width:55px;
      margin: 10px 20px 10px 20px;
      display:inline-block;



      .navbar-default .navbar-nav li a
      color:#707b7c;


      #navbar-collapse-main
      margin-right: 30px


      #map-container

      padding-top:120px;
      padding-left:10px;




      #map
      position: absolute;
      margin:0;
      padding:0;
      border: 1px solid black;
      border-radius: 8px;



      JS:



      console.log("Document ready!");

      // initialize the map on the "map" div with a given center and zoom
      var map = L.map('map',
      center: [50.99, 10.191],
      zoom: 6,
      minZoom:6,
      maxBounds:[[55.3915921070334,20.610351562500004],[47.17477833929906,1.7138671875000002]]
      );



      var basemap = L.tileLayer("https://s.basemaps.cartocdn.com/light_all/z/x/yr.png");
      basemap.addTo(map);









      share|improve this question
















      I have problem rendering leaflet map in a webpage using bootstrap. I have two columns col-4, col-8 in a bootstrap container. the col-4 has some text and col-8 has to render the leaflet map. But the map overlaps all other containers. I am not getting the styling right. Below is the html, css and js code.



      HTML:



      <!DOCTYPE html>
      <html>
      <head>
      <title>Bootstrap Version</title>
      <meta charset="utf-8">
      <meta name"viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <link rel="stylesheet" href="css/style.css">


      <script type="text/javascript" src="js/uikit.js"></script>
      <script type="text/javascript" src="js/leaflet.js"></script>


      </head>
      <body>




      <nav class ="navbar navbar-default navbar-fixed-top" role ="navigation">
      <a class="navbar-brand" href="#"><img id ="logo" src="image/bootstrap.png">Bootstrap</a>


      <div class ="container-fluid">
      <div class ="navbar-header">
      <button type="button" class ="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-main">
      <span class="sr-only">Navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </button>



      </div>

      <div class ="collapse navbar-collapse" id ="navbar-collapse-main">
      <ul class ="nav navbar-nav navbar-right">
      <li><a class="active" href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>

      </ul>

      </div>

      </div>
      </nav>



      <div class="padding" id ="map-container">
      <div class="container">
      <div class ="row">
      <div class="col-md-4">
      <p>Lorem ipsum dolor sit amet, qui ea delenit qualisque, ne duo tollit dolore hendrerit. Exerci postulant eos at, has causae electram id. Legimus contentiones eum te, eos eligendi vituperata ad, no ferri offendit referrentur vis. Homero virtute habemus ad sed, nec ferri viris in. Te labore adolescens ius, his consulatu eloquentiam ea, mea nulla appareat dignissim an. Ei his magna expetenda, nihil copiosae quo ut, percipit insolens mea an.
      </p>


      </div>

      <div class ="col-md-8">

      <!--p>Lorem ipsum dolor sit amet, qui ea delenit qualisque, ne duo tollit dolore hendrerit. Exerci postulant eos at, has causae electram id. Legimus contentiones eum te, eos eligendi vituperata ad, no ferri offendit referrentur vis. Homero virtute habemus ad sed, nec ferri viris in. Te labore adolescens ius, his consulatu eloquentiam ea, mea nulla appareat dignissim an. Ei his magna expetenda, nihil copiosae quo ut, percipit insolens mea an.
      </p-->
      <div id="map"></div>

      </div>

      </div>

      </div>
      </div>

      </div>
      </body>
      <script type="text/javascript" src="js/main.js"></script>
      </html>


      CSS:



      html, body
      height:100%;
      width:100%;


      .navbar
      background-color:#FFFFFF;
      padding:1% 0;
      font-size:12px;



      .navbar-brand
      min-height:60px;
      padding:0 20px 5px;
      font-size: 16px



      #logo
      height:55px;
      width:55px;
      margin: 10px 20px 10px 20px;
      display:inline-block;



      .navbar-default .navbar-nav li a
      color:#707b7c;


      #navbar-collapse-main
      margin-right: 30px


      #map-container

      padding-top:120px;
      padding-left:10px;




      #map
      position: absolute;
      margin:0;
      padding:0;
      border: 1px solid black;
      border-radius: 8px;



      JS:



      console.log("Document ready!");

      // initialize the map on the "map" div with a given center and zoom
      var map = L.map('map',
      center: [50.99, 10.191],
      zoom: 6,
      minZoom:6,
      maxBounds:[[55.3915921070334,20.610351562500004],[47.17477833929906,1.7138671875000002]]
      );



      var basemap = L.tileLayer("https://s.basemaps.cartocdn.com/light_all/z/x/yr.png");
      basemap.addTo(map);






      leaflet bootstrapping






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited 16 hours ago









      PolyGeo

      53.7k1781244




      53.7k1781244










      asked 16 hours ago









      JioJio

      316215




      316215




















          2 Answers
          2






          active

          oldest

          votes


















          2














          Your map is missing a width and height. It's also specified as position:absolute, which will get it outside the flow of its container (the .col-md-8).



          The critical bit of HTML is:



           <div class="row">
          <div class="col-md-4" style='border: 1px solid red'>
          <p>Lorem ipsum dolor sit amet</p>
          </div>

          <div class="col-md-8" style='border: 1px solid red '>
          <div id="map"></div>
          </div>
          </div>


          And the critical bit of CSS is:



          #map 
          position: relative;
          border: 1px solid black;
          border-radius: 8px;
          height: 400px; /* or as desired */
          width: 100%; /* This means "100% of the width of its container", the .col-md-8 */



          See an adapted example at this plunkr.



          (This is besides your example code missing the Leaflet CSS, as noted by TomazicM)






          share|improve this answer






























            2














            You are missing leaflet.css style link. Since you are using local Leaflet, I suppose it should be:



            <link rel="stylesheet" href="css/leaflet.css">


            You have also to specify map width and height. Width can be 100%, height has to be specific value in this case.



            #map 
            width: 100%;
            height: 400px;
            position: absolute;
            margin:0;
            padding:0;
            border: 1px solid black;
            border-radius: 8px;






            share|improve this answer

























            • yes I comment out the link to leafelt.css because with it i do not see the map at all

              – Jio
              15 hours ago












            • You cannot do without leaflet.css. I discovered one other thing. You have to declare height and width of map div. Width can be 100%, height has to be specific value in this case. I modified my answer.

              – TomazicM
              12 hours ago












            • Only now I discovered that IvanSanchez already discovered and answered this. I probably saw it at about the same time, but I'm watching Tirreno-Adriatico cycling on may PC at the same time and so was late in publishing the answer :-).

              – TomazicM
              11 hours ago










            Your Answer








            StackExchange.ready(function()
            var channelOptions =
            tags: "".split(" "),
            id: "79"
            ;
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function()
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled)
            StackExchange.using("snippets", function()
            createEditor();
            );

            else
            createEditor();

            );

            function createEditor()
            StackExchange.prepareEditor(
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: false,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: null,
            bindNavPrevention: true,
            postfix: "",
            imageUploader:
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            ,
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            );



            );













            draft saved

            draft discarded


















            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgis.stackexchange.com%2fquestions%2f315754%2fusing-leaflet-inside-bootstrap-container%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown

























            2 Answers
            2






            active

            oldest

            votes








            2 Answers
            2






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            2














            Your map is missing a width and height. It's also specified as position:absolute, which will get it outside the flow of its container (the .col-md-8).



            The critical bit of HTML is:



             <div class="row">
            <div class="col-md-4" style='border: 1px solid red'>
            <p>Lorem ipsum dolor sit amet</p>
            </div>

            <div class="col-md-8" style='border: 1px solid red '>
            <div id="map"></div>
            </div>
            </div>


            And the critical bit of CSS is:



            #map 
            position: relative;
            border: 1px solid black;
            border-radius: 8px;
            height: 400px; /* or as desired */
            width: 100%; /* This means "100% of the width of its container", the .col-md-8 */



            See an adapted example at this plunkr.



            (This is besides your example code missing the Leaflet CSS, as noted by TomazicM)






            share|improve this answer



























              2














              Your map is missing a width and height. It's also specified as position:absolute, which will get it outside the flow of its container (the .col-md-8).



              The critical bit of HTML is:



               <div class="row">
              <div class="col-md-4" style='border: 1px solid red'>
              <p>Lorem ipsum dolor sit amet</p>
              </div>

              <div class="col-md-8" style='border: 1px solid red '>
              <div id="map"></div>
              </div>
              </div>


              And the critical bit of CSS is:



              #map 
              position: relative;
              border: 1px solid black;
              border-radius: 8px;
              height: 400px; /* or as desired */
              width: 100%; /* This means "100% of the width of its container", the .col-md-8 */



              See an adapted example at this plunkr.



              (This is besides your example code missing the Leaflet CSS, as noted by TomazicM)






              share|improve this answer

























                2












                2








                2







                Your map is missing a width and height. It's also specified as position:absolute, which will get it outside the flow of its container (the .col-md-8).



                The critical bit of HTML is:



                 <div class="row">
                <div class="col-md-4" style='border: 1px solid red'>
                <p>Lorem ipsum dolor sit amet</p>
                </div>

                <div class="col-md-8" style='border: 1px solid red '>
                <div id="map"></div>
                </div>
                </div>


                And the critical bit of CSS is:



                #map 
                position: relative;
                border: 1px solid black;
                border-radius: 8px;
                height: 400px; /* or as desired */
                width: 100%; /* This means "100% of the width of its container", the .col-md-8 */



                See an adapted example at this plunkr.



                (This is besides your example code missing the Leaflet CSS, as noted by TomazicM)






                share|improve this answer













                Your map is missing a width and height. It's also specified as position:absolute, which will get it outside the flow of its container (the .col-md-8).



                The critical bit of HTML is:



                 <div class="row">
                <div class="col-md-4" style='border: 1px solid red'>
                <p>Lorem ipsum dolor sit amet</p>
                </div>

                <div class="col-md-8" style='border: 1px solid red '>
                <div id="map"></div>
                </div>
                </div>


                And the critical bit of CSS is:



                #map 
                position: relative;
                border: 1px solid black;
                border-radius: 8px;
                height: 400px; /* or as desired */
                width: 100%; /* This means "100% of the width of its container", the .col-md-8 */



                See an adapted example at this plunkr.



                (This is besides your example code missing the Leaflet CSS, as noted by TomazicM)







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered 12 hours ago









                IvanSanchezIvanSanchez

                6,1081619




                6,1081619























                    2














                    You are missing leaflet.css style link. Since you are using local Leaflet, I suppose it should be:



                    <link rel="stylesheet" href="css/leaflet.css">


                    You have also to specify map width and height. Width can be 100%, height has to be specific value in this case.



                    #map 
                    width: 100%;
                    height: 400px;
                    position: absolute;
                    margin:0;
                    padding:0;
                    border: 1px solid black;
                    border-radius: 8px;






                    share|improve this answer

























                    • yes I comment out the link to leafelt.css because with it i do not see the map at all

                      – Jio
                      15 hours ago












                    • You cannot do without leaflet.css. I discovered one other thing. You have to declare height and width of map div. Width can be 100%, height has to be specific value in this case. I modified my answer.

                      – TomazicM
                      12 hours ago












                    • Only now I discovered that IvanSanchez already discovered and answered this. I probably saw it at about the same time, but I'm watching Tirreno-Adriatico cycling on may PC at the same time and so was late in publishing the answer :-).

                      – TomazicM
                      11 hours ago















                    2














                    You are missing leaflet.css style link. Since you are using local Leaflet, I suppose it should be:



                    <link rel="stylesheet" href="css/leaflet.css">


                    You have also to specify map width and height. Width can be 100%, height has to be specific value in this case.



                    #map 
                    width: 100%;
                    height: 400px;
                    position: absolute;
                    margin:0;
                    padding:0;
                    border: 1px solid black;
                    border-radius: 8px;






                    share|improve this answer

























                    • yes I comment out the link to leafelt.css because with it i do not see the map at all

                      – Jio
                      15 hours ago












                    • You cannot do without leaflet.css. I discovered one other thing. You have to declare height and width of map div. Width can be 100%, height has to be specific value in this case. I modified my answer.

                      – TomazicM
                      12 hours ago












                    • Only now I discovered that IvanSanchez already discovered and answered this. I probably saw it at about the same time, but I'm watching Tirreno-Adriatico cycling on may PC at the same time and so was late in publishing the answer :-).

                      – TomazicM
                      11 hours ago













                    2












                    2








                    2







                    You are missing leaflet.css style link. Since you are using local Leaflet, I suppose it should be:



                    <link rel="stylesheet" href="css/leaflet.css">


                    You have also to specify map width and height. Width can be 100%, height has to be specific value in this case.



                    #map 
                    width: 100%;
                    height: 400px;
                    position: absolute;
                    margin:0;
                    padding:0;
                    border: 1px solid black;
                    border-radius: 8px;






                    share|improve this answer















                    You are missing leaflet.css style link. Since you are using local Leaflet, I suppose it should be:



                    <link rel="stylesheet" href="css/leaflet.css">


                    You have also to specify map width and height. Width can be 100%, height has to be specific value in this case.



                    #map 
                    width: 100%;
                    height: 400px;
                    position: absolute;
                    margin:0;
                    padding:0;
                    border: 1px solid black;
                    border-radius: 8px;







                    share|improve this answer














                    share|improve this answer



                    share|improve this answer








                    edited 12 hours ago

























                    answered 15 hours ago









                    TomazicMTomazicM

                    1,3041216




                    1,3041216












                    • yes I comment out the link to leafelt.css because with it i do not see the map at all

                      – Jio
                      15 hours ago












                    • You cannot do without leaflet.css. I discovered one other thing. You have to declare height and width of map div. Width can be 100%, height has to be specific value in this case. I modified my answer.

                      – TomazicM
                      12 hours ago












                    • Only now I discovered that IvanSanchez already discovered and answered this. I probably saw it at about the same time, but I'm watching Tirreno-Adriatico cycling on may PC at the same time and so was late in publishing the answer :-).

                      – TomazicM
                      11 hours ago

















                    • yes I comment out the link to leafelt.css because with it i do not see the map at all

                      – Jio
                      15 hours ago












                    • You cannot do without leaflet.css. I discovered one other thing. You have to declare height and width of map div. Width can be 100%, height has to be specific value in this case. I modified my answer.

                      – TomazicM
                      12 hours ago












                    • Only now I discovered that IvanSanchez already discovered and answered this. I probably saw it at about the same time, but I'm watching Tirreno-Adriatico cycling on may PC at the same time and so was late in publishing the answer :-).

                      – TomazicM
                      11 hours ago
















                    yes I comment out the link to leafelt.css because with it i do not see the map at all

                    – Jio
                    15 hours ago






                    yes I comment out the link to leafelt.css because with it i do not see the map at all

                    – Jio
                    15 hours ago














                    You cannot do without leaflet.css. I discovered one other thing. You have to declare height and width of map div. Width can be 100%, height has to be specific value in this case. I modified my answer.

                    – TomazicM
                    12 hours ago






                    You cannot do without leaflet.css. I discovered one other thing. You have to declare height and width of map div. Width can be 100%, height has to be specific value in this case. I modified my answer.

                    – TomazicM
                    12 hours ago














                    Only now I discovered that IvanSanchez already discovered and answered this. I probably saw it at about the same time, but I'm watching Tirreno-Adriatico cycling on may PC at the same time and so was late in publishing the answer :-).

                    – TomazicM
                    11 hours ago





                    Only now I discovered that IvanSanchez already discovered and answered this. I probably saw it at about the same time, but I'm watching Tirreno-Adriatico cycling on may PC at the same time and so was late in publishing the answer :-).

                    – TomazicM
                    11 hours ago

















                    draft saved

                    draft discarded
















































                    Thanks for contributing an answer to Geographic Information Systems Stack Exchange!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid


                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.

                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function ()
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgis.stackexchange.com%2fquestions%2f315754%2fusing-leaflet-inside-bootstrap-container%23new-answer', 'question_page');

                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    Францішак Багушэвіч Змест Сям'я | Біяграфія | Творчасць | Мова Багушэвіча | Ацэнкі дзейнасці | Цікавыя факты | Спадчына | Выбраная бібліяграфія | Ушанаванне памяці | У філатэліі | Зноскі | Літаратура | Спасылкі | НавігацыяЛяхоўскі У. Рупіўся дзеля Бога і людзей: Жыццёвы шлях Лявона Вітан-Дубейкаўскага // Вольскі і Памідораў з песняй пра немца Адвакат, паэт, народны заступнік Ашмянскі веснікВ Минске появится площадь Богушевича и улица Сырокомли, Белорусская деловая газета, 19 июля 2001 г.Айцец беларускай нацыянальнай ідэі паўстаў у бронзе Сяргей Аляксандравіч Адашкевіч (1918, Мінск). 80-я гады. Бюст «Францішак Багушэвіч».Яўген Мікалаевіч Ціхановіч. «Партрэт Францішка Багушэвіча»Мікола Мікалаевіч Купава. «Партрэт зачынальніка новай беларускай літаратуры Францішка Багушэвіча»Уладзімір Іванавіч Мелехаў. На помніку «Змагарам за родную мову» Барэльеф «Францішак Багушэвіч»Памяць пра Багушэвіча на Віленшчыне Страчаная сталіца. Беларускія шыльды на вуліцах Вільні«Krynica». Ideologia i przywódcy białoruskiego katolicyzmuФранцішак БагушэвічТворы на knihi.comТворы Францішка Багушэвіча на bellib.byСодаль Уладзімір. Францішак Багушэвіч на Лідчыне;Луцкевіч Антон. Жыцьцё і творчасьць Фр. Багушэвіча ў успамінах ягоных сучасьнікаў // Запісы Беларускага Навуковага таварыства. Вільня, 1938. Сшытак 1. С. 16-34.Большая российская1188761710000 0000 5537 633Xn9209310021619551927869394п

                    Беларусь Змест Назва Гісторыя Геаграфія Сімволіка Дзяржаўны лад Палітычныя партыі Міжнароднае становішча і знешняя палітыка Адміністрацыйны падзел Насельніцтва Эканоміка Культура і грамадства Сацыяльная сфера Узброеныя сілы Заўвагі Літаратура Спасылкі НавігацыяHGЯOiТоп-2011 г. (па версіі ej.by)Топ-2013 г. (па версіі ej.by)Топ-2016 г. (па версіі ej.by)Топ-2017 г. (па версіі ej.by)Нацыянальны статыстычны камітэт Рэспублікі БеларусьШчыльнасць насельніцтва па краінахhttp://naviny.by/rubrics/society/2011/09/16/ic_articles_116_175144/А. Калечыц, У. Ксяндзоў. Спробы засялення краю неандэртальскім чалавекам.І ў Менску былі мамантыА. Калечыц, У. Ксяндзоў. Старажытны каменны век (палеаліт). Першапачатковае засяленне тэрыторыіГ. Штыхаў. Балты і славяне ў VI—VIII стст.М. Клімаў. Полацкае княства ў IX—XI стст.Г. Штыхаў, В. Ляўко. Палітычная гісторыя Полацкай зямліГ. Штыхаў. Дзяржаўны лад у землях-княствахГ. Штыхаў. Дзяржаўны лад у землях-княствахБеларускія землі ў складзе Вялікага Княства ЛітоўскагаЛюблінская унія 1569 г."The Early Stages of Independence"Zapomniane prawdy25 гадоў таму было аб'яўлена, што Язэп Пілсудскі — беларус (фота)Наша вадаДакументы ЧАЭС: Забруджванне тэрыторыі Беларусі « ЧАЭС Зона адчужэнняСведения о политических партиях, зарегистрированных в Республике Беларусь // Министерство юстиции Республики БеларусьСтатыстычны бюлетэнь „Полаўзроставая структура насельніцтва Рэспублікі Беларусь на 1 студзеня 2012 года і сярэднегадовая колькасць насельніцтва за 2011 год“Индекс человеческого развития Беларуси — не было бы нижеБеларусь занимает первое место в СНГ по индексу развития с учетом гендерного факцёраНацыянальны статыстычны камітэт Рэспублікі БеларусьКанстытуцыя РБ. Артыкул 17Трансфармацыйныя задачы БеларусіВыйсце з крызісу — далейшае рэфармаванне Беларускі рубель — сусветны лідар па дэвальвацыяхПра змену коштаў у кастрычніку 2011 г.Бядней за беларусаў у СНД толькі таджыкіСярэдні заробак у верасні дасягнуў 2,26 мільёна рублёўЭканомікаГаласуем за ТОП-100 беларускай прозыСучасныя беларускія мастакіАрхитектура Беларуси BELARUS.BYА. Каханоўскі. Культура Беларусі ўсярэдзіне XVII—XVIII ст.Анталогія беларускай народнай песні, гуказапісы спеваўБеларускія Музычныя IнструментыБеларускі рок, які мы страцілі. Топ-10 гуртоў«Мясцовы час» — нязгаслая легенда беларускай рок-музыкіСЯРГЕЙ БУДКІН. МЫ НЯ ЗНАЕМ СВАЁЙ МУЗЫКІМ. А. Каладзінскі. НАРОДНЫ ТЭАТРМагнацкія культурныя цэнтрыПублічная дыскусія «Беларуская новая пьеса: без беларускай мовы ці беларуская?»Беларускія драматургі па-ранейшаму лепш ставяцца за мяжой, чым на радзіме«Працэс незалежнага кіно пайшоў, і дзяржаву турбуе яго непадкантрольнасць»Беларускія філосафы ў пошуках прасторыВсе идём в библиотекуАрхіваванаАб Нацыянальнай праграме даследавання і выкарыстання касмічнай прасторы ў мірных мэтах на 2008—2012 гадыУ космас — разам.У суседнім з Барысаўскім раёне пабудуюць Камандна-вымяральны пунктСвяты і абрады беларусаў«Мірныя бульбашы з малой краіны» — 5 непраўдзівых стэрэатыпаў пра БеларусьМ. Раманюк. Беларускае народнае адзеннеУ Беларусі скарачаецца колькасць злачынстваўЛукашэнка незадаволены мінскімі ўладамі Крадзяжы складаюць у Мінску каля 70% злачынстваў Узровень злачыннасці ў Мінскай вобласці — адзін з самых высокіх у краіне Генпракуратура аналізуе стан са злачыннасцю ў Беларусі па каэфіцыенце злачыннасці У Беларусі стабілізавалася крымінагеннае становішча, лічыць генпракурорЗамежнікі сталі здзяйсняць у Беларусі больш злачынстваўМУС Беларусі турбуе рост рэцыдыўнай злачыннасціЯ з ЖЭСа. Дазволіце вас абкрасці! Рэйтынг усіх службаў і падраздзяленняў ГУУС Мінгарвыканкама вырасАб КДБ РБГісторыя Аператыўна-аналітычнага цэнтра РБГісторыя ДКФРТаможняagentura.ruБеларусьBelarus.by — Афіцыйны сайт Рэспублікі БеларусьСайт урада БеларусіRadzima.org — Збор архітэктурных помнікаў, гісторыя Беларусі«Глобус Беларуси»Гербы и флаги БеларусиАсаблівасці каменнага веку на БеларусіА. Калечыц, У. Ксяндзоў. Старажытны каменны век (палеаліт). Першапачатковае засяленне тэрыторыіУ. Ксяндзоў. Сярэдні каменны век (мезаліт). Засяленне краю плямёнамі паляўнічых, рыбакоў і збіральнікаўА. Калечыц, М. Чарняўскі. Плямёны на тэрыторыі Беларусі ў новым каменным веку (неаліце)А. Калечыц, У. Ксяндзоў, М. Чарняўскі. Гаспадарчыя заняткі ў каменным векуЭ. Зайкоўскі. Духоўная культура ў каменным векуАсаблівасці бронзавага веку на БеларусіФарміраванне супольнасцей ранняга перыяду бронзавага векуФотографии БеларусиРоля беларускіх зямель ва ўтварэнні і ўмацаванні ВКЛВ. Фадзеева. З гісторыі развіцця беларускай народнай вышыўкіDMOZGran catalanaБольшая российскаяBritannica (анлайн)Швейцарскі гістарычны15325917611952699xDA123282154079143-90000 0001 2171 2080n9112870100577502ge128882171858027501086026362074122714179пппппп

                    Герб Смалявічаў Апісанне | Спасылкі | НавігацыяГерб города Смолевичип