PLEASE, if you do use Bootstrap for just about everything be courteous to your audience and change up some of the basic variables so it doesn’t look all the same! I just tested a really cool app and was SO disappointed that it used bootstrap. I’m sick of seeing the same damn buttons. I’m sick of seeing that same damn toolbar up top. It’s driving me crazy. And you know what? I use Bootstrap right now, as we speak (not on this site). Why? First, it’s prettier than Foundation. Second, I need something that I can develop quickly in without having to write any styles, my current work focuses on results rather than prettiness and UI (for all I know, they wouldn’t mind straight HTML without CSS but that would make working on it hell for me). Third, it has the perfect less/css organization for a large project. You know what I did? I used BootTheme. Yeah, that’s right. and I played around with it, used the company’s colors, changed up some of the basic variables for shadows, borders, button effects. UPDATE: boot theme was recently UPGRADED to 2.1.0, awesome 🙂 Have trouble coming up with a damn color scheme? You’re not the only one.

They have a “customize” page! No shit. really. You see it? Yeah? USE IT. It doesn’t take a damn genius. Or just use BootTheme and copy their var setup and implement it in the newest Bootstrap version. NOT THAT HARD. Furthermore. You know those icons bootstrap uses? Let’s expand on that and use:

Font Awesome because holy crap new icons with minimal 5 minute setup. On top of that, now that you don’t have Bootstrappy icons, you have 50 more icons (or however many, I didn’t count or check, or bothered with that). The only step left that will really make your non-bootstrap bootstrap site shine is a sweet, minimalist background:

Subtle Patterns is THE PLACE to go to for quick, beautiful patterns. Okay, so now that you’ve spent some extra time, and you’re pissed at me for making you do all that work and for screaming and yelling at you: Take a screenshot of your creation and post it here! I’d love to see what you came up with and how it looks. And if you developed or are developing a self-hosted app or website using a modified bootstrap theme. I’d love to see that too! Who knows, maybe I’ll round up all the submissions and make a post about it! If you’re too lazy to make your own stuff, just google “Bootstrap Themes”.

Extras (updated)

After writing this article and having it take off with tens of thousands of readers, I found a few NEW things you can do and that will help out:

adjust shadow settings. We’ve come to expect a certain amount of shadow from bootstrap. Same with gradients. If you adjust it (or get rid of it like Kippt did in it is nav), a lot of the “bootstrap-y” stuff will follow along

change the font! There’s google fonts for that 😉 Personal recommendations: Droid Sans, Ubuntu, Open Sans, the PT family of fonts, Lato, and Pacifico (for that Pinterest-like headline/logo).

Truth Be Told

I’m not asking for that much. I’m a developer too. And I know deadlines, and I know that if you get an awesome idea that needs back-end work, you want to focus on that and not on the damn styles. That’s quite fine. If you don’t like my process, you’re welcome to ignore it. If you do like it, please be nice to the world and add some variety from the now-common Bootstrap App world (someone should make a site like that btw…). It takes 25-30 minutes altogether. Probably less. Want to jump into coding? That’s fine! Start with the basic bootstrap css file and when you’re done, REPLACE IT. W00t! I think I might start making a bootstrap theme library (for free) that has LITTLE variations but powerful effects and changes just so you guys don’t have to work too much 😉

A little bit of self promotion 😉

Don’t want to do it? Fine! Hire me. Seriously. You see that button on the right? Just click on it, fill out the form, and hire me for this. If you’re a dev and you REALLY don’t want to deal with having to set everything up, I’ll make a quick bootstrap theme for you, packaged up with awesome icons, extended functionality and a pretty color scheme. Think about it. I’m a designer, I’m a developer, just like you. And if you have some extra work that you just can’t take care of, there’s outsourcing. If you go to my blog and look up top, what does it say? That’s right, this is an OUTSOURCING blog. Anyways, good luck! 🙂

Pro-tip: try not to use white typeface on a light background, such as the green in the header bar!

Alan Meaney

This post would be so much better if you could include the example you kept referring to.

