Went back to the bootstrap basics

HTML & CSS
1

so still getting to know this system. it is pretty neat actually.
But how do i get rid of those margins so the the span can butt right next to each other?
i put in my .css a

*{
margin:0px;
padding:0px;
}

also tried to put it in the spans themselves.
thought it would override the bootstrap.min.css obviously it didn’t.
So am I stuck w/them?
Thx
D

2

We could tell you in a jiff what’s causing that gap with a link to an actual page. If you are working locally, you could post a working example on a site like codepen.io.

3

thank you Ralph will go check that out. have seen code pen a few times but never in depth.
looks kinda interesting actually
here it is if I did it correctly
http://codepen.io/pdxSherpa/full/DFaql
Thank you
D

4

The pattern that you are using apparently expects gutters between containers. Thus, bootstrap is applying a margin-left.


DFaql (line 275)
[class*="span"] {
    float: left;
    [color=red]margin-left: 20px;[/color]
    min-height: 1px;
}

DFaql (line 371)
.row-fluid [class*="span"] {
    -moz-box-sizing: border-box;
    display: block;
    float: left;
    [color=red]margin-left: 2.12766%;[/color]
    min-height: 30px;
    width: 100%;
}

Looks like you need to read the documentation and find out how boostrap works.

You also need to understand a little CSS… like Cascade and specificity.

What browser are you using? Most have some form of developers tools built in that help you identify the cause of behaviors like this, but if you do not know how CSS works and do not know how your product (bootstrap) applies CSS… you’re at a disadvantage.

5

Yes, Ron has pointed to the error. I agree with him that if you are going to use a framework, you need to do plenty of research into how it works. Otherwise, it’s SO much easier to start with a blank canvas than to start out with a mass of code that you have to wade through and hack around to get what you want. (It’s like trying to build a house from a pile of tornado wreckage, instead of starting fresh with a clean patch of land.)

6

Good morning guys!
I use chrome & saw the margin by using “inspect element” feature. I also use firefox but prefer chrome for looking at elements/info.
I figured the margin was set in the original boostrap stylesheet. But by virtue of the “cascading” feature of css my new styling for that span should have over written it?
Yes I probab (and will try to do so) should spend more time on the documentation. But kinda multitasking. going over the tutorial/improving on it and seeing what haps. And while the tutorials are pretty good they don’t always cover stuff that comes up…like that wide gutter.
Cheers all, have great friday.
D

7

Also I guess I was worried about thouching the original stylesheet. but in this case I would just grab the bits RonPat pointed out above, and tweak them. put them in my own css and that should over ride it.
Do you guys have a favorite method?
D

8

If both rules have the same specificity, whichever the browser sees last will prevail.

9

Thank you Ralph.
hence i was not “specific” enough.