Deprecation frustration

https://codepen.io/nestaulrich/pen/brYrLX/?editors=1000

I’m having a really hard time understanding the layout principles in bootstrap. I want all of my “h” tags centered on their own line at all levels of deprecation. I’ve tried out variations of col-12 and haven’t been able to make it work.

I also want the paragraph and photo to stack at either sm or xs.

Thank you!

hi nestaulrich, i’ve take a look at your code and can suggest some advise about grid to improve it.

you seem to combine div with grid value (ex: col-sm-6)

<div class="col-sm web panel">
    <img class="webimg" src="#">
  </div>

with div without grid value

  <div class="row">
    <h2 class="">PORTFOLIO</h2>
  </div>

i don’t recommend this, because this kind of code is hard to maintain, you need to play a lot with css.
if you want to use grid system, make sure every child element that belong to same parent have grid value

i give you example on how to use grid code based on your portfolio page, copy it to your html and css and see the difference. I hope this example can help you understands grid system better
HTML

<div class="row rowExample">
    <div class="col-sm-12 row1">
      <h2>PORTFOLIO</h2>
    </div>
    <div class="col-sm-12 row2">
      <h2>WEB DEVELOPMENT</h2>
    </div>
    <div class="col-sm-6 row31">
      <img src="#" class="imgExample">
      <h2>Broadcast Animation Demo Reel</h2>
    </div>
    <div class="col-sm-6 row32">
      <img src="#" class="imgExample">
      <h2>America's Favorite Boardwalks</h2>
    </div>
  </div>  

CSS

.rowExample {
  text-align: center;
  background-color: yellow;
}

.row2 {
  background-color: lightblue;
}

.row31 {
  background-color: mediumpurple;
}

.imgExample {
  height: 200px;
  width: 200px;
}

That helps a lot alta9, thank you.

Most of my divs had grid values but I’ve been plugging values in and taking them out pretty haphazardly. I’m also confusing bootstrap and flexbox, using little bits of both here and there. I need to be more methodical.

Thanks again!

It looks like text-align: center; affects everything, not just text. If I wanted to right justify an item I would assign it a class or an ID and declare that property?

I’m glad it helped.Grid system is pretty confusing but once you able to grasp the concept, it will be really helpful especially for a responsive website

text-align: center;

yes, it can also affect another element such as image and button, a convenient way to organize your element

If I wanted to right justify an item I would assign it a class or an ID and declare that property?

unfortunately, it only works for paragraph (

), span () and div (

). If you try for image like this :

img {
text-align : right;
}

nothing will happen. But you can trick it by put the image element in a div

1 Like