Align Dynamic Content with Twitter Bootstrap Fluid Scaffolding

[baileyspace]

I’m using bootstrap, and I’m displaying three rectangles in a row using Twitter Bootstrap’s fluid scaffolding. If my user is signed in, the first rectangle is removed. I’d like the remaining rectangles to center. I’ve tried a few things that seem hacky enough that I’m sure they’ll break (like setting the remaining rectangles to display: inline-block and text-align: center on .background-container). (p.s. I’m using Slim for the html, hence the slightly unusual formatting.)

.background-container
.row-fluid
.span12
.row-fluid
.span4 ng-hide=”currentUser.authenticated()”
p Content 1
.span8
.row-fluid
.span6
p Content 2
.span6
p Content 3

[baileyspace]

Sorry, that looks crappy. Once more:

.background-container
.row-fluid
.span12
.row-fluid
.span4 ng-hide=”currentUser.authenticated()”
p Content 1
.span8
.row-fluid
.span6
p Content 2
.span6
p Content 3

[NghiQuach]

You could do an span offset and preset if user is authenticated? so just add those 2 classes in the .span8?

[baileyspace]

Can you clarify what you mean by “preset”?

[NghiQuach]

Yeah nevermind about the preset, I just wanted to give out that your span would be centered with an offset of 2.
I just stated preset span of 2 to help better understand the diagram below. So correction I believe adding offset of span2 would center your div.

12 total spans
2 8 2

[baileyspace]

Thanks! I added some javascript so that the offset2 class is appended to the span8 div only when the user is logged in and the first of the 3 rectangles has been removed.

[Author]

Posts