Bootstrap design behaving weirdly when being responsive and other problems

Question

I'm designing a portfolio for myself and I've decided to use bootstrap. I have some of it set up but I'm noticing some problems.

When I shrink my window, my top menu condenses to a button but when I click the button nothing happens. It should drop down revealing my menu but it doesn't and I'm not sure why.
The three sections labeled 'I'm an artist' are close to how I'd like them but a few problems persist. I'm trying to space them out a bit so that when viewing the page on a desktop there will be a box to the left a box in the center and one to the right. I also want the boxes centered if that makes sense. When viewing it on mobile I'd like to have it so the sections(now vertical) will have a slight gap and a border around them.

Here's my code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset ="utf-8">
        <Title>"HorrorNerd"</Title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href = "css/bootstrap.min.css" rel ="stylesheet">
        <link href = "css/styles.css" rel ="stylesheet">
    </head>
    <body>

<div class ="navbar navbar-inverse navbar-static-top">
    <div class="container">
        <a href="#" class="navbar-brand">HorrorNerd</a>
            <button class="navbar-toggle" data-toggle="collapse" data-target="navHeaderCollapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        <div class="collapse navbar-collapse navHeaderCollapse">
                <ul class="nav navbar-nav navbar-right">
                        <li class="active"><a href="#">Home</a>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="http://horrornerd.github.io/artist.html" alt="HorrorNerd's Art Gallery">Artwork</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown" data-toggle="dropdown">Social Media <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Facebook</a></li>
                                    <li><a href="#">Google+</a></li>
                                    <li><a href="#">Linkn</a></li>
                                    <li><a href="#">Pinterest</a></li>
                                    <li><a href="#">Twitter</a></li>
                                    <li><a href="#">Youtube</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Services</a></li>
                            <li><a href="#contact" data-toggle="modal">Contact</a></li>
                    </ul>
                    </div>
                </div>
</div>
<div class="container">
    <div class="row">

        <div class="col-md-4">
                <div class="info">
                <h1>I'm An Artist</h1>
                <p>Art is at the center of my life. I am always creating. Whether it be sketching,coding,listening to music or writing; Art is vital.</p>
                <a href="http://horrornerd.github.io/artist.html" alt="HorrorNerd's Art Gallery" class="btn btn-danger btn-sm pull-right"  >Visit Gallery</a>
                </div>
        </div>

        <div class="col-md-4">
                <div class="info">
                <h1>I'm An Artist</h1>
                <p>Art is at the center of my life. I am always creating. Whether it be sketching,coding,listening to music or writing; Art is vital.</p>
                <a href="http://horrornerd.github.io/artist.html" alt="HorrorNerd's Art Gallery" class="btn btn-danger btn-sm pull-right"  >Visit Gallery</a>
                </div>
        </div>

        <div class="col-md-4">
                <div class="info">
                <h1>I'm An Artist</h1>
                <p>Art is at the center of my life. I am always creating. Whether it be sketching,coding,listening to music or writing; Art is vital.</p>
                <a href="http://horrornerd.github.io/artist.html" alt="HorrorNerd's Art Gallery" class="btn btn-danger btn-sm pull-right"  >Visit Gallery</a>
                </div>
        </div>

    </div>
</div>

<div class="navbar navbar-inverse navbar-fixed-bottom">
        <div class="container">
            <p class="navbar-text pull-left">Site by HorrorNerd.</p>
            <a class="navbar-btn btn-danger btn-sml pull-right">Subscribe on Youtube</a>

        </div>
</div>

<div class="modal fade" id ="contact" role="dialog">
        <div class="modal-dialog">
                <div class="modal-content">
                        <div class="modal-header">
                                <h4>Contact HorrorNerd</h4>
                        </div>

                        <div class="modal-body">
                                <p>This is just a test for now.</p>
                        </div>

                        <div class="modal-footer">
                            <a class="btn btn-danger" data-dismiss="modal">Close</a>
                        </div>

                </div>
        </div>




</div>


<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
    </body>
</html>

lowtechsun · Accepted Answer · 2015-03-05T13:05:40.993

1.a You need to get rid of the navHeaderCollapse and if you like to keep it you need to link to an id of navHeaderCollapse in the div with class class="navbar-collapse collapse". But this would not be the right approach.

