Any advice using Bootstrap to make an existing website responsive? Adding Bootstrap messes up all existing formatting

Hi Alan, do you have an example? generally Bootstrap is not a Plug-In to make "Sites" responsive. Rather it is a CSS-Framework which provides a Grid-System and different HTML Components which are tested on several Browsers and Devices. If you want to use the advantages of Bootstrap, you should consider to rebuild your Site using the Bootstrap Components. There a lot of great features for example the Variables File of Bootstrap where your are able to customize your styles very quickly. Furthermore you should avoid overwriting when mixing Styles of Bootstrap and an exisiting Site to keep your CSS simple and small.

For adding fluid-widths to a static page it can be faster to code a Grid-System on your own which fits only your "Custom-Side-Needs".

You can do a custom build of bootstrap to take only the parts you want: http://getbootstrap.com/customize/

Hey Alan, it sounds like there is badly written custom CSS code on your website with some dependencies getting broken (in programming languages you would refer to something like this as 'spaghetti code', maybe you've heard of this), since you took care of the correct cascading.

For example, when you have a <section> with an <h1> in it as a direct child and your CSS looks something like this:

section > h1 {...}

and after adding some Bootstrap elements to your HTML you end up with something like

<section> <div class="container"> <h1>Lorem ipsum</h1> </div> </section>

, then your previously written CSS doesn't affect your h1 anymore. Now imagine the chaos when using position- and display-attributes this way.

Also think of "rebuilding" your website with Bootstrap instead of "adding responsiveness via adding Bootstrap".

I can't figure out how to post screen shots. I have seen them in other posts. There is about 60 lines of HTML and an equal amount of CSS to post. A scrren shot of my Atom environment with both viewed at the same time is what I am trying to do. I was also planning to post a browser screen shot of the site before > 1200px and after < 1200px to show the 100px right and left padding/margin that pops in. Any ideas how to post an image here?

Hi Alan,

you got a spacing on the left and right side, because the default Bootstrap .container class contains a width which will be decreased on each breakpoint and margin: 0 auto which centers the container. For example if your viewport width is 1400px and the container width is 1170px you got a spacing of 115px on each side because the container width will not be increased by larger breakpoints than ~1200px. If you don't want to use a containered layout try using the .container-fluid class which doesn't contain a specific width. Remember that your content is more difficult to read if you have sentences going over the whole viewport width on large devices. So a container can be usefull to set a max-width to your content.

I see from the Bootstrap docs, that I had written down the media query widths wrong, but that is what they taught in the Bootstrap Basics course ... argghh! The breakpoint sizes should be xs < 543px, sm 544-767px, md 768-991px, lg 992-1199px, and xl 1200-up. Now the Bootstrap margin resizing on my code makes sense ... I should have used col-lg- instead of col-md-. I still need to understand how to counteract the Bootstrap margin/padding increase, if anyone could help me with that. Thanks!

Going further you should take a look at the Source code or Sass Download of Bootstrap. Compiling .less and .sass files on your own gives you the opportunity to have maximum customizing options and smallest file size while only adding the files and modules of bootstrap your project needs.

For example the variables.less contains values as @grid-gutter-width and @container-lg-width which allow you to increase the gutter-width to 40px or your container-width on large screens up to 1300px for example. The padding stored in each column (15px) is half of the default gutter-width (30px) because that is the space between two columns. For more information of the Grid-System read here.

There is a Sass Basics Course here on Treehouse to explore the idea of CSS Preprocessors.

If your are not interested in using the Source code edition of Bootstrap, you have to overwrite the exact CSS properties set by Bootstrap on each Breakpoint to style your layout.

can you recommend a good way to figure out what Bootstrap CSS I should be counteracting?

I'm not sure what you mean. If you want to understand Bootstrap's way of writing styles I recommend reading the Documentation as well as the Source Code of Bootstrap. A direct method would be to inspect the Bootstrap Elements with Firebug or Developer Tools to see which styles are applied.

I tried Google-Dev Tools inspection on the menu button and logo (right and left side elements) and could see no padding or margin applied to either, however the spacing got applied when browser width was less than 1200px ... regardless of what my col-xx-nn statements were. It makes no sense to me. As far as reading documentation, when there is so much of it one is never sure where to start. I didn't want to spend weeks figuring Bootstrap out, I was just hoping to take a few courses and play around with it, reading specific documentation to do what I was trying to do. When inspect doesn't work, how do I determine what Bootstrap CSS is being applied to insert the left and right spacing? My plan would then be to counteract their CSS with my own local CSS with the !important tag. Does that make more sense now?