Solved

Bootstrap

Posted on 2013-11-08
1
543 Views
Last Modified: 2013-11-10
Am used bootstrap frame work on my website. but i have problem  with  using div [width]
size. Basically bootstrap have  fixed width and sizes[like div id="span 3"] 220 px;
But i need more than that 250 px; if i give span 3 is 250 px the boost trap indicate error

check my link and give a solution to  div alignment problem

http://design.jnj.net.in/bloom/
0
Comment
Question by:jnj_web_solutions
1 Comment
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39633218
Bootstrap uses 12 columns.  You are using version 2 and version 3 is the newest.  If you are just starting your project, I would switch.  Version 3 http://getbootstrap.com/ or version 2 http://getbootstrap.com/2.3.2/

First thing you should do is check your code in the validator. You have a lot of errors. Many are duplicate ID's.  Judging by your question, you are probably getting confused on how to use an ID vs CLASS.  First look here:
http://validator.w3.org/check?uri=http%3A%2F%2Fdesign.jnj.net.in%2Fbloom%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

The coding errors shown above matters in order to make your site behave the way you expect.  In your question you show, div id="span 3".  That should be a class div class="span3"

For the code, if you look on their example for version 2 http://getbootstrap.com/2.3.2/scaffolding.html you want to use the class=span throughout your code. I don't see where you have done that in your own code.  You only have bootstrap span classes in a couple of places.  

The example below is in percentages because it uses the class row-fluid.  If you don't use row-fluid, then you will be  using fixed widths.  
<div class="row-fluid">
  <div class="span12">
    Fluid 12
    <div class="row-fluid">
      <div class="span6">
        Fluid 6
        <div class="row-fluid">
          <div class="span6">Fluid 6</div>
          <div class="span6">Fluid 6</div>
        </div>
      </div>
      <div class="span6">Fluid 6</div>
    </div>
  </div>
</div>

Open in new window


I did find bootstrap2 a little confusing, if you go to version3, the classes are set up differently but I like the site up much better.

I hope this helps.
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
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…

777 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