Bootstrap 3.x + Fixed Width Website

Question

Hello Fellow Developers,

I am about to start a new project where our client is US based. After going through the requirement and design guidelines, I see they are looking for fixed width website that will be supporting mainly desktop browsers but in future I see lot of potential that they might want to have this run on more compact versions of communication ipads, mobiles.

I have worked on bootstrap 2.3 when it came out but past one year was off the bootstrap. I know the power of bootstrap 2.3 and 3.x where which are targeting mobile first.

My query is, looking at the viewpoint of client who only want to support desktop browser, is there a chance I can still use bootstrap for fixed width website and have an opening for future where client might want to port this to smaller devices. Does it seem sensible to have this accommodate in the current release. I know it's not something that can be answerable without seeing complexity of pages or wire frames. I just want to get a knack of understanding.

What will be the best way to achieve this?

Hope to here some suggestion on this front.

Answer 1

As you have yourself mentioned bootstrap emphasizes more on a mobile first approach, but it does not stipulate the same for using it.

The beauty of the framework is that you can use it according to your requirements. Whether its a just a small element in your web page or a full fledged website, bootstrap gives you options to customize everything.

Coming to your situation, I have experienced the same many times during the starting phase of my projects i.e UI Designing. No matter how many times the client tells you ( This is just a Desktop application ), As a developer we have a pretty good idea about the usability scenario of websites nowadays i.e if its not mobile its not there.

Considering you have not given any details about the scale and complexity of your website, I will assume its a normal one with respect to the user interface. So my suggestion would be to go forward with the desktop version and make a clean skeleton of all the pages so that later if need arises you can accommodate the mobile version.

P.S - I have done it many times with help of a solid structure up front.

Answer 2

Do not add metatag for viewport and rest, develop it all using bootstrap structures and use col-xs- classes, later-on you can obviously turn it responsive.

Answer 3

If you want to use bootstrap anyway, you can :

• do a responsive design anyway and they would (probably, you can never with customers ^^) be happy of the result

• comment all the media not related to the width you want in the bootstrap css

  /*@media (min-width: 768px) {
          .container {
                  width: 750px;
          }
  }
  @media (min-width: 992px) {
          .container {
                  width: 970px;
          }
  }
  @media (min-width: 1200px) {*/
          .container {
                  width: 1170px;
          }
  /*}*/
  

• Bootstrap non-responsive

It is not well organized but I hope it helps a little ^^

Answer 4

The way that I would do it is to create a div that acts as a wrapper for the entire page. Set a width on that div, and Bootstrap should be responsive to that width. If you run into any situations where a div might overflow that, set the width of that div (or its parent, depending on the context) to width: inherit.

If the page is viewed in a desktop browser, everything should look as it should and maintain the fixed width. If it is viewed on mobile, the content may adjust depending on how you used Bootstrap's grid system, but it should do it in a responsive and elegant way.

Answer 5

We had a similar problem. Our solution was to disable the xs and sm css (i.e. forcing all screens to either use md or lg screens).

This worked well because mobile devices are already good at rendering larger websites. Remember how websites were rendered by the iPad when it first came out? You need to zoom in to read things perhaps but everything still works.

The easiest way to disable xs and sm is using the bootstrap customizer (http://getbootstrap.com/customize/):

• Load your config.json
• Set the @screen-sm-min setting to be "(@screen-sm / 10)"
• Set the @screen-md-min setting to be "(@screen-md / 10)"

Basically this means that you view xs if the screen size is less than around 65px wide, and sm if the screen is less than 100px wide (which should never happen).

If you haven't got a config.json it gets harder as these variables are used widely in bootstrap's CSS. I just checked and found 53 lines that needed changing if you wanted to do it manually... Not impossible, but you would want to be very careful.

Still, I would highly recommend it on a new system where you don't want to cater for mobile devices (at least not primarily).