I can understand if it was something private for a client but make the effort and put something together otherwise this post is just ‘I can build something so much better than bootstrap but I can’t show you’.

Have we arrived at ‘Stealth mode open source themes’?

Thanks for the color scheme designer, I already use subtle patterns and font awesome on my bootstrap projects.

I apologize for not being able to show you my project but I will make sure to create an extra example in my future articles. It’s not an open source project that’s why.

Also, if you use color scheme designer, try out Kuler or Colourlovers! 🙂

Alan Meaney

This post would be so much better if you could include the example you kept referring to.

I can understand if it was something private for a client but make the effort and put something together otherwise this post is just ‘I can build something so much better than bootstrap but I can’t show you’.

Have we arrived at ‘Stealth mode open source themes’?

Thanks for the color scheme designer, I already use subtle patterns and font awesome on my bootstrap projects.

then please create a new bootstrap custom theme which is not related to your project. It only takes 25 – 30 minutes for you to finish it… ah, sorry for being rude. I just want to learn more about bootstrap customization, learning from examples. I don’t know anything about this awesome framework.

If this were so easy, so quick, could you not spend another 25 minutes to come up with a theme to use in the post? Would have made all the time people spent reading your post worthwhile.

olasnavigator

then please create a new bootstrap custom theme which is not related to your project. It only takes 25 – 30 minutes for you to finish it… ah, sorry for being rude. I just want to learn more about bootstrap customization, learning from examples. I don’t know anything about this awesome framework.

I’ve taken the opposite route for my project http://iwaat.com. The HTML/CSS is all done from scratch with several elements stolen from Bootstrap (ex. highlighting around form fields). It also uses a background image from subtle patterns which really made all the difference vs. plain white/grey. I’m sure this workflow took longer than building off of Bootstrap from the start but I like the way it turned out.

I’ve taken the opposite route for my project http://iwaat.com. The HTML/CSS is all done from scratch with several elements stolen from Bootstrap (ex. highlighting around form fields). It also uses a background image from subtle patterns which really made all the difference vs. plain white/grey. I’m sure this workflow took longer than building off of Bootstrap from the start but I like the way it turned out.

And not releasing your own example because “you’re under contract” is the lamest most self-important douche bag response to that criticism anyone could possibly think of. Its not like this is hard. Customize it a little so its different from “what you’re under contract for” and stop acting like you have time to write articles, but are “too important to post your own examples”

And not releasing your own example because “you’re under contract” is the lamest most self-important douche bag response to that criticism anyone could possibly think of. Its not like this is hard. Customize it a little so its different from “what you’re under contract for” and stop acting like you have time to write articles, but are “too important to post your own examples”

Yes the customization tool is cool, but must be used in a wise way: there are a _lot_ of facets you have to deal with to have something polished as the default Bootstrap. Anyway, you can customize things in a progressive way: just add your custom.css and do the changes you think you need. I did it for my site, http://www.codingnot.es, and I think I got something good with a tenth of the effort.

SoftCC

Last time, a post appear on hacker news that suggest everyone should use bootstrap despite it look similar across lot of site but it save time to figure anything else when navigate the site, now this post suggest customize bootstrap theme, what next will appear? someone who hate bootstrap? and next? debate whether anyone should use bootstrap? and next?

Yes the customization tool is cool, but must be used in a wise way: there are a _lot_ of facets you have to deal with to have something polished as the default Bootstrap. Anyway, you can customize things in a progressive way: just add your custom.css and do the changes you think you need. I did it for my site, http://www.codingnot.es, and I think I got something good with a tenth of the effort.

SoftCC

Last time, a post appear on hacker news that suggest everyone should use bootstrap despite it look similar across lot of site but it save time to figure anything else when navigate the site, now this post suggest customize bootstrap theme, what next will appear? someone who hate bootstrap? and next? debate whether anyone should use bootstrap? and next?

I don’t believe I’m better than everyone. I’m a pretty nice person as well. Refer to my other articles.

Cory Mawhorter

