Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make aligning text responsive #11292

Closed
bigware opened this Issue Oct 30, 2013 · 12 comments

Comments

Projects
None yet
9 participants
@bigware
Copy link

bigware commented Oct 30, 2013

text-left, text-center, and text-right should have a way to be responsive. Once of the great things about bootstrap is the responsive grid system. May times during coding though, I found I want to center a div when in larger screens, but left or right align it when in xs.

Here is css code I believe would do the trick. The below code will allow you specify when you do or dont want to set text alignment.

.text-left-not-xs, .text-left-not-sm, .text-left-not-md, .text-left-not-lg {
    text-align: left;
}
.text-center-not-xs, .text-center-not-sm, .text-center-not-md, .text-center-not-lg {
    text-align: center;
}
.text-right-not-xs, .text-right-not-sm, .text-right-not-md, .text-right-not-lg {
    text-align: right;
}
.text-justify-not-xs, .text-justify-not-sm, .text-justify-not-md, .text-justify-not-lg {
    text-align: justify;
}

@media (max-width: 767px) {
    .text-left-not-xs, .text-center-not-xs, .text-right-not-xs, .text-justify-not-xs {
        text-align: inherit;
    }
    .text-left-xs {
        text-align: left;
    }
    .text-center-xs {
        text-align: center;
    }
    .text-right-xs {
        text-align: right;
    }
    .text-justify-xs {
        text-align: justify;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .text-left-not-sm, .text-center-not-sm, .text-right-not-sm, .text-justify-not-sm {
        text-align: inherit;
    }
    .text-left-sm {
        text-align: left;
    }
    .text-center-sm {
        text-align: center;
    }
    .text-right-sm {
        text-align: right;
    }
    .text-justify-sm {
        text-align: justify;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .text-left-not-md, .text-center-not-md, .text-right-not-md, .text-justify-not-md {
        text-align: inherit;
    }
    .text-left-md {
        text-align: left;
    }
    .text-center-md {
        text-align: center;
    }
    .text-right-md {
        text-align: right;
    }
    .text-justify-md {
        text-align: justify;
    }
}
@media (min-width: 1200px) {
    .text-left-not-lg, .text-center-not-lg, .text-right-not-lg, .text-justify-not-lg {
        text-align: inherit;
    }
    .text-left-lg {
        text-align: left;
    }
    .text-center-lg {
        text-align: center;
    }
    .text-right-lg {
        text-align: right;
    }
    .text-justify-lg {
        text-align: justify;
    }
}
@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Oct 30, 2013

Might end up getting rejected per #11259.

@mdo

This comment has been minimized.

Copy link
Member

mdo commented Oct 30, 2013

Yeah, we're not doing this. Thanks though.

@mdo mdo closed this Oct 30, 2013

@BrendanBerkley

This comment has been minimized.

Copy link

BrendanBerkley commented Jan 31, 2014

Hey, I know it's not a democracy here, but thought I'd at least voice my opinion here that this would be a welcome feature. Working on a project with Bootstrap now, and there's been a few times where something makes sense as flush left at 1200px but makes more sense to be centered at the mobile level.

No worries though, I can probably just add this in on my own like I did the hidden-inline stuff (which also has been relevant to me!) That is, as long as @bigware is fine with me using his code 😄

Love your work guys, cheers

@XhmikosR

This comment has been minimized.

Copy link
Member

XhmikosR commented Jan 31, 2014

I would totally use this myself too. I end up not using the built in classes due to this issue.

@bigware

This comment has been minimized.

Copy link
Author

bigware commented Jan 31, 2014

Why should I have a problem if you use it? I'd love it to be available to everyone. Not only that, I just updated my original post to support "text-justify", since it is now supported by bootstrap in 3.1.

@mdo

This comment has been minimized.

Copy link
Member

mdo commented Jan 31, 2014

We don't aim to solve every problem—doing so would just add bloat to the framework for tons of other folks. I'm generally super hesitant to add anything these days only because there is already so much here.

These kind of extensions are great add-ons to put in another repo on GitHub. Tell folks about, get feedback, gauge usage, and extend Bootstrap. We love that stuff.

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Feb 1, 2014

@mdo Then it kinda sucks that we don't have twbs/bootstrap-expo#424

@mdo

This comment has been minimized.

Copy link
Member

mdo commented Feb 1, 2014

@cvrebert Agreed! I'm working on the Expo at the moment to support that.

@k80

This comment has been minimized.

Copy link

k80 commented Feb 2, 2014

I am using this, thanks @bigware

@bphilipnyc

This comment has been minimized.

Copy link

bphilipnyc commented Mar 17, 2014

@bigware, I know that this may not make it to Bootstrap officially, but you just made my day.

gburton added a commit to gburton/Responsive-osCommerce that referenced this issue Mar 20, 2014

CSS - Responsive Text Alignment
twbs/bootstrap#11292

Allows us to target xs, sm, md, lg and have the ability to swap display
of text (left, right, centre) appropriately.
@grex22

This comment has been minimized.

Copy link

grex22 commented May 20, 2014

I love this, @bigware -- It seems like every home page I develop out has a need for this exact functionality at phone / tablet widths as things start stacking in the grid. Beautifully done.

@gae123

This comment has been minimized.

Copy link

gae123 commented Jun 8, 2014

+1 thank you @bigware

@twbs twbs locked and limited conversation to collaborators Jun 9, 2014

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.