Bootstrap grid?

HTML & CSS
1

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

2

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
3

Like this:

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

Bootstrap4 uses flex layout :slight_smile:

3 Likes
4

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