CODEWITHSUNDEEP
angularjstwitter-bootstrap-3
moon
moon

Reputation: 670

Q: AngularJS, How can I put images into my background div?

I want to put some images into my background div. I expected those 5 image files will be in the div with ".well" class, but they just were spread out of that div. So, here's my question.
How can I put those image files stably into .well div? There's my code and result below:

<!doctype html>
<html ng-app="exampleApp">
	<head>
		<script src="angular.js"></script>
		<link href="bootstrap.css" rel="stylesheet"></link>
		<link href="bootstrap-theme.css" rel="stylesheet"></link>
		<script>
			angular.module("exampleApp", [])
			.controller("exampleCtrl", function($scope){
	
			$scope.data = [
				{ movie:"Pandora", date:"2016-12-07", img:"pandora.gif"   },
				{ movie:"Lalaland", date:"2016-12-07", img:"lalaland.gif" },
				{ movie:"Willyoubethere", date:"2016-12-14", img:"willYouBeThere.gif" },
				{ movie:"brother", date:"2016-11-23", img:"brother.gif" },
				{ movie:"Animal", date:"2016-11-16", img:"fantasticAnimalDictionary.gif" }
			];
			});
		</script>
	</head>
	<body ng-controller="exampleCtrl">
		<div class="container">
			<div class="well">
				<div class="col-md-2" ng-repeat="data in data">
					<img ng-src={{data.img}} />
				</div>
			</div>
		</div>
	</body>
</html>

The result from my code

Upvotes: 3

Views: 51

Answers (1)

Ahmar
Ahmar

Reputation: 3867

Add row class with well. like this

<div class="well row">
   <div class="col-md-2" ng-repeat="data in data">
       <img ng-src={{data.img}} />
   </div>
</div>

row class are containers of columns.The row provides the columns a place to live, ideally having columns that add up to 12. It also acts as a wrapper since all the columns float left, additional rows don’t have overlaps when floats get weird.

Upvotes: 1

Related Questions