Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to customize responsive columns and inputs fields in twitter bootstrap?

Main question is how to customize bootstrap responsive css? My code partly works but I can't fix this cases. It's hard to explain so for better understanding I made visualization presented on screenshots.

I posted actual cleaned template code on JSFIDDLE.

Now when width is more then 1200px columns are ok that mean they are two span6 side by side: enter image description here Between 1200px and 980px display should looks like: enter image description here Less then 979px and more then 768px on first navbar colapse I'd like to have something like that on container center: enter image description here Until next shrinkage below 768px right column has jump to new line and stay there when reducing further to 480px and below. I think that view presented below is ok for mobile devices and better looks in narrow desktops browsers with the exception that when scale both columns are not on center: enter image description here

The smallest width corresponds to my expectations.

like image 918
roza Avatar asked Jan 16 '23 17:01

roza


1 Answers

I am not sure if I understand your question correct, but you can customise the behavior by using media queries

// Landscape phones and down
@media (max-width: 480px) { ... }

// Landscape phone to portrait tablet
@media (max-width: 767px) { ... }

// Portrait tablet to landscape and desktop
@media (min-width: 768px) and (max-width: 979px) { ... }

// Large desktop
@media (min-width: 1200px) { ... }

Maybe you have to overwrite some classes and ids. The responsive information can be found on git:

responsive.less

  • responsive-1200px-min.less

  • responsive-767px-max.less

  • responsive-768px-979px.less

  • responsive-navbar.less

  • responsive-utilities.less

Nevertheless play with these Settings only if you really have to.

like image 159
HaNdTriX Avatar answered Jan 30 '23 00:01

HaNdTriX