Solved

Bootstrap

Posted on 2013-11-08
1
537 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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

706 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

20 Experts available now in Live!

Get 1:1 Help Now