bootstrap sample page fails

I am learning bootstrap.  I went through an exercise and my page fails.  It is not responsive.  Not sure what went wrong.  Yes, I uploaded the css files to the css folder and the js files too.  

http://nsitedesigns.com/nsitedesigns/boot/index.html
nsitedesignsAsked:
Who is Participating?
 
GaryConnect With a Mentor Commented:
Fixing your BODY code

<div class="container">

<header><h1>this is my header </h1></header>

<section class="row">

<aside class="col-sm-3"><p>This is our text on left</p></aside>
<article class="col-sm-9"><p>this is our text on the right </p></article>
</section>
<section class="row">

<article class="col-sm-9"><p>Yet more text on left as an article </p></article>
<aside class="col-sm-3"><p>And her is our text over on the right of the aside</p></aside>
</section>
<footer class="row">
<p>footer goes here</p> </footer>
</div>

Open in new window


This will resize to the 4 main screen sizes.  If you want it fully responsive i.e. it takes up the whole browser width then just remove the container class on the div.  
Doing this you also need to give this container div a padding: 0 15px;  to counter BS's default negative margins on the row classes
0
 
Dave BaldwinConnect With a Mentor Fixer of ProblemsCommented:
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css"> comes up '404' Not Found.
0
 
Dave BaldwinFixer of ProblemsCommented:
I don't think 'initial- scale' should have a space in it.  Chrome says it's an error.  And 'device-width' should have a hyphen.
<meta name="viewport" content="width=device-width, initial-scale=1.0">

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
nsitedesignsAuthor Commented:
Perhaps my tutorial is old?

The file that the tutorial referenced bootstrap-responsive.css (from get bootstrap) is not one that downloaded.

weird.
0
 
nsitedesignsAuthor Commented:
p.s.  I did "clean up" the coding per your suggestion.
0
 
GaryConnect With a Mentor Commented:
Bootstrap is responsive to start with, it doesn't need any files other than the base css file.
Also you are using Bootstrap 3 but using Bootstrap 2 declarations in your element classes
http://getbootstrap.com/css/#grid

Simple example
<div class="row">
<div class="col-md-3"><div>
<div class="col-md-4"><div>
<div class="col-md-5"><div>
</div>

.row sets the container for content on the same row, col-md-* sets the number of columns to occupy (total should be 12)
0
 
Dave BaldwinFixer of ProblemsCommented:
What did you download?  I don't see a version matching what's in your page.
0
 
Dave BaldwinFixer of ProblemsCommented:
Ever erase your own comment?  I downloaded the current version of Bootstrap and the basic template and put it up her along with some of your content: https://www.dibsiam.com/bs311/  The first thing is that your page has nothing that would be 'responsive'.  You only have one line that even long enough to wrap.  If you were expecting the font size to change, I haven't seen that happen though I think I know how to do it.
0
 
GaryCommented:
The reason it is all flowing down the page instead of across is because Bootstrap v3 does not understand span3 or span9 etc (they don't exist) - they are Bootstrap v2 classes.
Ergo all your div, p, aside etc are remaining block elements and taking up the full width of the browser

Also the problem searching online for Bootstrap examples is a lot of them are for v2. You need to specifically search for "bootstrap 3"
0
 
Dave BaldwinFixer of ProblemsCommented:
Using Cathal's code now : https://www.dibsiam.com/bs311/
0
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
Check out the examples they have and view source.  Bootstrap does change from time to time and I noticed some new features recently in the getbootsrap site.  

http://getbootstrap.com/getting-started/#examples with something similar http://getbootstrap.com/examples/jumbotron/ 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.ico">

    <title>Jumbotron Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="jumbotron.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

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

  <body>

    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="navbar-collapse collapse">
          <form class="navbar-form navbar-right" role="form">
            <div class="form-group">
              <input type="text" placeholder="Email" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="Password" class="form-control">
            </div>
            <button type="submit" class="btn btn-success">Sign in</button>
          </form>
        </div><!--/.navbar-collapse -->
      </div>
    </div>

    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
      <div class="container">
        <h1>Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a class="btn btn-primary btn-lg" role="button">Learn more &raquo;</a></p>
      </div>
    </div>

    <div class="container">
      <!-- Example row of columns -->
      <div class="row">
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
       </div>
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
      </div>

      <hr>

      <footer>
        <p>&copy; Company 2014</p>
      </footer>
    </div> <!-- /container -->


    <!-- 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.0/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
  </body>
</html>

Open in new window


Just remember there are 4 sizes and you don't have to use them all.  xs, sm, md, lg  And 12 columns.   A full width div for the phone and 50% width for larger would have the class "col-xs-12 col-sm-6"

To make 3 columns always start with a row.  Code below will be 2 rows of 3 columns for a small screen or 6 rows full width for extra small screen
<div class="row">
    <div class="col-xs-12 col-sm-4">xs I am stacked on top, otherwise left</div>
    <div class="col-xs-12 col-sm-4">xs I am middle, otherwise middle horizontally</div>
    <div class="col-xs-12 col-sm-4">xs I am stacked at the bottom, otherwise right</div>
</div>
<div class="row">
    <div class="col-xs-12 col-sm-4">xs I am stacked on top, otherwise left</div>
    <div class="col-xs-12 col-sm-4">xs I am middle, otherwise middle horizontally</div>
    <div class="col-xs-12 col-sm-4">xs I am stacked at the bottom, otherwise right</div>
</div>

Open in new window

0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I think the real problem we should have caught is you are mixing up a tut that uses bootstrap 2 html but you are loading css from version 3.

The html structure is much different for v2 vs v3 and this will cause confusion.

Take a look at those example pages.  What is the best way for you to learn?  Is it looking at the example pages or are you looking for a step by step?
0
 
nsitedesignsAuthor Commented:
Hello all,

Sorry I had to step out last night while y'all were working.  Yup, problem was I was using a tutorial for 2 but downloaded 3.   I learn best from reading examples, then trying on my own.  Would prefer getting a book that I can mark up with highlighters but this changes so rapidly that by the time the book reaches my home, it would be outdated.  FOund a good site now to use that should help me out more.  I will share with others who are struggling.

http://www.sitepoint.com/understanding-twitter-bootstrap-3/
0
 
nsitedesignsAuthor Commented:
p.s.  Found this site which is also pretty cool but I don't want to use it as a crutch.  I need to understand why things work the way they do and not just plunk things in place.

http://www.layoutit.com/build
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Books are not going to work, this stuff does change too fast.   Start to get your head around the grid first.  Then add a nav/footer.  Play with the slider.

I think the best way to learn is to use one of your current sites, and convert it to the grid using only the col-xs-12. Then play with using multiple classes ("col-xs-12 col-sm-3") to see how things worth when the viewport changes.

If you are used to creating your sites visually like using dreamweaver only in design view, it will be a huge help in the end if you can force yourself to at least use the split view and just use the code view area to actually type your code and use the design view just to get some type of instant feedback. But the only real way to see how it looks is using the browser.

If you are not used to coding by hand, I think http://www.codecademy.com/learn is a good resource.  Because bootstap uses jquery, it would be good to at least go through the very basic javascript and jquery there as well.  I say this a lot, but it is true, spending 10 hours there now, will save you 10 times that down the road.

While the layoutit is kind of cool in what it does, I agree it is not a good thing to use.  It makes it more confusing.  

Another place to practice is http://jsbin.com/.  You can easily select a library for bootstrap or a number of others. You can also code on the left and see what is going on in the preview.  

I do think the best is to take an old site apart and put it back together again using bootstrap.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.