Loading

Español  English

Blog

By Enrique González

Things missing in Bootstrap 3

Twitter-Bootstrap-LogoAfter 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/
  • Date29-11-2014
  • 1

    comments

  • Avatar
    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
    25-02-2015 06:39
  • +

    Leave a comment