I feel like I'm not getting bootstraps grid/positioning system- at all

I feel like I'm not getting bootstraps grid/positioning system- at all
0.0 0

#1

I’m starting to get very frustrated with my Portfolio page. Every time I finish one aspect of it, I move on to positioning the next element, and the whole page gets thrown off. I feel like I’m doing the whole thing wrong at this point.
It seems like the part I might not be picking up is the grid system?
I know that for the first exercise(tribute page), it was easier for me to just use custom CSS than it was to make it work with bootstrap.(when it came to positioning elements)

Here are some of my concerns:

  1. For one thing- should I be using Bootstrap 3 or 4? At first I started using 3 and then when I changed to 4, it threw everything off.
    Now that I got the page looking close to how I want with 3, I go to check out how the page looks on my cell phone, and it looks just like it did on my desktop with Bootstrap 4! Grrr

  2. Everyone’s portfolio has a fixed Navbar. I tried adding one to mine, but when it try to set it’s position to “fixed”, the right side gets cut off instead of spanning the whole page, and the entire page is getting thrown off center, slightly to the right. I tried all kinds of stuff to get the elements on the page to re-center and nothing changes any of it.

  3. I was able to space out my P elements and my img elements vertically and horizontally using “display: inline-block” and “margin:…” on the style sheet, to get them where I wanted them on the page. I tried doing the same with my btn elements and instead of spacing out the area around the element, it instead made the buttons themselves a different size, yet left them in the same spot. How can I change the position of the “contact me” button?

  4. This kind of relates to my first concern. the page looks pretty good on my desktop, but when I view it on my cell phone, everything is all jumbled up. Most notably is my navbar. I want everything to fit onto a single line, evenly spaced and centered… whether it’s viewed on a desktop or cell phone. Even if it had to stack some elements- I might be okay with that, but stacked neatly, not all random looking…

I even tried repeating the whole bootstrap lesson, but it still didn’t help.:confused:

Anyways thanks for taking the time to read and sorry if it’s a lot at once, I just am running into one thing after another. Here is the link:

https://codepen.io/VinnyVincent/pen/mMBdxx

One more thing while I have your attention; Please tell me that I at least got the tribute page right and didn’t totally somehow make it look right while doing the code completely wrong/inefficiently:
https://codepen.io/VinnyVincent/pen/JyrPgY

Any type of feedback at all is very welcome, even harsh criticism.:slight_smile:


#2

Alright, I think I have got #4 figured out. I think I needed to use the “navbar-fixed-top” class instead of trying to make it fixed using custom CSS.

It just seems like I am having to google literally everything and then when I move to the next element, it throws off my first element and I am back to square one and have to do more googling about the first element lol.

I guess I am wondering if I am just not picking this up very well, or is this normal?


#3

So I’m in the Advanced projects portions, and some aspects of Bootstrap still frustrate me to no end. They are very exact with their CSS, so changing a specific class forces you to follow their method exactly.

ul > li > .warning > a > a:hover > .underline { border-bottom: red; }

Aggravating!

Anywho, I’m using this example to show you that it’s easy to get confused when you’re implementing a framework. You’re essentially using someone else’s code (or in this case, a corporation). They have their own classes and styles that you have to sift through in order to get your page exactly how you want it.

Glancing at your code, let me give you some pointers. Look at the HTML first. Clean it up a little bit, and make sure you know exactly where the tags are. I’m just looking at the navigation, and you have

<header>
    <nav>
        <div>
        ...
        </div>
    </nav>
<body>
</<div>

Your CSS will be the least of your worries if your HTML isn’t right. You don’t even need the CSS links in that section, put it in the Header section that Codepen provides for you.

Honestly, I would take a step back, look at other projects, and settle down. Your Tribute Page seems to be fine, so you do know what you’re doing. You might want to consider is actually looking at someone else’s code. You don’t need to copy it, just compare someone else’s code to the Bootstrap documentation to see how they’re implementing it. Hell, I’ve taken an online course (paid) that had the instructor copying and pasting code from the Bootstrap documentation, and adjusting it to his liking. The Bootstrap docs don’t really give much in explanation, just a bunch of examples.

I’m just rambling on now, and I don’t know where I’m going, so I’m quitting while I’m ahead. If you have specific questions, feel free to ask!

