How to move this image to the top of its parent div

How to move this image to the top of its parent div
0

#1

#2

The .jumbotron class has default padding assigned to it, this is what’s pushing the image down. You can either override that padding (.jumbotron {padding:0;}) or create a new class with stylings. It looks like you’re trying to use the jumbotron as a card, if you Google around for Bootstap card layout you might find something a bit easier to use, rather than amending a pre-built class.

Also the image will stop busting out if you add a img-responsive class to it


#3

How do I include the image perfectly without using img-responsive?

The parent div has a dimension of 360x450. The pic I want to include has a dimension of 360x180.
I want it to be perfectly aligned with the div. It should look something like this:

I’m trying to replica this design, therefore encountered this problem, and also on the site itself the pic is not set as a background image for the div… so…


#4

Can’t test it now, but have you tried margin-left: -15px on the image? Not really a clean solution maybe, but should work.

You could also just skip the jumbotron I guess, it’s meant for something else.


#5

I tried to set it as margin-left: -60px; and it worked.

Could I use this kind of method in real world programming??


#6

Do you want the three cards in a row? Skip the jumbotron class, remove fixed sizing of .this and use more col-xx-x versions.


#7

And put an extra div in .this, or .this in it’s own div, to use default .col padding.


#8

I’m just trying to clone this design.


#9

edited it but went wrong…
hmmm, make my own I guess

See the Pen Bootstrap Jumbotron Practice by Jan-Jaap Sinke (@jjcsinke) on CodePen.


#10

Thanks! Exactly what I need!


#11

So in this part you did not include class jumbotron in it… I see…


#12

Correct. Basic structure:

Container > row > col-sizer > this

The img-responsive class will fit the image.

You can style .this however you like to make it your own design within the bootstrap sizing.

Jumbotron is for the big pagewide banners you see on frontpages often.

In Bootstrap 4 they introduced cards to do this design you want, in Bootstrap 3 it would be panels, but they have padding by default.


#13

Thanks! I will look into it and try to implement it.