Answered Bootstrap Layout Issue. Need Help!

[Krygore]

Hey guys. I'm working on my personal website (Version 2! LOL) and I am having an issue with bootstrap grid layout. Class .row more specifically. For some reason, I can't get the features to respond to the .col classes I have set for the different breakpoints. Any pointers? I've been staring at my screen for over an hour trying to figure this one out....

Here's the code:

<div class="container">
      <div class="row">

        <div class="col-lg-4 col-md-6 feature">
          <i class="fas fa-laptop-code fa-7x features-icon"></i>
          <h3 class="feature-head">Web Developer.</h3>
          <p class="feature-text">Intermediate front-end web development using HTML, CSS, Bootstrap and JavaScript.</p>
        </div>

        <div class="col-lg-4 col-md-6 feature">
          <i class="far fa-image fa-7x features-icon"></i>
          <h3 class="feature-head">Graphic Designer.</h3>
          <p class="feature-text">Creating Sci-Fi scenes, photo editing, logos, and more.</p>
        </div>

        <div class="col-lg-4 feature">
          <i class="fab fa-blogger fa-7x features-icon"></i>
          <h3 class="feature-head">Blogger.</h3>
          <p class="feature-text">Creative writing to keep the mind active.</p>
        </div>

      </div>
    </div>

 

[simong1993]

So looking at this the code seems to be working BUT i am guessing you are after different Div sizes, with some of your Divs you are doing "col-lg-4 col-md-6" these are two separate sizes, next thing to note is bootstrap goes to a total of 12 where as you have 16 😀 i have edited the code and this puts a div in the center.

<div class="container">
      <div class="row">

        <div class="col-3 feature">
          <i class="fas fa-laptop-code fa-7x features-icon"></i>
          <h3 class="feature-head">Web Developer.</h3>
          <p class="feature-text">Intermediate front-end web development using HTML, CSS, Bootstrap and JavaScript.</p>
        </div>

        <div class="col-6 feature">
          <i class="far fa-image fa-7x features-icon"></i>
          <h3 class="feature-head">Graphic Designer.</h3>
          <p class="feature-text">Creating Sci-Fi scenes, photo editing, logos, and more.</p>
        </div>

        <div class="col-3 feature">
          <i class="fab fa-blogger fa-7x features-icon"></i>
          <h3 class="feature-head">Blogger.</h3>
          <p class="feature-text">Creative writing to keep the mind active.</p>
        </div>

      </div>
    </div>

 

[Krygore]

So looking at this the code seems to be working BUT i am guessing you are after different Div sizes, with some of your Divs you are doing "col-lg-4 col-md-6" these are two separate sizes, next thing to note is bootstrap goes to a total of 12 where as you have 16 😀 i have edited the code and this puts a div in the center.

<div class="container">
      <div class="row">

        <div class="col-3 feature">
          <i class="fas fa-laptop-code fa-7x features-icon"></i>
          <h3 class="feature-head">Web Developer.</h3>
          <p class="feature-text">Intermediate front-end web development using HTML, CSS, Bootstrap and JavaScript.</p>
        </div>

        <div class="col-6 feature">
          <i class="far fa-image fa-7x features-icon"></i>
          <h3 class="feature-head">Graphic Designer.</h3>
          <p class="feature-text">Creating Sci-Fi scenes, photo editing, logos, and more.</p>
        </div>

        <div class="col-3 feature">
          <i class="fab fa-blogger fa-7x features-icon"></i>
          <h3 class="feature-head">Blogger.</h3>
          <p class="feature-text">Creative writing to keep the mind active.</p>
        </div>

      </div>
    </div>

Those .col classes are the bootstrap grid sizing. On a computer I want all 3 side by side. As the screen moves down to tablet size, the first two should be side by side and the last should take up the whole row. On phone, they should each have a their own row.

I'm debating on whether my issue lies in my updating to windows 11? if the window resizing is formatted differently on browsers? I'm not sure though...

 

[Krygore]

bootstrap goes to a total of 12 where as you have 16

I only have 3 columns up there. 3*4=12
col-lg-4 means computer screen/laptop takes up 1/3 of the row

 

[Krygore]

I suppose it would have helped if I shared the CSS as well. I found the issue. I had an unnecessary margin the .feature class