Bootstrap grid?

Im trying to figure out this system
I have the following

<div class="row">
	<div class="col-2 aside">
		<div id="menu" style="background-color:white">
		Menu div
		</div>
		<img src="images/facility.jpg" class="img-fluid" style="margin:50px">
	</div>
	<div class="col-10" style="height:800px">
	</div>
</div>

http://lukesspot.com/indus_links/
Why is the image not being shrunk to fit inside the aside (grey) div.
I put its class to img-fluid, so shouldnt that be the case.
Also, how can I place the image so its always at the bottom of the aside?
Thanks

The margin on the image is pushing it to the right. And the padding on the .menu div creates a gap on the right.

how can I place the image so its always at the bottom of the aside?

The easiest way would be to look into Grid or Flex layout.

1 Like

Like this:

.aside{display:flex;flex-direction:column;}
.aside .img-fluid{margin:auto auto 0;}

Bootstrap4 uses flex layout :slight_smile:

3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.