Twitter Bootstrap Question posted in

Twitter bootstrap – How to add left padding for my charts done in ChartJs and my Google Map so it is not glued to the limit of the page on the left

I am not a CSS expert and I can’t get to move my charts a bit to the right (Give them a margin of 20 px) so there are not completely touching the border (as you can see on the pict I attach). I want to create some space( white) between the left border and the chart.Also if you have any idea on how to move the map that would be also super helpful!

Any ideas?

<!DOCTYPE html>
<html ng-app="mapsApp">
<head lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="product" content="Metro UI CSS Framework">
    <meta name="description" content="Simple responsive css framework">
    <meta name="author" content="Chantal MARIN">

    <link href="css/metro-bootstrap.css" rel="stylesheet">
    <!--<link href="css/metro-bootstrap-responsive.css" rel="stylesheet">-->
    <link href="css/iconFont.css" rel="stylesheet">

    <!-- Load JavaScript Libraries -->
    <script src="js/jquery/jquery.min.js"></script>
    <script src="js/jquery/jquery.widget.min.js"></script>

    <!-- Metro UI CSS JavaScript plugins -->
    <script src="js/load-metro.js"></script>

    <!-- Local JavaScript -->
    <script src="js/github.info.js"></script>
 
<title>This is the map of the expedition</title>

<link rel="stylesheet" href="css/maps.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD6SfOqSpJQa45i0LWO-9zSrV9HDPzACYg&signed_in=true&callback=initMap"></script>
<script type="text/javascript" src="js/maps.js"></script>

<script src="js/Chart.min.js"></script>

 <script type="text/javascript"
          src="https://www.google.com/jsapi?autoload={
            'modules':[{
              'name':'visualization',
              'version':'1',
              'packages':['corechart']
            }]
          }"></script>

 
</head>
<body class="metro">
    <div class="container">
        <header class="margin20 nrm nlm">
            <div class="clearfix">
                <div class="place-right">
                    <form>
                        <div class="input-control text size6 margin20 nrm">
                          <img src="images/Donate.jpg" style="height: 100px; display: inline-block; margin-right: 0px; margin-left: 100px;">
                        </div>
                    </form>
                </div>
                <a class="place-left" href="#" title="">

                    <h1> <img src="images/wn8.png" style="height: 40px; display: inline-block; margin-right: 20px; margin-left: 10px;">Microsoft Band </h1>

                </a>
            </div>

            <div class="main-menu-wrapper">
                <ul class="horizontal-menu nlm">
                    <li><a href="#anchor1">Metrics</a></li>
                    <li><a href="#anchor2">Pictures of the trip</a></li>
                    <li><a href="#anchor3">Team</a></li>
                
                        </ul>
                    </li>
                </ul>
            </div>
        </header>


 <div id="map_canvas" style="width:1650px; height:500px"></div>


<script type="text/javascript">
    function initialize() {

          var PitStops = [{
              name: "Stop 1",
            latlng: new google.maps.LatLng(70, -23)
        }, {
            name: "Stop 2",
               latlng: new google.maps.LatLng(67, -50)
        }, {
            name: "Stop 3",
            latlng: new google.maps.LatLng(60, -45)
        }, {
            name: "Stop 4",
            latlng: new google.maps.LatLng(61, -43)
        } ];

          var mapOptions = {
            zoom: 4,
            center: new google.maps.LatLng(69,-26),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: false 
          };

        var polyOptions = {
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 4
        }

        var map2 = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

        poly = new google.maps.Polyline(polyOptions);
        poly.setMap(map2);

        var path = poly.getPath();
     
        var latlngbounds = new google.maps.LatLngBounds( );

        for ( var i = 0; i < PitStops.length; i++ ) {
            new google.maps.Marker( {
                position: PitStops[ i ].latlng,
                map: map2,
                title: PitStops[ i ].name
            } );

            path.push(PitStops[ i ].latlng);
            latlngbounds.extend( PitStops[ i ].latlng );
        }


        map.fitBounds( latlngbounds );

    }

    google.maps.event.addDomListener( window, 'load', initialize );

    </script>



 <div style="width: 95%">
        <canvas id="canvas" margin-left= "10" height="600" width="2500"></canvas>
    </div>

    <div style="width: 95%">
        <canvas id="canvas2" margin-left= "10" height="600" width="2500"></canvas>
    </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>

  <script>
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};

