Img-responsive works inside jumbotron but not without it

megosh225 · 2017-02-24 05:23:02 UTC

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 · 2017-02-24 15:09:27 UTC

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

megosh225 · 2017-02-24 22:03:11 UTC

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

megosh225 · 2017-02-24 23:01:13 UTC

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 · 2017-02-24 23:24:40 UTC

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

megosh225 · 2017-02-25 02:26:26 UTC

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 · 2017-02-25 04:23:56 UTC

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

speedgoofy · 2017-02-25 04:32:31 UTC

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 · 2017-02-28 05:35:17 UTC

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.