tl;dr - Don’t get discouraged, clean up your HTML, take a look at other Camper’s code, and re-work your project after re-reading Bootstrap docs.

PS - Don’t confuse yourself between v3 and v4. Stick with one and roll with it. I recommend v3 because I feel like a lot of Campers used that for their project and it might be easier to follow! Cheers!


#4

Let me tell you how I felt when I was doing my portfolio page.

version 1: after adding more sections, the sections I’ve already had are all messed up.
version 2: it looks fine I don’t care what kind of shitty code I am writing.
version 3: okay, now I corrected some of my code as least it is presentable and organised.
version 4: making it responsive basically break all the things I’ve wrote.
version 5: okay… now it looks a lot better.


version n: alright I think I can move on… this project is done for now. If one day I’ve learnt new things I might come back and make it more nicer.

You are not the only one that feels this way, and sometimes CSS is a bitch. Don’t beat yourself up over this.


#5

Hey. If you find it easier to use custom CSS, use it. There’s nothing wrong with it, don’t feel forced to use Bootstrap.

If you want to use Bootstrap though, as a general rule of thumb, try not to use any CSS at first. Search the documentation, you’ll probably find that the thing you are doing in CSS could have been done with a Bootstrap class.

I would follow @drregg6 advice to clean up your HTML code, maybe even starting from scratch. Getting frustrated is totally normal. Take your time and don’t force it on yourself or you’ll burn out eventually.

Bonus

When developing a webpage\app\whatever I find it easier to create a skeleton of the major things I need first. If you want to use Bootstrap (assume I’m using version 4 in this post) this is the basic structure of its grid system:

<div class="container-fluid"> // Can have a class "container" instead, as well
  <div class="row">

  </div>
</div>

All your columns need to be wrapped in those two divs. Always.

The bootstrap grid system, as you may know, is based on 12 columns, and the col-* classes assign the number of columns that a div will occupy. So, this:

<div class="container-fluid">
  <div class="row">
     <div class="col-6"></div>
     <div class="col-6"></div>
  </div>
</div>

will result in two divs split exactly at the middle of your page at all resolutions. If you want the divs to take less or more columns at certain resolutions, then you will use the bootstrap breakpoints (sm: 576px, md: 768px, lg: 992px, xl: 1200px):

<div class="container-fluid">
  <div class="row">
     <div class="col-md-6 col-12"></div>
     <div class="col-md-6 col-12"></div>
  </div>
</div>

Now the two divs will still be split at the middle point of your page but only until the screen size reaches 768px. After that, the class “col-12” will take precedence and they will take all the horizontal space; because of that, the first div will make the second wrap onto a new line.

You can see a large variety of grid system’s examples here.

Bootstrap 4 navbar has its own structure that you can easily follow to avoid errors:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Vince Shelnutt</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbar">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Portfolio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

The class navbar-expand-lg on the <nav> element (which, if you notice, once again uses the breakpoints) will make it so the navbar won’t be collapsed until… you know the answer. The class ml-auto on the <ul> element is a spacing class and it will make your links stay on the right. If you want it fixed, just add the class .fixed-top.

Finally, since you talked about wanting things centered, you might want to look at the aligning classes.


#6

Thanks both of you guys, dregg and zhouxiang… maybe it’s just that misery likes company, but it’s nice to hear I am not the only one.
ddregg- I think you are right about my HTML and needing to take a step back/revisit later. I took another look at my HTML and it is very sloppy when compared to my Tribute Page. Even though I was still working on it, the way I kept jumping around to different issues without cleaning up the code on the one I was working on just made things wose.

I think that zhouxiang expands on this issue as well, because the Portfolio page I linked is only V2.1. Looks like I have a few more to go before it starts looking like something :slight_smile:


#7

Thanks,
I was already debating just starting from scratch again tomorrow, but this settles it.
I think I’ve been leaning on CSS too much because I was already more familiar with that, and its impeding my learning of bootstrap.
I’m going to start over again and focus on your advice about trying to do everything I possibly can without using CSS at all to start with…I was essentially doing the opposite of this, so I think think just focusing on that alone will result in a big improvement.


#8

Keep me updated, I want to check out your progress!

Another helpful tool - If you’re more of a visual learner than a reader, use YouTube videos. The Net Ninja has a wide variety of kick ass tutorials that you can follow along with!