Boostrap content not aligning properly

I have been working on this page for a few days now and no matter what I do I cannot for the life of me get the content to align properly when resizing the screen to simulate a mobile device. This is how the page needs to look on a desk top Orignial

Here is my code thus far My Version. When i resize the browser everything overlaps and doesn’t align properly. I need the page to be mobile responsive just like you would expect. Can anybody please help me figure this out?

Theres a lot refactoring that needs to be done. :slight_smile: You have a lot of “clever” css selection going on and your HTML is not structured properly for use with bootstrap.

e.g. (will not work)

//this is wrong
 <div class="row">
    <div class="container">
         
    </div>
</div>

The <div class="container"> </div> needs to be the containing element. I would suggest going back over. your mock, perhaps draw a wireframe outlining each containing element you need, one for desktop and one for mobile.

e.g.

// structure your html like so..
<div class="container">
    <div class="row">
        <div class="col-md-8">I am a column</div>
        <div class="col-md-4">I am the next column</div>
    </div>
     <div class="row">
        <div class="col-md-8">I am a column on the next row</div>
        <div class="col-md-4">I am the next column on the next row</div>
    </div>
</div>

maybe re-read the Bootstraps docs, http://bootstrapdocs.com/v3.0.3/docs/css/#grid and don’t be afraid to use the examples.

Get the basic structures and shapes of your site down first, before adding style and things like images, use placeholders. Build your lg and sm screen elements in your HTML structures and let Bootstrap handle the resizing before you add your custom css.

I hope this helps a little, responsive websites are tough and I’ve lost a lot hair to positioning elements “just right”. Try making a wireframe, they help me tons.
-Raven Dev

I’ve heard of wire frames but what exactly are they and how do you make one? haha I can accept clever css…better than down right crap :stuck_out_tongue: I’m just glad to be learning, I am more than willing to make mistakes haha. I will add a link to my code when the page is done. I can get the page content laid out fine using whatever css I can get to work but when it comes to getting it all responsive that’s where I fall short. Thanks for your help. I’ll repost my code here if you wouldn’t mind taking a look at it when I’m done.

:slight_smile: There are a lot of moving parts, it takes a lot time and good attention to details, Ive lost days on simple mistakes before… :confused:

heres simple wireframe.

Basically, I like the wireframes because it draws out my rows and columns. Wireframes allow me to more easily write out the HTML and get an idea of where I need to resize.

also, I wouldn’t mind looking over your code. Do you use a code editor (IDE)? VSCode or Atom work well :slight_smile:

Ok awesome thank you for all your help! Yeah use Sublime Text 3. Once I get everything finished I’ll go over it and see what i can figure out. My only concern is that when I start changing things around things are gonna get real screwy and just fall apart lol. I’m assuming that once I change the bootstrap html ill have to change the css as well to some extent? Or would the css be fine for the most part as long as i keep the same class names?

It all depends, getting your layout down first with minimal css I think is important. That way you can segregate things and work on palatable pieces at a time. Let bootstrap take care of as much as it can and then apply custom CSS when needed. I always want to have everything on the table first, all my html structures with simple placeholders like IMG goes here , then I add things once the layout is behaving properly and then I style it with css and adjust things as needed. There are many ways to do this, I just find that this progression helps me not loose more hair.

I came here because I am dealing with the same problem with Bootstrap in CodePen, but when I tried copying your code exactly into my page, it still didn’t work. The link to my page is here: https://codepen.io/ntanners/pen/JygjmO?editors=1111

I’ve got everything in a div with a container class, I’ve got Bootstrap 3.3.7 loaded, but the rows and columns are not working at all. Any suggestions?

changing the col-md-* to col-sm-* seems to work for me. Make sure the screen length is as wide as the medium screen breakpoints define, which in medium case is 992px. If your window is under 992px, Bootstrap will adjust the columns to a single column. Setting the columns to sm will keep the positioning from small screens and up. To make it responsive you can combine the col classes like <div class="col-sm-6 col-md-4 col-lg-2"> so that the columns reposition responsively.

from the docs
/* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... }
CSS · Bootstrap 3.3.6 Documentation - BootstrapDocs

correction:
The columns will collapse based on container width:

which for a col-md-* is stated to be a width of 970px for the container

Yeah i noticed his today. I’ve been going through and adding the proper bootstrap classes where they’re needed. I’m gonna make another css file from scratch and link that to my html and go from there.

1 Like

Thanks for the help! Unfortunately, now I’m really confused. I saw from your screenshot that you had a version of my page with columns and with the text below centered as it should be, but when I look at the Pen on my computer, I see neither of those things. I tried to copy a screenshot below – hopefully it works!

@ntanners that is weird, I checked your pen and it loads fine for me in Safari and Chrome. It looks like bootstrap isn’t loading, your fonts are default too. try adding this to the bottom of your HTML,

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

also to check if bootstrap is loading, you can right click on your screen and use Chromes inspector. Under the network tabs it will show which files it fetched, see if there is a bootstrap css file.
e.g.

let me know if theres an error and we can debug it hopefully…

Thanks again for all of your help! See the screenshot below. Bootstrap shows up in the list of files, but it doesn’t have a value in the “Type” column, where it looks like it’s got the value “stylesheet” in your screenshot. Putting the links you provided in the bottom of my HTML does seem to have fixed the problem, however, so thank you! I’m still confused as to why Bootstrap won’t load up properly in my browser, however.

:slight_smile: Im not sure but I am guessing it has something to do with CodePen, it should add those links to your document when you select them as addons. Dunno, lol glad it works though.