Isn’t the point of bootstrap to have a consistent UX (::shivers::)? On the desktop, a button is a button is a button. On the web — not so much. I like that everyone uses the same icons. I like that everyone uses the default look. I like that I know how to interact with your creation before I’ve even landed on the site.

This has been something the web has been dying for since the early days of http://www.webpagesthatsuck.com/
I guess that as with all things web, you should make your decisions based on who your audience is. Personally though, I’m all for getting back to a button being a button. Not every design decision has to be revolutionary, and I think this quest to have a powerful design sometimes overlooks the point: these websites are for your customers/visitors, and not for you.
Websites are not works of art. They are hammers. Sure you can build a stylish hammer, but at the end of the day, if it doesn’t put a nail in wood, you’ve failed.

I mean, I agree with you as far as the websites suck goes. Bootstrap is a HUGE step up from 90% of the sites on the web.

I’m not talking revolutionary here, but I am also talking distinction. A car is a car, for example, and no one is remaking laws of aerodynamics or using wheels or a steering wheel (just yet) but still, every brand has its own unique design that caters to a specific audience. Sure, they all have a different engine and provide you with a different experience (you’ve got a truck, and #1 priority for that truck would be hauling, not looking pretty) and fulfill different requirements.

What’s happening here is someone releasing a stock “open sourced” Honda Civic (nice and efficient car) and then a hundred companies jumping on that Civic, putting their engine in it and calling it a new car so to speak. No one can tell the difference between them at first glance, really.

Maybe that analogy is not perfect, probably far from it.

But another, probably stronger argument, is branding. Without being able to differentiate from competitors, you can’t survive. Even craigslist with its crummy UI works very well and everyone knows it for what it is. App companies target app people, a lot of them know bootstrap, a lot of them know the companies just used a shortcut and subconsciously will just herd them together with the rest of the lot.

Idk if I’m making sense here.

At the root of this, I just personally dislike those buttons :/

Cory Mawhorter

I’m not sure your analogy is accurate as cars are effing expensive so we put up with the wildly different (sometimes terrible) design decisions. People will pay crazy amounts of money for a sports car that isn’t a very good car for the job it will be doing — commuting. IMO, I think a tool analogy makes more sense but talking about which analogy works better is kindof pointless, I suppose.

What I do believe, though, is that having certain core UI elements all look the same across the entire web is almost certainly a good thing for everyone except designers.

That said… that “Buy” button is special, and it is probably acceptable to make look snazzy… but drawing the line on what is acceptable to make look different and what should look “just like everybody else” is a tough decision that should be at the forefront of all our minds. And right now, too often we’re going with “look different”, instead of “work better”.

Additionally, a benefit of this ideology is that the more things look the same on the web, the more the elements that look different will pop.

“At the root of this, I just personally dislike those buttons”

I think the task then, is for you to create a better looking bootstrap that suits your design needs, for the public to use. (I think that sounds dickish but it’s not meant to be.)

It doesn’t matter what things look like, as long as there is more similarity between everything. IMO, what is desperately needed is a Design Standards body for the web, just like the w3c is for technologies.

and I thought I was alone in this belief. I love the fact that sites are becoming bootstrappy or YUI looking. No guessing, no egos, no BS, just let me do what I came here to do or read what I came here to read.

IHateRegisteringToComment

Isn’t the point of bootstrap to have a consistent UX (::shivers::)? On the desktop, a button is a button is a button. On the web — not so much. I like that everyone uses the same icons. I like that everyone uses the default look. I like that I know how to interact with your creation before I’ve even landed on the site.

This has been something the web has been dying for since the early days of http://www.webpagesthatsuck.com/
I guess that as with all things web, you should make your decisions based on who your audience is. Personally though, I’m all for getting back to a button being a button. Not every design decision has to be revolutionary, and I think this quest to have a powerful design sometimes overlooks the point: these websites are for your customers/visitors, and not for you.
Websites are not works of art. They are hammers. Sure you can build a stylish hammer, but at the end of the day, if it doesn’t put a nail in wood, you’ve failed.

I mean, I agree with you as far as the websites suck goes. Bootstrap is a HUGE step up from 90% of the sites on the web.

I’m not talking revolutionary here, but I am also talking distinction. A car is a car, for example, and no one is remaking laws of aerodynamics or using wheels or a steering wheel (just yet) but still, every brand has its own unique design that caters to a specific audience. Sure, they all have a different engine and provide you with a different experience (you’ve got a truck, and #1 priority for that truck would be hauling, not looking pretty) and fulfill different requirements.

What’s happening here is someone releasing a stock “open sourced” Honda Civic (nice and efficient car) and then a hundred companies jumping on that Civic, putting their engine in it and calling it a new car so to speak. No one can tell the difference between them at first glance, really.

Maybe that analogy is not perfect, probably far from it.

But another, probably stronger argument, is branding. Without being able to differentiate from competitors, you can’t survive. Even craigslist with its crummy UI works very well and everyone knows it for what it is. App companies target app people, a lot of them know bootstrap, a lot of them know the companies just used a shortcut and subconsciously will just herd them together with the rest of the lot.

Idk if I’m making sense here.

At the root of this, I just personally dislike those buttons :/

IHateRegisteringToComment

I’m not sure your analogy is accurate as cars are effing expensive so we put up with the wildly different (sometimes terrible) design decisions. People will pay crazy amounts of money for a sports car that isn’t a very good car for the job it will be doing — commuting. IMO, I think a tool analogy makes more sense but talking about which analogy works better is kindof pointless, I suppose.

What I do believe, though, is that having certain core UI elements all look the same across the entire web is almost certainly a good thing for everyone except designers.

That said… that “Buy” button is special, and it is probably acceptable to make look snazzy… but drawing the line on what is acceptable to make look different and what should look “just like everybody else” is a tough decision that should be at the forefront of all our minds. And right now, too often we’re going with “look different”, instead of “work better”.

Additionally, a benefit of this ideology is that the more things look the same on the web, the more the elements that look different will pop.

“At the root of this, I just personally dislike those buttons”

I think the task then, is for you to create a better looking bootstrap that suits your design needs, for the public to use. (I think that sounds dickish but it’s not meant to be.)

It doesn’t matter what things look like, as long as there is more similarity between everything. IMO, what is desperately needed is a Design Standards body for the web, just like the w3c is for technologies.

and I thought I was alone in this belief. I love the fact that sites are becoming bootstrappy or YUI looking. No guessing, no egos, no BS, just let me do what I came here to do or read what I came here to read.

It’s more complicated than that. Bootstrap provides you with not only a pretty good grid system but it covers basics of typography and vertical rhythm. It also addresses styling of most html styling so you’re always safe using something and knowing it’ll look better than unstyled default. You get a myriad of styles for tables, lists, and so on.
On top of that, you have javascript plugins that work along with that style structure.

Of course you can always write your own stuff. And I did. I have a LESS/SASS (in both flavors) framework that I exclusively use on WordPress and otherwise sites. I’ve used bootstrap plenty of times but it was mostly on projects that were not initiated by me or on my current project that I felt like would benefit from bootstrap. Bootstrap really shines when you use it for styling a dashboard/admin side of stuff 😉

It’s more complicated than that. Bootstrap provides you with not only a pretty good grid system but it covers basics of typography and vertical rhythm. It also addresses styling of most html styling so you’re always safe using something and knowing it’ll look better than unstyled default. You get a myriad of styles for tables, lists, and so on.
On top of that, you have javascript plugins that work along with that style structure.

Of course you can always write your own stuff. And I did. I have a LESS/SASS (in both flavors) framework that I exclusively use on WordPress and otherwise sites. I’ve used bootstrap plenty of times but it was mostly on projects that were not initiated by me or on my current project that I felt like would benefit from bootstrap. Bootstrap really shines when you use it for styling a dashboard/admin side of stuff 😉

AndrewF

Just read over the comments, and I’m shocked by the unbridled negativity. Thanks for the article, and the list of useful links.

I understand the critique on using the default styles and understand the closed source rationale for not showing examples { also a full time dev of non open projects } but one key thing I’m not seeing in these comments is using LESS?? Bootstrap is built with it and true customization starts by enhancing what the “framework” offers.. you don’t change the core of WordPress for example, you customize the output of its functions, filters and hooks to extend it.. if read the documentation and download the full version of bootstrap { https://github.com/twitter/bootstrap }, use tools { http://incident57.com/less/ or http://winless.org } to really use the framework the stated complaints disappear. The point of a framework is to simplify common tasks such as layout { grids } and UI elements { forms, tables etc } bootstrap provides the basics to speed up projects.. customize and enjoy don’t hate on someone for jumping the gun on a gripe.

I’m working on a very thorough post to create a pretty neat Bootstrap theme. Hopefully this will appease the masses. It may take me a while however.

So yes, LESS makes everything much simpler and the tools I listed take it a step further. The advantage of LESS and compiling bootstrap or even using Boottheme to do all this for you is the ability to have a customized version of Bootstrap that doesn’t put you in the mold with everyone else.

The framework does help out a lot with the behind-the-scenes stuff and I won’t take that away. The grid is great, the tablet looks great, forms work well and so on. It’s a cool tool if you use it well.

pdxOllo

I understand the critique on using the default styles and understand the closed source rationale for not showing examples { also a full time dev of non open projects } but one key thing I’m not seeing in these comments is using LESS?? Bootstrap is built with it and true customization starts by enhancing what the “framework” offers.. you don’t change the core of WordPress for example, you customize the output of its functions, filters and hooks to extend it.. if read the documentation and download the full version of bootstrap { https://github.com/twitter/bootstrap }, use tools { http://incident57.com/less/ or http://winless.org } to really use the framework the stated complaints disappear. The point of a framework is to simplify common tasks such as layout { grids } and UI elements { forms, tables etc } bootstrap provides the basics to speed up projects.. customize and enjoy don’t hate on someone for jumping the gun on a gripe.

I’m working on a very thorough post to create a pretty neat Bootstrap theme. Hopefully this will appease the masses. It may take me a while however.

So yes, LESS makes everything much simpler and the tools I listed take it a step further. The advantage of LESS and compiling bootstrap or even using Boottheme to do all this for you is the ability to have a customized version of Bootstrap that doesn’t put you in the mold with everyone else.

The framework does help out a lot with the behind-the-scenes stuff and I won’t take that away. The grid is great, the tablet looks great, forms work well and so on. It’s a cool tool if you use it well.

Great post – this has some time savers I’ve been looking for. As a developer I need help with the UI end of things and Bootstrap was a great place to start. Your review will help me kick it up a notch.

David Robbins

Great post – this has some time savers I’ve been looking for. As a developer I need help with the UI end of things and Bootstrap was a great place to start. Your review will help me kick it up a notch.

I was searching for some references about TB and if the projects are Twitter look and feel. I found http://www.byfuss.com and is really nice because even using TB the layout doesn’t have connections with Twitter in most of the parts.

John Caldman

I was searching for some references about TB and if the projects are Twitter look and feel. I found http://www.byfuss.com and is really nice because even using TB the layout doesn’t have connections with Twitter in most of the parts.

I’m quite surprised at the negative responses this article is receiving. Sure it may be “rude” and pointless that the author didn’t provide any examples himself, but calling that out is equally pointless. The author did provide useful insights for customizing your Bootstrap further in easy steps. And for that, thank you for the article.

Tina Ng

I’m quite surprised at the negative responses this article is receiving. Sure it may be “rude” and pointless that the author didn’t provide any examples himself, but calling that out is equally pointless. The author did provide useful insights for customizing your Bootstrap further in easy steps. And for that, thank you for the article.

Mike

has anyone mentioned how you get different colour sections on a page (that have no gutter left or right so need to be fluid 100%)
for example take a page say 3000px deep,images sliced and placed, it has a white background, however I would to some sections say 3 (100% width x 400px height) that have a light grey background strip running across behind the content within the page, so the sections are defined with coloured blocks

Mike

has anyone mentioned how you get different colour sections on a page (that have no gutter left or right so need to be fluid 100%)
for example take a page say 3000px deep,images sliced and placed, it has a white background, however I would to some sections say 3 (100% width x 400px height) that have a light grey background strip running across behind the content within the page, so the sections are defined with coloured blocks

Stehen

Antonin, Love the article and the tone. Sometimes people aren’t paying attention, and you woke me up!
Thanks for everything you’ve put together here, just what I needed. After programming for two months on a project built on the Yii framework, I needed a boost putting together a nice look for the front end, and what you have here will do the trick.

Stehen

Antonin, Love the article and the tone. Sometimes people aren’t paying attention, and you woke me up!
Thanks for everything you’ve put together here, just what I needed. After programming for two months on a project built on the Yii framework, I needed a boost putting together a nice look for the front end, and what you have here will do the trick.

Neil

I really like Boottheme, but I’m having trouble using it with Font-Awesome…I can’t customize Boottheme base css to disable icons…anyone got any suggestions?

you need to remove anything that has to do with sprites. If you’re using bootTheme just look where the icons css starts. Replace it with what you download from font-awesome. Make sure your path to font awesome is correct! 🙂

Neil

I really like Boottheme, but I’m having trouble using it with Font-Awesome…I can’t customize Boottheme base css to disable icons…anyone got any suggestions?

you need to remove anything that has to do with sprites. If you’re using bootTheme just look where the icons css starts. Replace it with what you download from font-awesome. Make sure your path to font awesome is correct! 🙂

Wow, Antonin, no good deed ever goes unpunished. 🙂 Your contribution to the world for writing anything helpful outweighs the contribution to the world by those who only took the time to tell you that you did not do enough. Excellent job keeping your cool. BTW, our infrastructure guy liked the article so much, he passed the url over to us in development. Thanks.

Wow, Antonin, no good deed ever goes unpunished. 🙂 Your contribution to the world for writing anything helpful outweighs the contribution to the world by those who only took the time to tell you that you did not do enough. Excellent job keeping your cool. BTW, our infrastructure guy liked the article so much, he passed the url over to us in development. Thanks.

i’m running my personal blog for free on google’s blogspot, but I really hate the default templates in there as well as the available online designs. So what I did is to create my own customized design using twitter bootstrap.. here is my own version of customized twitter bootstrap:

i’m running my personal blog for free on google’s blogspot, but I really hate the default templates in there as well as the available online designs. So what I did is to create my own customized design using twitter bootstrap.. here is my own version of customized twitter bootstrap:

I disagree with you. I’ve been using Bootstrap non stop since I’ve written this article, almost for a year now. It’s actually amazing what Bootstrap can do to you when you have an idea, want to develop it, and need a framework for UI as a standard.

I disagree with you. I’ve been using Bootstrap non stop since I’ve written this article, almost for a year now. It’s actually amazing what Bootstrap can do to you when you have an idea, want to develop it, and need a framework for UI as a standard.

Andrew

I just finished this brightly colored site for a bounce house rental company in Seattle. Identifiable components still show through, but I like to think that overall it goes against the grain of stereotypical Bootstrap design.

by the way, if you were trying to get a keyword related backlink, it won’t work. Disqus is dynamically loaded via javascript (google doesn’t see it because of that). Disqus also marks link with no-follow automatically.

Outside of that, that’s quite a unique usage of bootstrap! I really couldn’t tell it was Bootstrapped!!! 🙂

Andrew

I just finished this brightly colored site for a bounce house rental company in Seattle. Identifiable components still show through, but I like to think that overall it goes against the grain of stereotypical Bootstrap design.

by the way, if you were trying to get a keyword related backlink, it won’t work. Disqus is dynamically loaded via javascript (google doesn’t see it because of that). Disqus also marks link with no-follow automatically.

Outside of that, that’s quite a unique usage of bootstrap! I really couldn’t tell it was Bootstrapped!!! 🙂

Thank you so much. You have easily saved me hours and hours of work by pointing out these essentials. The worst thing is that I would have never lived those hours and would have continued to use the default eyesore but now things may change!
You are an amazing writer with a very engaging style. Thanks and all the best.