Things missing in Bootstrap 3

After using the famous framework Bootstrap 3 for many sites, including this one you are reading, despite it has lots of features, i miss several things, such as:

Grid system: Lowest media query still too big

In the Bootstrap 3 grid system, the smallest media query is "xs" which goes from 0 to 768px. It is a big gap for me, especially considering that the next one, the "sm”, goes to 992px.

Many users think alike, so one of them has released a new media query called "ms" (bootstrap_ms), ranging from 480px to 767px, you can see here at SASS version:

https://gist.github.com/andyl/6360906

or CSS version ready to use:

https://gist.github.com/andyl/6451936

Regarding mobile devices, it is impossible to collect the widths of thousands of them out there, if for example the grid system gaps do not include the width of any particular device, it is easy to make the change, just write the specific media query for that device. For example in the case of the iPad:

@media only screen and (min-width : 768px) and (max-width : 1024px)  { 
.container {
    width: 970px;
}
}

Columns without padding

In frameworks like Skeleton you have the parameters "alpha" and "omega" to remove the padding of columns at left or right. Bootstrap does not have this, but may be included as follows:

.row.no-gutter [class*='col-']:not(:first-child):not(:last-child) {
  padding-right:0;
  padding-left:0;
}
.row.no-gutter [class*='col-']:first-child {
  padding-right:0;
}
.row.no-gutter [class*='col-']:last-child {
  padding-left:0;
}

Some additional Javascript component

Bootstrap has a collection of seamlessly integrated Javascript components, but I still miss, by example, a stylized combobox like this:

http://silviomoreto.github.io/bootstrap-select/

gonzalo

25-02-2015 06:39

Hola gente, antes que nada muchas gracias por su tiempo en responder Tal vez sea una pregunta super sencilla pero la verdad que yo, que aun soy muy novato en bootstrap, no le he podido resolver, tengo una estructura bastante sencilla como col con fondo rojo col con fondo azul al poner esto asi, y obviamente lo hace pone las dos columnas una pegada a la otra, lo que yo quiero es dejar un margen de al menos 20px entre la columna roja y azul...... y sinceramente no le encuentro la forma, porque claro esta q si pongo un style a la col azul automaticamente la manda para abajo....... alguna sugerencia? muchas gracias

Grid system: Lowest media query still too big

Columns without padding

Some additional Javascript component

gonzalo