var barChartData = {
    labels : ["Day 1","Day 2","Day 3","Day 4","day 5","Day 6 ","Day 7", "Day 8","Day 9","Day 10","Day 11","day 12","Day 13 ","Day 14", "Day 1","Day 2","Day 3","Day 4","day 5","Day 6 ","Day 7", "Day 8","Day 9","Day 10","Day 11","day 12","Day 13 ","Day 14", "Day 1","Day 2","Day 3","Day 4","day 5","Day 6 ","Day 7", "Day 8","Day 9","Day 10","Day 11","day 12","Day 13 ","Day 14", "Day 1","Day 2","Day 3","Day 4","day 5","Day 6 ","Day 7", "Day 8","Day 9","Day 10","Day 11","day 12","Day 13 ","Day 14",],
    datasets : [
        {
            fillColor : "rgba(220,220,220,0.5)",
            strokeColor : "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(), randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(), randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(), randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(), randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(), randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
        },
        {
            fillColor : "rgba(151,187,205,0.5)",
            strokeColor : "rgba(151,187,205,0.8)",
            highlightFill : "rgba(151,187,205,0.75)",
            highlightStroke : "rgba(151,187,205,1)",
            data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(), randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(), randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(), randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(), randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
        }
    ]

}
    var barChartData2 = {
    labels : ["Day 1","Day 2","Day 3","Day 4","day 5","Day 6 ","Day 7", "Day 1","Day 2","Day 3","Day 4","day 5","Day 6 ","Day 7", "Day 8","Day 9","Day 10","Day 11","day 12","Day 13 ","Day 14", "Day 1","Day 2","Day 3","Day 4","day 5","Day 6 ","Day 7", "Day 8","Day 9","Day 10","Day 11","day 12","Day 13 ","Day 14", "Day 1","Day 2","Day 3","Day 4","day 5","Day 6 ","Day 7", "Day 8","Day 9","Day 10","Day 11","day 12","Day 13 ","Day 14",],
    datasets : [
        {
            fillColor : "rgba(220,220,220,0.5)",
            strokeColor : "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(), randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(), randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(), randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(), randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(), randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
        },
        {
            fillColor : "rgba(151,187,205,0.5)",
            strokeColor : "rgba(151,187,205,0.8)",
            highlightFill : "rgba(151,187,205,0.75)",
            highlightStroke : "rgba(151,187,205,1)",
            data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(), randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(), randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(), randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(), randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(), randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
        }
    ]

}
window.onload = function(){
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myBar = new Chart(ctx).Bar(barChartData, {
        responsive : true
    });
    var ctx2 = document.getElementById("canvas2").getContext("2d");
    window.myBar = new Chart(ctx2).Bar(barChartData2, {
        responsive : true
    });
}

</script>

<a name="anchor1"></a>
<div id="charts">
<div id="curve_chart1" class="InsideContent">left</div>
                               
<div id="curve_chart2" class="InsideContent">Middle</div>
                  
