Solved

bootstrap sample page fails

Posted on 2014-02-18
15
588 Views
Last Modified: 2014-02-19
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
0
Comment
Question by:nsitedesigns
  • 5
  • 4
  • 3
  • +1
15 Comments
 
LVL 82

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 125 total points
ID: 39868884
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css"> comes up '404' Not Found.
0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 39868892
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
 

Author Comment

by:nsitedesigns
ID: 39868900
Perhaps my tutorial is old?

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

weird.
0
 

Author Comment

by:nsitedesigns
ID: 39868905
p.s.  I did "clean up" the coding per your suggestion.
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 250 total points
ID: 39868913
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
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 39868921
What did you download?  I don't see a version matching what's in your page.
0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 39868958
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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 58

Expert Comment

by:Gary
ID: 39868968
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
 
LVL 58

Accepted Solution

by:
Gary earned 250 total points
ID: 39869003
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
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 39869045
Using Cathal's code now : https://www.dibsiam.com/bs311/
0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 125 total points
ID: 39869176
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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39869658
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
 

Author Comment

by:nsitedesigns
ID: 39870232
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
 

Author Closing Comment

by:nsitedesigns
ID: 39870243
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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39870425
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

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
ASP.Net Session State alternatives 3 30
Not needed 13 57
Urgent Help with HTML CSS Positioning 9 22
razorCMS: Change Menu Font 4 27
If you’re thinking to yourself “That description sounds a lot like two people doing the work that one could accomplish,” you’re not alone.
"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now