Having some bootstrap 3 layout issues

HTML & CSS
1

I am in process of upgrading one of my apps from bootstrap 2 to bootstrap 3 and having a problem trying to get some of the layouts working.

here is a screenshot of my issue: http://awesomescreenshot.com/01a4khpb3f
note this image only stays online for 3 days

everything from client group and below is having issues as you can see.
I have tried 20 different ways of doing this, but still the same issue.
Perhaps someone would be so kind as to point out my mistake.
here is the generated html

2

Couldy ou be a bit more specific as to what issues you are having? What’s the desired display?

3

the content below “client group” is not being positioned properly which really should be blatently obvious if you look at the screenshot, , it is too far left and not being padded/positioned as it should be.
The desired display is for the correct formatting/layout/padding etc as one would expect, rather than everything shifting over to the left.

4

No - it’s obviously not obvious since I felt the need to ask.

Perhaps you wanted that on the same line as the above content. Perhaps you wanted it further over.

We are not mind readers. Perhaps there are other issues which I do not even see because I do not know what you want. I’m not going to scan the entire page looking for minute details.

“.form-horizontal .form-group” has a negative lefet and right margin which is pulling it over. However it stlil won’t be lined up because those check items above it have 20px left padding on “.checkbox-inline, .radio-inline”

So you’ll need to give the .controls{padding-left:20px;} probably.

5

More correctly, as you would expect. When it comes to design, to each his own.

Huh, I didn’t see any CSS

Anyway, I tried

div.controls select, div.controls span.help-block { 
    margin-left: 3em;
}

which looked better than without anything to me.
* note, I tend to overdo it with selector specificity

6

Ah well it’s loading bootstrap CSS so that’s probably why you’re not seeing any CSS in the fiddle.
Either way it needs some margin or padding. If yours works Mitt, the OP can feel free to use that.

The specificity of your rules seems fine to me TBH. Not overly specific or abstract.

7

Ah, I didn’t think to expand that to see what was there. Not that I’d be much good with a “min” file anyway.

I like using em but if everything else is using px it’s probably better to use px
Else there could be issues with text resizing messing up the alignment.

1 Like
8

perhaps this screenshot will help you
http://screencast.com/t/9Bd1aQoHZEf

Although I did ask my wife and 8 year old son if they could spot the issue, and they both thought it was obvious too, so i’m confident that no mind reading skills are required TBH :smile:

9

it uses bootstrap, this is the point, you shouldn’t have to add your own padding and margins, as this is all built into the bootstrap classes for a standardised output. I have other pages that work just fine, but cannot see why this one doesn’t.
I’m not sure why you would it is only me that would expect twitter bootstrap to output in the standardised way that twitter bootstrap is supposed to output, this seems like very strange thing to say ? If that was the case then it would completely defeat the point of why boostrap exists or indeed any such framework.

10

Hi,

You are using the ‘form-group’ class on a horizontal form and in that mode the ‘form-group’ class behaves in the same way as .row (it has negative left and right margins). That means that the very next elements must be a column definition just as you would do with rows.
If you follow the bootstrap documentation then you would have a structure like this:

<form class="form-horizontal">
  <div class="**form-group**">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>

etc…

Note that you need a wrapper for the inputs as you can’t apply those column classes directly to the inputs themselves.

Everywhere that you have used .form-group then you need to have the children wrapped in the appropriate column class adding up to the correct number of columns as you would do with .row etc.

2 Likes
11

solved. I had a closing div in the wrong place…

13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.