Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialKonrad Pilch
2,435 PointsHow do i align .pull-left to align center in bootstrap after xxx width?
How do i align .pull-left to align center in bootstrap after xxx width?
2 Answers
jag
18,266 Points.mobile-center{
float:none !important;
margin: 0 auto
}
You needed the !important declaration. Also checking your website does appear to show the .mobile-center class. The two classes that show up is contact-footer & pull-right.
jag
18,266 Points<style>
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}
.class{
float:left;
}
@media screen and (min-width: #px{
.class{
float:none;
margin:0 auto
}
}
</style>
<div class="pull-left">...</div>
<div class="pull-right">...</div>
<!-- Switch into this -->
<div class="class">...</div>
Since .pull-* has !important, I suggest making a separate class that floats and a media query that makes.
What element are you trying to float & center? Hopefully this works for you. Bootstrap has also .center-block but changing styles would be done in media query.
An alternative would be using JavaScript to remove/add classes.
Konrad Pilch
2,435 PointsIm trying to float this to center
<footer class="footer">
<div class="container-footer">
<div class="row">
<div class="col-xs-12 col-sm-4">
<ul class="list-inline footer-social">
<li><a href=""><i class="fa fa-facebook"></i></a></li>
<li><a href=""><i class="fa fa-linkedin"></i></a></li>
<li><a href=""><i class="fa fa-twitter"></i></a></li>
</ul>
</div><!-- col-* -->
<div class="col-xs-12 col-sm-4 text-center footer-name">
Copyright © <span class="orange">Aurelian Spodarec</span> <?php echo date('Y'); ?>. All Rights Reserved
</div><!-- col-* -->
<div class="col-xs-12 col-sm-4">
<div class="contact-footer mobile-center pull-right">
<a href=""><i class="fa fa-envelope"></i>Contact Me</a></div><!-- /contact-footer -->
</div><!-- col-* -->
</div><!-- /row -->
</div><!--content-->
</footer>
I mean you know pull-right, wheres mobile-center, the COntact Me. Actually, its here on thiswebsite.
.mobile-center{
float:none;
margin:0 auto
}
Konrad Pilch
2,435 PointsKonrad Pilch
2,435 PointsThank you very much. I just added !important. I did try this before i posted this question, but it didnt work, i must did somethign wrong. Well, not it works. Learned new thing :)
Oh, right, that website is not updated, i did it on my localhost.
Btw, what do you think about all this code? or rather, if you would improve the code, what would you do? if you have time.
jag
18,266 Pointsjag
18,266 PointsIf we are talking about just this piece of code. Adding a margin would help spacing.
If we are talking about the footer content then it's all good and organized except for the contact me element. Removing the padding & matching the line-height to the element height centers it perfectly.
But hey the style is up to you. The website looks great can't wait to see how it will look like when it's finished.
Konrad Pilch
2,435 PointsKonrad Pilch
2,435 PointsThank you :)
One more thing, what do you think about this piece of code?
<div class="col-xs-12 col-sm-4 text-center footer-name">
I don't know, but i have strange feeling for this. Like if i should put the center and ft-name in another div. Lazy to write the class names xD Im trying to make the code as best as i can, few weeks ago my code was super messy, i didnt even use the calss row the right way lol and more.. iv read some articles, studied other website and its better. Now im trying to make it 'perfect' or as tbest as i can.
And thank you :D
jag
18,266 Pointsjag
18,266 PointsAdding styles to the columns allows it as long as other styles don't mess up the grid system. So if it works than it's just fine. Indeed the best practice would be to separate them just incase you want to modify the element in such a way that would mess the grid system up.
Konrad Pilch
2,435 PointsKonrad Pilch
2,435 PointsThank you! Really helped :)
jag
18,266 Pointsjag
18,266 PointsYour welcome!