I am facing an issue with my bike images and manufacturer names appearing on top of each other instead of next to each other. Despite using "col-md-12", the grid columns are not aligning horizontally as expected. How can I adjust the code so that each image appears beside one another?
HTML
<!DOCTYPE html>
&;lt;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> {{"Andy's 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 class="col-md-12">
<!-- you missed md from offset, end class not needed -->
<div class="products" ng-controller="BikeController">
<div ng-repeat="product in products">
{{product.manufacturer}}
<br>
<img id="bikePic" ng-src="{{product.image}}">
</div>
</div>
</div>
</div>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
var app = angular.module('formApp', []);
app.controller('BikeController',['$scope', function($scope){
$scope.products = [
{
manufacturer: "Trek",
image: 'images/bike1.jpg'
},
{
manufacturer: "Mongoose",
image: 'images/bike2.jpg'
},
{
manufacturer: "Portlandia",
image: 'images/bike3.jpg'
},
{
manufacturer: "Giant",
image: 'images/bike4.jpg'
},
{
manufacturer: "Framed",
image: 'images/bike5.jpg'
}
];
this.form = {};
this.addForm = function(product){
};
}]);
app.css
.header{
font-style:italic;
background-color:black;
height:60px;
color:white;
font-weight:bold;
font-size:40px;
position:relative;
padding-top:10px;
padding-left:16px;
margin-left:-10px;
margin-right:-10px;
margin-top:-10px;
}
.header .fa {font-style:italic;
}
.bikeSelector{
color:green;
}
.chooseTitle{
font-size:60px;
}
.products{
color:red;
font-size:60px;
}
#bikePic{
height:20%;
width:20%;
}