Tag: css

5 Column Layout With Twitter Bootstrap

By default Bootstrap does not provide grid system that allows us to create five columns layout, but as you can see it’s quite simple.

At first you need to create default column definition in the way that Bootstrap do it. I called my classes col-..-15.

Next you need to define width of new classes in case of different media queries.

Now you are ready to combine your classes with original Bootstrap classes. For example, if you would like to create div element which behave like five columns layout on medium screens and like four columns on smaller ones, you just need to use something like this:

source: http://www.wearesicc.com/quick-tips-5-column-layout-with-twitter-bootstrap/

CSS3 Linear Gradients on an Input Submit Element

Time to pad out my blog with useless helpful dev shit I encounter during my day job.

First one out of the hat. CSS3 linear gradients on input submits. Doesn’t work. The work around? Convert that input into a button.

Use:

Instead of this:

I’ve tested it in IE8+, recent Chrome, Firefox and Safari versions. They all function exactly as they would if they were still input submits.

Problem solved.

How To Handle User’s With Javascript Disabled Using The Noscript Tag

Usually, what most people seem to do with the noscript tag is to include it, and hide it with javascript on page load.

The only issue with this is most users will see the contents inside the noscript tag for a split second (or longer on a slower connection) while waiting for the javascript to kick in.

A simple solution, which also seems to be what Gmail does is to do the following instead:

…where all of the content in your site is wrapped with a div of class “pagecontainer”. The CSS inside the noscript tag will then hide all of your page content, and instead display whatever “no JS” message you want to show.