How to bootstrap existing website

[ugintl 0]

I have a php based website script which I want to make responsive. What are the ways to make it responsive? I am not a developer so need an easy way. I know a little bit of html and css.

 

Download the template from https://www.dropbox.com/s/pfolvxhn9co2qd3/bluesky.zip?dl=0 to have an idea about the coding and website structure.

[dsonesuk 921]

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

[ugintl 0]

can you apply it on a page to explain me? or give me an example? I guess i did not get it properly

[dsonesuk 921]

There's an example here http://www.w3schools.com/bootstrap/default.asp the 3 columns at 33.3% remain, until browser window width falls below tablet width (768px) then the 3 columns becomes 3 rows instead width : 100%;

[ugintl 0]

ok thanks

[AbigailMenard 1]

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.

[dsonesuk 921]

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.