Img-responsive works inside jumbotron but not without it

megosh225 · February 24, 2017, 5:23am

Hi everyone, I am working on my portfolio page and I have 3 sections, those 3 sections begin as it follows:

    <div class="jumbotron">
    <div class="container">

I have a grid of images in the first and second sections and they work and scale fine on all screen sizes using the img-responsive class, however I decided to stop using jumbotron so I could give each div section a different color and as soon as I do that the images expand beyond the size of the div element they are nested in, I’ve tried resizing the images and it works for certain screen sizes but not for others.
I know I can manually override the jumbotron color properties but I’m left wondering if this is the only way to fix this problem.
Thanks in advance.

speedgoofy · February 24, 2017, 3:09pm

Do you have a codepen where I can look at your code?

megosh225 · February 24, 2017, 10:03pm

I am not working on codepen.io, I am coding using brackets.io so I copied the code into a new pen here.

megosh225 · February 24, 2017, 11:01pm

I managed to upload my files on github so here are two links.

Code:

github.com

megosh225/megosh225.github.io/blob/master/index.html

<!DOCTYPE html>
<html lang="en">
    
    
    
    <head>
        <title>My portfolio</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="X-UA-Compatible" content="IE-edge">
        
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="https://use.fontawesome.com/1866595c1f.js"></script>
        <style>
            
            
            body 
            {

This file has been truncated. show original

My github page
https://megosh225.github.io/

Thanks for taking a look.

ugumerie · February 24, 2017, 11:24pm

Dont know if this will help…try bootstrap .center-block to display block within the container. The images in the codepen are broken.

megosh225 · February 25, 2017, 2:26am

Hi, I’m not using codepen so I just copied the code inside codepen and that’s why it doesn’t show any pictures but I just uploaded it to github and it works fine, now I want to apologize for making a mess of this thread.
So the code as it is right now works perfectly fine, as you can see I am using a jumbotron class for each of the 3 sections but as soon as I delete the jumbotron classes all pictures increase their size and expand outside of their div containers.

lfaudreejr · February 25, 2017, 4:23am

If you just want to change the colors of the jumbotron classes you could do it with CSS and background-color: !important;

speedgoofy · February 25, 2017, 4:32am

I replaced your pics with some pics i found on the web, but i’m not able to duplicate the pictures popping out of the divs. One thing i do see is you should really only use one container class then put all your rows and col- inside that container. I quickly put a code pen together of the way i would have set it up(mostly, not perfect). Also i’m in the mindset that jumbotrons should be used only once at the top of the page for a hero image kind of look, to get mostly the same look you can use a

great start on your project! keep it up!

http://codepen.io/anon/pen/pevPOM

megosh225 · February 28, 2017, 5:35am

Thanks a lot, I have just finished polishing and improving my portfolio page, here is the link if you want to check it out.
https://megosh225.github.io/
Thanks again.

ilenia · January 16, 2021, 2:47pm