Jump to content

How to bootstrap existing website

Recommended Posts

The idea is to use specific classes within in your site to apply percentage widths depending on device width, you can't have 2-3 column used for desktop, for smaller moble device, so you will have to lose a column if that column content is just advertising and not considered relevant to be shown, OR change it to 1 column only, so say a 3 column using 25%, 50%, 25% would become 100% for each column. The menu has to change also to a menu suitable for mobile, these are controled by media queries, which change outside fixed width suitable for specific device width.


So basically you need to set these classes for a appropriate specific design layout depending on device width using fluid percentage widths, you are going from what used to be a single desktop layout, to 4 - 7 including layouts for portrait, landscape layouts for ipad, android tablets

  • Like 1
Link to post
Share on other sites
  • 4 weeks later...

Hi uginti, You have asked a pretty good and valid question. I too want to use bootstrap in my ongoing project and it will be great if I could use bootstrap without making any bigger changes.

Thank You.

Link to post
Share on other sites

Yes! it would be nice if you just link to bootstrap and BAM! instant bootstrap responsive site, BUT! unfortunately its not able to gather information how you wish the site layout will look for different devices, SO YOU! have to use bootstrap css id and classes, for it to be able to adjust the layout for these different device widths.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...