<div id="curve_chart3" class="InsideContent">right</div>

                            
                              
                            
<div class="clear"></div> 

    <a name="anchor2"></a>
    </div>

                <div class="tile-group no-margin no-padding clearfix" style="width: 100%">
                    <div class="tile double ol-transparent"><img src="images/exp1.jpg" /></div>
                    <div class="tile double ol-transparent"><img src="images/exp1.jpg" /></div>
                    <div class="tile double ol-transparent"><img src="images/exp1.jpg" /></div>
                    <div class="tile double ol-transparent"><img src="images/exp1.jpg" /></div>
                    <div class="tile double ol-transparent"><img src="images/exp1.jpg" /></div>
                </div>

                <div class="tile-group no-margin no-padding1 clearfix" style="width: 100%;">
                    <a href="#"><span class="tile-group-title fg-orange">TRIP: DAY 1 <span class="icon-arrow-right-5"></span></span></a>
                    <div class="tile quadro double-vertical ol-transparent"><img src="images/exp1.jpg" /></div>
                    <div class="tile double ol-transparent"><img src="images/exp1.jpg" /></div>
                    <div class="tile ol-transparent"><img src="images/exp1.jpg" /></div>
                    <div class="tile ol-transparent"><img src="images/exp1.jpg" /></div>
                    <div class="tile ol-transparent"><img src="images/exp1.jpg" /></div>
                    <div class="tile ol-transparent"><img src="images/exp1.jpg" /></div>
                    <div class="tile double ol-transparent"><img src="images/exp1.jpg" /></div>
                     <div class="tile double ol-transparent"><img src="images/exp1.jpg" /></div>
                      <div class="tile double ol-transparent"><img src="images/exp1.jpg" /></div>
                </div>

                <div class="tile-group no-margin no-padding1 clearfix" style="width: 100%;">
                    <a href="#"><span class="tile-group-title fg-cobalt">TRIP: DAY 2<span class="icon-arrow-right-5"></span></span></a>
                    <div class="tile quadro double-vertical ol-transparent"><img src="images/exp1.jpg" /></div>
                    <div class="tile double ol-transparent"><img src="images/1.jpg" /></div>
                    <div class="tile ol-transparent"><img src="images/1.jpg" /></div>
                    <div class="tile ol-transparent"><img src="images/1.jpg" /></div>
                    <div class="tile ol-transparent"><img src="images/1.jpg" /></div>
                    <div class="tile ol-transparent"><img src="images/1.jpg" /></div>
                    <div class="tile double ol-transparent"><img src="images/1.jpg" /></div>
                     <div class="tile double ol-transparent"><img src="images/exp1.jpg" /></div>
                      <div class="tile double ol-transparent"><img src="images/exp1.jpg" /></div>
                </div>

                   <div class="tile-group no-margin no-padding1 clearfix" style="width: 100%;">
                    <a href="#"><span class="tile-group-title fg-orange">TRIP: DAY 3 <span class="icon-arrow-right-5"></span></span></a>
                    <div class="tile quadro double-vertical ol-transparent"><img src="images/exp1.jpg" /></div>
                    <div class="tile double ol-transparent"><img src="images/exp1.jpg" /></div>
                    <div class="tile ol-transparent"><img src="images/exp1.jpg" /></div>
                    <div class="tile ol-transparent"><img src="images/exp1.jpg" /></div>
                    <div class="tile ol-transparent"><img src="images/exp1.jpg" /></div>
                    <div class="tile ol-transparent"><img src="images/exp1.jpg" /></div>
                    <div class="tile double ol-transparent"><img src="images/exp1.jpg" /></div>
                     <div class="tile double ol-transparent"><img src="images/exp1.jpg" /></div>
                      <div class="tile double ol-transparent"><img src="images/exp1.jpg" /></div>
                </div>

                <div class="tile-group no-margin no-padding1 clearfix" style="width: 100%;">
                    <a href="#"><span class="tile-group-title fg-orange">TRIP: DAY 4 <span class="icon-arrow-right-5"></span></span></a>
                    <div class="tile quadro double-vertical ol-transparent"><img src="images/exp1.jpg" /></div>
                    <div class="tile double ol-transparent"><img src="images/exp1.jpg" /></div>
                    <div class="tile ol-transparent"><img src="images/exp1.jpg" /></div>
                    <div class="tile ol-transparent"><img src="images/exp1.jpg" /></div>
                    <div class="tile ol-transparent"><img src="images/exp1.jpg" /></div>
                    <div class="tile ol-transparent"><img src="images/exp1.jpg" /></div>
                    <div class="tile double ol-transparent"><img src="images/exp1.jpg" /></div>
                </div>


           
            </div>
        </div>

