0

I feel like using margin and padding will mess with the bootstrap grid in a way that makes it not work on all devices since your going outside of the grid. If anyone can clarify this that would be awesome. Anyways I'm having issues getting the left arrow to space out away from the 3 bike images in a way that keeps everything on the page perfectly centered. I've been messing with the grid, but no matter what I do I can't get the left arrow to move away from the first bike image. See screenshot for reference. Any help is appreciated.enter image description here

HTML

<!DOCTYPE html>
<html ng-app='formApp'>

<head>
    <title>Bicycle App</title>
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link href="app.css" rel="stylesheet">

</head>

<body>
    <div class="header">
        <div class="container">
            <div class='row'>

                <div class='col-md-12'>

                    <i class="fa fa-bicycle" aria-hidden="true"><span>&nbsp;{{"Bike Shop"}}</span></i>
                </div>
            </div>
        </div>
    </div>
    <div class="container">


        <div class="row">

            <div class="col-md-offset-3 col-md-6">
                <!-- end class not needed -->
                <div class="chooseTitle">
                    Choose Your Bicycle
                </div>
            </div>
            </div>
                <!-- you missed md from offset, end class not needed -->
                <div class="products" ng-controller="BikeController">
                  <div class="row">


     <div class="col-md-1" id="leftArrow"><img ng-src="images/leftarrow.png"></div>

                  <div class="col-md-3 text-center" ng-repeat="product in products | limitTo:-3">
                  {{product.manufacturer}}
                  <img id="bikePic" ng-src="{{product.image}}">
                  </div>
                   <div class="col-md-1" id="rightArrow"><img ng-src="images/rightarrow.png"></div>
                  </div>



                </div><!--End controller-->




    </div>



    <script src="bower_components/angular/angular.js"></script>
    <script src="app.js"></script>
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bikeimageslider.js"></script>
</body>

</html>

CSS

.header{
    font-style:italic;
background-color:black;
height:60px;
color:white;
font-weight:bold;
font-size:40px;


}
.header .fa {font-style:italic;
}
.bikeSelector{
color:green;
}
.chooseTitle{

font-size:60px;

}

.products{
color:  #1E90FF  ;
text-align:center;
font-size:40px;

}
#bikePic{

height:100%;
width:100%;

}
user6680
  • 79
  • 6
  • 34
  • 78
  • This question may help: http://stackoverflow.com/questions/18304619/how-do-i-space-these-images-inside-of-a-bootstrap-3-grid-system, one answer says what I was thinking too, that you might want to try img-responsive and see if that helps – Katie Jul 09 '16 at 12:37

1 Answers1

1
<img ng-src="images/leftarrow.png">

change to

<img ng-src="images/leftarrow.png" class="img-responsive">

this will add max-width: 100%; to your image and won't break the <div class="col-md-1" id="leftArrow"> layout

In other words, your problem is that nav images is too big :) I would rather use absolute positioning for the navigation elements. Like

#leftArrow{ position: absolute; left: -40px; top: 50%; }

Sergey Khmelevskoy
  • 2,429
  • 3
  • 19
  • 43
  • That worked great thanks. So should I never use margin-left/right/up/down or padding-left/right/up/down with bootstrap grid? Because I feel like it would just cause issues – user6680 Jul 09 '16 at 12:42
  • You can use margin too, but this will cause more tweaks to be done in mobile. One way in this case is .col-md-12 for the all products and using display: inline-block. – Sergey Khmelevskoy Jul 09 '16 at 12:46