2

I use bootstrap responsive and either I am doing something wrong, or bootstrap is not so responsive as I would love it to be.

Below you see 4 possible states, and I would avoid the two in middle. Either everything is inline like in first case, or force bootstrap to be "mobile" like in case 4.

QUESTION Can I set minimum width in pixels on which Bootstrap will always be in this mobile look like shown in case 4?

I am using twitter bootstrap version 3 here is code responsible for navbar https://gist.github.com/andilab/c1eba569dd0b9b9ad280

case 1: OK enter image description here

case 2: BAD enter image description here case 3: BAD enter image description here case 4: OK enter image description here

andilabs
  • 22,159
  • 14
  • 114
  • 151

4 Answers4

2

Yep. Lots of ways to do it, but I think the easiest is to download a custom Bootstrap from http://getbootstrap.com/customize. Specifically see this note:

The navbar collapses into its vertical mobile view when the viewport is narrower than @grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least @grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).

And make that change here: http://getbootstrap.com/customize/#grid-system. In your case, you would change @grid-float-breakpoint: @screen-sm-min to @screen-md-min.

Shawn Taylor
  • 15,590
  • 4
  • 32
  • 39
1

The bootstrap.css file contains @Media rules that define the min-width at which it swtiches to the mobile layout.

You shouldn't edit the bootstrap.css file directly but you could override the min-width in a custom CSS file.

JodyT
  • 4,324
  • 2
  • 19
  • 31
1

The full and working solution should be focused on the resolution on which the navbar menu should be collapsed to: enter image description here.

working demo http://www.bootply.com/98488 by @Skelly

The answer can be found here: Twitter Bootstrap 3 navbar-collapse - set width to collapse

Community
  • 1
  • 1
andilabs
  • 22,159
  • 14
  • 114
  • 151
0

This may help.

http://www.tutorialspoint.com/bootstrap/bootstrap_responsive_utilities.htm

You can use responsive utilities classes.

For example in your header container you can add hidden-xs hidden-md hidden-sm and on most mobile phones and tablets your menu will be like in your case 4.

Hope this is what you were looking for.

Adrian Syn Rusnac
  • 147
  • 1
  • 2
  • 11