<div class="tile triple double-vertical ol-transparent bg-white">
                        <div class="tile-content">
                            <div class="panel no-border">
                                <div class="panel-header bg-darkRed fg-white">News 04-April-2016</div>
                                <div class="panel-content fg-dark nlp nrp">
                                    <img src="images/jeki_chan.jpg" class="place-left margin10 nlm ntm size2">
                                    <strong>James and his colleague soon in the north Pole/strong> The expedition is going to be happenning soon! Do not forget to Donate@
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tile triple double-vertical ol-transparent bg-white">
                        <div class="tile-content">
                            <div class="panel no-border">
                                <div class="panel-header bg-pink fg-white">News 10-April-2016</div>
                                <div class="panel-content fg-dark nlp nrp">
                                    <img src="images/jek_vorobey.jpg" class="place-left margin10 nlm ntm size2">
                                    <strong>James  finally made it to the North Pole</strong> In the centre of the Arctic Ocean there is a Pole that has yet to be conquered. Now a British team is planning a journey of more than 1,000km (800 miles) to be the first to reach the loneliest place on the ice.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


    <script src="js/hitua.js"></script>
       <div class="main-content clearfix">
            <div class="tile-area no-padding clearfix">
            
                 
                    </div>
                    <div class="tile ol-transparent bg-teal">
                        <div class="tile-content icon">
                            <span class="icon-facebook"></span>

                        </div>

                    </div>
                    <div class="tile ol-transparent bg-green">
                        <div class="tile-content icon">
                            <span class="icon-twitter"></span>
                        </div>
                    </div>




    </div>




  <a name="anchor3"></a>
    
  <h1> UCL Team</h1>

  <div style=" float: left;  margin:20px"><a href="http://www.linkedin/com/in/ChantalMarin"> </a>
      <img width="200" height="200" src="images/Chantal.jpg"> <h6>Chantal Marin</h6>
      <p>Front-end Lead</p> </div>
    
       <div style=" float: left;  margin:20px"><a href="http://www.linkedin/com/in/ChantalMarin"> </a>
      <img width="200" height="200" src="images/Lukmaan.jpg"> <h6>Lukmaan Kolia</h6>
      <p>Back-end Lead I</p> </div>

        <div style=" float: left;  margin:20px"><a href="http://www.linkedin/com/in/ChantalMarin"> </a>
      <img width="200" height="200" src="images/Marco.jpg"> <h6>Marco Greseling</h6>
      <p>Back-end Lead II</p> </div>

   

<!-- Speaker 1 -->
        <ul>
            <li><a href="https://www.facebook.com/Luca-North-Pole-charity-fundraising-trip-123798931004609/?fref=ts&__mref=message_bubble" target="_blank"><i class="fa fa-twitter"></i></a></li>
            <li><a href="https://www.facebook.com/Luca-North-Pole-charity-fundraising-trip-123798931004609/?fref=ts&__mref=message_bubble"  target="_blank"><i class="fa fa-linkedin"></i></a></li>
                   
        </ul>
    </div>


</body>

</html>

Thank you! 🙂

Tags:

2

Answers


  1. 0

    Just add a width to 100% and not u have a full screen map: 

    <div id="map_canvas" style="width:100%; height:500px"></div>

    Or if u want just move use in there margin-left: (your vaule)

    Login or Signup to reply.
  2. 0

    try my trick, from

    labels: [ 'label_a', 'label_b', 'label_c' ],

    to

    labels: [ '       label_a', 'label_b', 'label_c' ],
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search