[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 598
  • Last Modified:

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
0
nsitedesigns
Asked:
nsitedesigns
  • 5
  • 4
  • 3
  • +1
4 Solutions
 
Dave BaldwinFixer 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
 
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
nsitedesignsAuthor Commented:
p.s.  I did "clean up" the coding per your suggestion.
0
 
GaryCommented:
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
 
GaryCommented:
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 BaldwinFixer of ProblemsCommented:
Using Cathal's code now : https://www.dibsiam.com/bs311/
0
 
Scott Fell, EE MVEDeveloperCommented:
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 MVEDeveloperCommented:
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 MVEDeveloperCommented:
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

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 5
  • 4
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now