Text align

[gimler]

I think it will be great to have 4 little typo classes to align a text for example to make a paragaph block or align buttons in a table cell

.tl { text-align: left }
.tr { text-align: right }
.tc { text-align: center }
.tb { text-align: block }

When you accept this i can make a pull request

[mdo]

We won't be adding this—it's one line of CSS no matter what, so there's not a huge tradeoff here either way.

[dallasclark]

It's so much easier to create these classes to use throughout the HTML

[itproject]

For that I have my custom.css always on place and no problem :)

[dallasclark]

that's what I've always had to use as well

[grex22]

BTW, "text-align: block"??

[keilmillerjr]

I like this idea. It's easy enough to implement myself though.

[internalsystemerror]

I dont understand the response? float:left, and float:right are also just one line of CSS yet there is still pull-left, pull-right?

[ckizer]

The response is that it's not a smart idea to start adding 1 line css styles to a library. This is something you should add to your own style.css

[johnnysloan]

Agree with internalsystemerror - they have pull-left and pull-right...

[ckizer]

pull-left and pull-right are styles that apply to any element. We're discussing centering text, which is done with text-align and doesn't affect the general flow. You can't strictly center a div with a catch all line of css. You have to use positioning, or floats and each case is different.

We're discussing the 1 line css of text-align.

––––––––––––––––––– Cheers,

Court Kizer kizer@me.com “We are the universe experiencing itself”

On Sep 29, 2012, at 6:55 PM, Sloanbone notifications@github.com wrote:

Agree with internalsystemerror - they have pull-left and pull-right...

— Reply to this email directly or view it on GitHub.

[internalsystemerror]

Thanks for the clarification. I must say that using bootstrap.less makes things a lot easier and I'm guessing this is the original intention for anyone who wants to make their own version of bootstrap.

Otherwise, having ready made styles would be handy for those who do not wish to modify bootstrap too much. In that case, I can see a lot of people having their own .alignCenter and .alignRight styles amoungst other things. Maybe an optional extra bootstrap-extras.css, made from a different extras.less file could be a compromise?

Then again, it doesn't have to be up to the bootstrap developers to think up and implement that. Is a tricky one but a good discussion none the less.

[ckizer]

So you should already have your own classes. Bootstrap is a framework. It covers lots of basics like vertical rhythm. You couldn't have a .center class that could be applied and have it work on multiple items. Often centering comes down to the way you lay out a page, and that means you'd have to have 3-4 different centering classes to get it to work. It depends on how the parent elements are positioned as to if it work work or not. The only way you can be certain of centering an object on the page across all types of positioning is with Javascript, and even then some of the solutions are overkill. I always have a style.css, and override.css. Override is where I add in anything to modify the default bootstrap classes based on the design needs of my current project.

Text is aligned left by default so I don't usually need this class. Personally I have a .tc {text-align: center;} added to my style.css for the times when I need center text like my sharing menu. Which you can view here: http://kzr.me/image/0z1p3r0f451P

––––––––––––––––––– Cheers,

Court Kizer kizer@me.com “We are the universe experiencing itself”

On Oct 1, 2012, at 12:53 PM, Gary Lockett notifications@github.com wrote:

Thanks for the clarification. I must say that using bootstrap.less makes things a lot easier and I'm guessing this is the original intention for anyone who wants to make their own version of bootstrap.

Otherwise, having ready made styles would be handy for those who do not wish to modify bootstrap too much. In that case, I can see a lot of people having their own .alignCenter and .alignRight styles amoungst other things. Maybe an optional extra bootstrap-extras.css, made from a different extras.less file could be a compromise?

Then again, it doesn't have to be up to the bootstrap developers to think up and implement that. Is a tricky one but a good discussion none the less.

— Reply to this email directly or view it on GitHub.

[ckizer]

Gary:

At issue is also that centering often requires multiple elements. So you need 2 divs each with different styles on them to created a centered element without positioning. So it's overkill for twitter to ad those. That's why there is no pull-center, it's specific to your project and the way you layout your content even with a standardized framework like twitter bootstrap.

If you want a simple solution I recommend googling "center element jQuery plugin". Since bootstrap is built on jQuery you can use this javascript anywhere. However I'm not a big fan of something requiring Javscript to layout my page.

––––––––––––––––––– Cheers,

Court Kizer kizer@me.com “We are the universe experiencing itself”

On Oct 1, 2012, at 12:58 PM, Court Kizer kizer@me.com wrote:

So you should already have your own classes. Bootstrap is a framework. It covers lots of basics like vertical rhythm. You couldn't have a .center class that could be applied and have it work on multiple items. Often centering comes down to the way you lay out a page, and that means you'd have to have 3-4 different centering classes to get it to work. It depends on how the parent elements are positioned as to if it work work or not. The only way you can be certain of centering an object on the page across all types of positioning is with Javascript, and even then some of the solutions are overkill. I always have a style.css, and override.css. Override is where I add in anything to modify the default bootstrap classes based on the design needs of my current project.

Text is aligned left by default so I don't usually need this class. Personally I have a .tc {text-align: center;} added to my style.css for the times when I need center text like my sharing menu. Which you can view here: http://kzr.me/image/0z1p3r0f451P

––––––––––––––––––– Cheers,

Court Kizer kizer@me.com “We are the universe experiencing itself”

On Oct 1, 2012, at 12:53 PM, Gary Lockett notifications@github.com wrote:

Thanks for the clarification. I must say that using bootstrap.less makes things a lot easier and I'm guessing this is the original intention for anyone who wants to make their own version of bootstrap.

Otherwise, having ready made styles would be handy for those who do not wish to modify bootstrap too much. In that case, I can see a lot of people having their own .alignCenter and .alignRight styles amoungst other things. Maybe an optional extra bootstrap-extras.css, made from a different extras.less file could be a compromise?

Then again, it doesn't have to be up to the bootstrap developers to think up and implement that. Is a tricky one but a good discussion none the less.

— Reply to this email directly or view it on GitHub.

[internalsystemerror]

Sorry, I'm only referring to the request to have for example:

.tc { text-align: center; }

.tr { text-align: right; }

and whether it should be included in bootstrap as helper classes like .pull-left and .pull-right

[ckizer]

It definitely shouldn't be included. It's one line css :-) the flow is to the left, if you need others that should be considered customization ;-)

––––––––––––––––––– Cheers,

Court Kizer kizer@me.com “We are the universe experiencing itself”

On Oct 1, 2012, at 1:25 PM, Gary Lockett notifications@github.com wrote:

Sorry, I'm only referring to the request to have for example:

.tc { text-align: center; }

.tr { text-align: right; }

and whether it should be included in bootstrap as helper classes like .pull-left and .pull-right

— Reply to this email directly or view it on GitHub.

[mariusbutuc]

To center the text, one can always use Bootstrap's built-in .pagination-centered.
Semantically it's a poor choice, but that's all that it does:

.pagination-centered {
  text-align: center;
}

[intellix]

I was just attempting to align some text within my table. I believe that amounts/currency should always be aligned right but there's not really any way to do it without adding extra stuff.

Shouldn't the text-align classes apply !important to take precedence over anything else, with them being helper classes that we add to achieve on top of standard applied styling?