1.b Since you forgot to include a <div class="navbar-header"> in the navbar section I think you tried to include that as navHeaderCollapse later on. See my corrected code for how to work with <div class="navbar-header">.

2.a Instead of giving your columns 4 equal length I made them being 3 equal length so that you have your wanted space round them. Though when having 3 columns of each 3 equal length you are left with 3 columns of space that you ideally like to apply equally on each side of the middle column.

Since 3 divided by 2 is 1.5 and there does not exist a column of the size of 1 and a half columns you need to nest the middle column and then you can easily apply equal space to both sides of it with offsetting. Please look at Offsetting columns, Grid nesting and Column ordering for how to do that. In order to understand what I have done with the code please do play around with the offset, push and pull classes.

2.b To have a slight gap when the columns stack up I have included a media query and set the CSS rule to remove the default padding on the parent column.

2.c To have a border when the columns stack up I have included the CSS rules for the border for the given media query.

I would move the styles included to a folder named "css" and put them all in there instead of having them in the html document.

Please do find the HTML5 shim and Respond.js for IE8 support in the head as well, important if you like this to work with IE.

I would also strongly recommend to have a look at some Bootstrap Tutorials before you continue further work with it. Looking at you errors I have a feeling you have not yet understood the concept of it behind it. No shame there, neither have I completely and there is tons of people just starting to learn this framework.

It is not hard and can be easily learned in a few days, at least the very basics of it, and believe me it is well worth it. Time well invested, since if you continue with your portfolio you will surly come across such issues and others in the future.

Here is your corrected and i.m.o. working html and css.

