• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

Answered Bootstrap Layout Issue. Need Help!

Krygore

Coder
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:

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

Active Coder
Staff Team
Guardian
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 :D i have edited the code and this puts a div in the center.

HTML:
<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

Coder
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 :D i have edited the code and this puts a div in the center.

HTML:
<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...
 

Top