<!DOCTYPE html>
<html>
    <head>
        <meta charset ="utf-8">
        <Title>HorrorNerd</Title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href = "http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">

        <!-- HorrorNerd's Stylesheet -->
        <link href = "css/styles.css" rel ="stylesheet">

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->

    </head>
    <body>

    <style type="text/css">

    /* add styles to all column classes to make the grid visible and better to understand it */
    /* remove this bit of css for production/the live site obviously */
    /* ============================================================= */

    [class*="col-"] {
        background-color: #eeeeee;
        background-clip: padding-box; /* research this, what is background-clip? what is padding-box? */
        border: 0.2em solid transparent;
        border-radius: 8px; 
        -moz-border-radius: 8px; 
        -webkit-border-radius: 8px; 
        border: 3px solid #666;
    }

    /* ============================================================= */
    /* remove this bit of css for production/the live site obviously */

    /* media query for when the columns start to stack up or everything up to the col-md class */
    @media screen and (max-width: 991px) {

        /* remove the padding on either side of the columns for the given media query */
        .middle-column {
            padding: 0 !important; /* use of !important is a must to override Bootstrap's default CSS */
        }

        /* add the top-space to the 2nd and 3rd column for the given media query */
        /* here you can choose between the values that fit you best */
        /* I have used % values but of course you can use px or other units */
        .top-space-sm-1 {
            margin-top: 1%;
        }

        .top-space-sm-2 {
            margin-top: 2%;
        }

        .top-space-sm-3 {
            margin-top: 3%;
        }

        .top-space-sm-4 {
            margin-top: 4%;
        }

        .top-space-sm-5 {
            margin-top: 5%;
        }

        .top-space-sm-7 {
            margin-top: 7%;
        }

        .top-space-sm-10 {
            margin-top: 10%;
        }

        /* this is your wanted border for the columns on the given media query */
        /* replace "green" with any colour you like */
        .col-xs-border {
            border: 2px solid green;
        }

        /* include this so you always have a vertical scrollbar */
        /* this will avoid jumps of the page when being resized */
        /* it is up to you and how your site will look later to keep or remove it */
        html {
            overflow-y: scroll;
        }
    }
    </style>

    <!-- navbar -->
    <nav class="navbar navbar-inverse navbar-static-top" role="navigation">

        <div class="container">

            <div class="navbar-header">

                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

                    <span class="sr-only">Menu</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>

                </button>

              <a class="navbar-brand" href="index.html">HorrorNerd</a>

          </div> <!-- div class="navbar-header" close -->

              <div id="navbar" class="navbar-collapse collapse">

                  <ul class="nav navbar-nav navbar-right">
                      <li class="active"><a href="#">Home</a>
                      <li><a href="#about.html">About</a></li>
                      <li><a href="#blog.html">Blog</a></li>
                      <li><a href="http://horrornerd.github.io/artist.html" alt="HorrorNerd's Art Gallery">Artwork</a></li>

                        <li class="dropdown">
                            <a href="#" class="dropdown" data-toggle="dropdown">Social Media <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Facebook</a></li>
                                    <li><a href="#">Google+</a></li>
                                    <li><a href="#">Linkn</a></li>
                                    <li><a href="#">Pinterest</a></li>
                                    <li><a href="#">Twitter</a></li>
                                    <li><a href="#">Youtube</a></li>
                                </ul>
                        </li>                        

                        <li><a href="#services.html">Services</a></li>
                        <li><a href="#contact" data-toggle="modal">Contact</a></li>                        

                  </ul>
              </div>

        </div> <!-- div class="container" close -->

    </nav> <!-- nav close -->

    <div class="container">
        <div class="row">

            <div class="col-xs-border col-xs-12 col-md-3">
                    <div class="info">
                    <h1>I'm An Artist</h1>
                    <p>Art is at the center of my life. I am always creating. Whether it be sketching,coding,listening to music or writing; Art is vital.</p>
                    <a href="http://horrornerd.github.io/artist.html" alt="HorrorNerd's Art Gallery" class="btn btn-danger btn-sm pull-right">Visit Gallery</a>
                    </div>
            </div>

            <!-- http://getbootstrap.com/css/#grid-offsetting -->
            <div class="col-xs-border top-space-sm-4 middle-column col-xs-12 col-md-4 col-md-offset-1">

                <!-- http://getbootstrap.com/css/#grid-nesting -->
                <!-- http://getbootstrap.com/css/#grid-column-ordering -->
                <div class="col-xs-12 col-md-10 col-md-push-1">
                    <div class="info">
                    <h1>I'm An Artist</h1>
                    <p>Art is at the center of my life. I am always creating. Whether it be sketching,coding,listening to music or writing; Art is vital.</p>
                    <a href="http://horrornerd.github.io/artist.html" alt="HorrorNerd's Art Gallery" class="btn btn-danger btn-sm pull-right">Visit Gallery</a>
                    </div>
                </div>
            </div>

            <!-- http://getbootstrap.com/css/#grid-offsetting -->
            <div class="col-xs-border top-space-sm-4 col-xs-12 col-md-3 col-md-offset-1">
                    <div class="info">
                    <h1>I'm An Artist</h1>
                    <p>Art is at the center of my life. I am always creating. Whether it be sketching,coding,listening to music or writing; Art is vital.</p>
                    <a href="http://horrornerd.github.io/artist.html" alt="HorrorNerd's Art Gallery" class="btn btn-danger btn-sm pull-right">Visit Gallery</a>
                    </div>
            </div>

        </div>
    </div>

    <div class="navbar navbar-inverse navbar-fixed-bottom">
            <div class="container">
                <p class="navbar-text pull-left">Site by HorrorNerd.</p>
                <a class="navbar-btn btn-danger btn-sml pull-right">Subscribe on Youtube</a>
            </div>
    </div>

    <div class="modal fade" id ="contact" role="dialog">
            <div class="modal-dialog">
                    <div class="modal-content">
                            <div class="modal-header">
                                    <h4>Contact HorrorNerd</h4>
                            </div>

                            <div class="modal-body">
                                    <p>This is just a test for now.</p>
                            </div>

                            <div class="modal-footer">
                                <a class="btn btn-danger" data-dismiss="modal">Close</a>
                            </div>
                    </div>
            </div>
    </div>


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>


    </body>
</html>

Best of luck with your work!

If this answer has helped you please DO NOT forget to accept it as the correct answer. Thank you :)

sorry for the lateness of my reply. Thank you again for the help I will go over this tonight and rectify and relearn what i thought I knew lol, I was following a few videos as well on bootstrap and clearly i got confused so thank you for pointing me in the right direction. — HorrorNerd, Mar 08 '15 at 18:57
Doing further research on this I like to add that there is also the http://getbootstrap.com/css/#helper-classes-center that could be used instead of what I did. See https://stackoverflow.com/questions/18153234/center-a-column-using-twitter-bootstrap-3 and https://stackoverflow.com/questions/24124178/center-content-in-bootstrap-column I also just started so perhaps this helper class is better in this case, I am not sure. — lowtechsun, Mar 08 '15 at 22:46

Bootstrap design behaving weirdly when being responsive and other problems

1 Answers1