What could be causing my bootstrap cards to have varying lengths?

I'm currently working on a project that requires me to apply a specific responsive design using HTML Bootstrap classes. I've managed to format it the way I want, but I'm puzzled as to why the width of my cards within rows is inconsistent in desktop view. Can anyone help me figure out what might be causing this issue? For reference, here's the full HTML document with the section starting at "!Bottom Section". Unfortunately, I am not permitted to write any custom CSS for this assignment, so only HTML is used. Thank you for your assistance.


<!DOCTYPE html>
<html lang="en">

<head>
  
  <!-- Required meta tags -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

  <title>All about bears</title>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>

<body>
  <header class="bg-info">
    <h1 class="pt-4 pl-5">All About Bears</h1>
    <p class="pb-4 pl-5">Read all about bears and what they're like.</p>
    <nav class="text-center mb-4 bg-light py-3">
      <a href="#" class="text-dark px-3">Home</a>
      <a href="#" class="text-dark px-3">About</a>
      <a href="#" class="text-dark px-3">Contact</a>
    </nav>
  </header>
  <main class="pl-4">
    
    <!--Top Section-->
    <div class="row px-lg-5 col-sm">
        <img class="img-fluid" src="https://placebear.com/490/480"/>
      <section class="col px-lg-5 row-sm">
        <h2 class="text-center py-3 mb-3">Bears are neat!</h2>
      <p class="px-lg-5">Thejk jkee soodjkfd jkl djfedios nkjf de. fjkdosdjd ficklsldf ddfe. jjkldif jjf asope mekdox kididlwne df.
        asdjdfv ioejfdslkcj fdiolsmefjd klfdslkjdf. djfid soox ejf jf dic ciciic deksj zjdklfdd. jsklddox jjifke sjzo.
        sdjidfox.
      </p>
      <p class="px-lg-5"> Ddod co e nfdklooox djfed sox dofdds f od poof fjso f  dfds. hejk didof sdjdof. dis
        sdidof dfjdsioxxoxodfd sjfo, eiw wod jjofdfdwo sdfo. jkee soodjkfd jkl djfedios nkjf de. fjkdosdjd ficklsldf ddfe. jjkldif jjf asope mekdox kididlwne df.
        asdjdfv ioejfdslkcj fdiolsmefjd klfdslkjdf.
      </p>
      <p class="px-lg-5">Thejk jkee soodjkfd jkl djfedios nkjf de. fjkdosdjd ficklsldf ddfe. jjkldif jjf asope mekdox kididlwne df.
        asdjdfv ioejfdslkcj fdiolsmefjd klfdslkjdf. jdkdfjoejfds fjef sdfjo sod qpd fjoxf feea dsj sdf. dsjods jofej djozfjox.
      </p>
      <a class="pl-lg-5 pt-4 mt-4 text-dark" href="#">Source</a>
      </section>
    </div>
    <hr>
    
    <!--Bottom Section-->
    <div class="row justify-content-center">
      <!--First Row-->
      <div class="row row-cols-6 d-flex justify-content-center justify-content-around mb-4">
        
        <!--Card One-->
        <section class="col col-4 border card p-0 mx-4">
          <img class="img-fluid" src="https://placebear.com/225/225"/>
          <p class="card-body">These bears are playing around</p>
          <button class="card-body bg-primary p-lg-2 m-2 rounded text-light">See more bears</button>
        </section>
        
        <!--Card Two-->
        <section class="col col-4 border card p-0 mx-4">
          <img class="img-fluid" src="https://placebear.com/225/224"/>
          <p class="card-body">This bear is looking off into the distance</p>
          <button class="card-body bg-primary p-lg-2 m-2 rounded text-light">See more bears</button>
        </section>
        
        <!--Second Row-->
      </div>
      
      <div class="row row-cols-6 d-flex justify-content-center justify-content-around mb-4">
        
        <!--Card Three-->
        <section class="col col-4 border card p-0 mx-4">
          <img class="img-fluid" src="https://placebear.com/225/223"/>
          <p class="card-body">This bear just found some food</p>
          <button class="card-body bg-primary p-lg-2 m-2 rounded text-light">See more bears</button>
        </section>
        
        <!--Card Four-->
        <section class="col col-4 border card p-0 mx-4">
          <img class="img-fluid" src="https://placebear.com/225/222"/>
          <p class="card-body">This bear is one of our favorites</p>
          <button class="card-body bg-primary p-lg-2 m-2 rounded text-light">See more bears</button>
        </section>
        
      </div>
      
    </div>
    
  </main>
  
</body>

</html>

Here are images showing the variation in pixel widths:

Pixel Difference Image 1 Pixel Difference Image 2

Answer №1

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

  <title>All about bears</title>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>

<body>
  <header class="bg-info">
    <h1 class="pt-4 pl-5">All About Bears</h1>
    <p class="pb-4 pl-5">Read all about bears and what they're like.</p>
    <nav class="text-center mb-4 bg-light py-3">
      <a href="#" class="text-dark px-3">Home</a>
      <a href="#" class="text-dark px-3">About</a>
      <a href="#" class="text-dark px-3">Contact</a>
    </nav>
  </header>
  <main class="pl-4">
    <!--Top Section-->
    <div class="row col-md-6 px-lg-5 col-sm">
        <img class="img-fluid" src="https://placebear.com/490/480"/>
      <section class="col px-lg-5 row-sm">
        <h2 class="text-center py-3 mb-3">Bears are neat!</h2>
      <p class="px-lg-5">Thejk jkee soodjkfd jkl djfedios nkjf de. fjkdosdjd ficklsldf ddfe. jjkldif jjf asope mekdox kididlwne df.
        asdjdfv ioejfdslkcj fdiolsmefjd klfdslkjdf. djfid soox ejf jf dic ciciic deksj zjdklfdd. jsklddox jjifke sjzo.
        sdjidfox.
      </p>
      <p class="px-lg-5"> Ddod co e nfdklooox djfed sox dofdds f od poof fjso f  dfds. hejk didof sdjdof. dis
        sdidof dfjdsioxxoxodfd sjfo, eiw wod jjofdfdwo sdfo. jkee soodjkfd jkl djfedios nkjf de. fjkdosdjd ficklsldf ddfe. jjkldif jjf asope mekdox kididlwne df.
        asdjdfv ioejfdslkcj fdiolsmefjd klfdslkjdf.
      </p>
      <p class="px-lg-5">Thejk jkee soodjkfd jkl djfedios nkjf de. fjkdosdjd ficklsldf ddfe. jjkldif jjf asope mekdox kididlwne df.
        asdjdfv ioejfdslkcj fdiolsmefjd klfdslkjdf. jdkdfjoejfds fjef sdfjo sod qpd fjoxf feea dsj sdf. dsjods jofej djozfjox.
      </p>
      <a class="pl-lg-5 pt-4 mt-4 text-dark" href="#">Source</a>
      </section>
    </div>
    <hr>
    <!--Bottom Section-->
    <div class="row justify-content-center">
      <!--First Row-->
      <div class="row col-md-6 d-flex justify-content-center justify-content-around mb-4">
        <!--Card One-->
        <section class="col col-4 border card p-0 mx-4">
          <img class="img-fluid" src="https://placebear.com/225/225"/>
          <p class="card-body">These bears are playing around</p>
          <button class="card-body bg-primary p-lg-2 m-2 rounded text-light">See more bears</button>
        </section>
        <!--Card Two-->
        <section class="col col-4 border card p-0 mx-4">
          <img class="img-fluid" src="https://placebear.com/225/224"/>
          <p class="card-body">This bear is looking off into the distance</p>
          <button class="card-body bg-primary p-lg-2 m-2 rounded text-light">See more bears</button>
        </section>
        <!--Second Row-->
      </div>
      <div class="row col-md-6 d-flex justify-content-center justify-content-around mb-4">
        <!--Card Three-->
        <section class="col col-4 border card p-0 mx-4">
          <img class="img-fluid" src="https://placebear.com/225/223"/>
          <p class="card-body">This bear just found some food</p>
          <button class="card-body bg-primary p-lg-2 m-2 rounded text-light">See more bears</button>
        </section>
        <!--Card Four-->
        <section class="col col-4 border card p-0 mx-4">
          <img class="img-fluid" src="https://placebear.com/225/222"/>
          <p class="card-body">This bear is one of our favorites</p>
          <button class="card-body bg-primary p-lg-2 m-2 rounded text-light">See more bears</button>
        </section>
      </div>
    </div>
  </main>
</body>

</html>

Replace row-cols-6 with col-md-6

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to ensure that my drop down select menu consistently displays the same data even after performing a query with the menu?

Hey there! I'm facing a little hiccup with a drop-down selection box. Here's what I'm trying to do - get someone to log into a database, and then display all available tables in the selection box. Once they choose a table, they hit select an ...

Tips for concealing overflowing CSS content

How can I prevent CSS content from overflowing? I am trying to display a price tag in the CSS element, but it is protruding out of my card. .content{ content:''; position: absolute; left: 309px; ...

The background image will not repeat to completely cover the height

Click here to view my issue. I have set the background image to repeat the entire height, but it's not behaving as expected. Here is my CSS #wrapper { margin: 0px; padding: 0px; background: url(img02.jpg) repeat-x left top; } I attempt ...

Utilize CSS properties to pass as arguments to a JavaScript function

Is there a way for me to make my CSS animation functions more efficient? I have similar functions for different properties like height, width, and left. Can I modify the function below to accept a CSS property argument instead of hardcoding height? Window ...

Implementing a Vue.js Scrollable Table

I am currently working on a table that is populated using the vue.js v-for method: <table> <tr><th>Name</th><th>Surname</th></tr> <tr v-for="user in users"><td>@{{user.name}}</td><td>@{ ...

Style the item with flexbox to have a border around it without increasing its height

In this scenario, the border is not surrounding the blue box but rather extends over the entire window height. Is there any advice on how to create a border around the blue box? Important Points: The HTML and body definitions cannot be altered. The pad ...

Tips for linking to a page and dynamically adding a class to the body after it has been fully loaded

I've been working on a template that includes a blog.html file featuring various layouts: full-width layout 2 column layout 3 column layout 4 column layout I've customized the blog.html so that when specific classes are added to the body tag, ...

Overflow container list items in Bootstrap

How can I prevent the text in each item of this dropdown list from wrapping and display them in a single line? .autocomplete-items { /* position: absolute; */ /* border: 1px solid #ccc; */ /* border-top: none; */ /* border-radius: 0 0 ...

Having trouble using CSS to darken a background image in React?

My website (React.js) is giving me trouble with darkening the background image. I have attempted to darken the background image without success, even after trying the solution found here. I am utilizing the latest version of the Google Chrome browser for ...

Tips for rotating a canvas object without changing its position

I am currently in the process of developing a JavaScript game centered around a character positioned on top of the world. Although the earth element is already part of the game, I am encountering an issue with its rotation causing it to shift position as w ...

Loading a page with a Chitika ad using Jquery can cause site malfunctions

I am experiencing an issue with my header.php file on my website. I included another PHP file for my ad code, but it seems to load the ad and then redirect me to a blank page. Can someone please review my code and let me know if there is an error? Thank yo ...

I'm noticing that my style.css changes are only showing up after a hard refresh, but then they revert back to an older version when I refresh normally

Apologies for the lengthy title. Here's the issue: I have a WordPress website with a custom theme and its corresponding child theme. Previously, updating the style.css file of the child theme would show the changes immediately after a website refresh ...

Align a div in the center with another div positioned to its left and floated

I am in the process of creating a footer with three components: a logo aligned to the left, a centered navigation menu, and a set of social icons on the right. I have encountered an issue where when I float the logo to the left, the list items within my na ...

The Angular routing feature seems to be malfunctioning as the URL is showing up but the page fails to load

After including angular.min.js and angular-route.min.js I encountered an issue where clicking the login button would change the URL to '/home', but the home.html page wouldn't load. I attempted adding a controller under templateUrl, but it ...

Imagine watching an image shrinking down and appearing in the center of the screen

I'm struggling with making the image smaller and centering it while keeping its original size. I'm using Bootstrap and need a solution for this issue. How can I make the image centered and shown in its original size? <div class="contain ...

The utilization of the <span> tag featuring a {float:right] property causes container expansion in Internet Explorer 7

Within my HTML code, I have an A tag button that contains a Span element to hold icons. This setup functions correctly in most browsers, except for IE7. When I attempt to float the Span to the right side using CSS, it causes issues specifically in IE7, cau ...

Use JQuery version 1.8 or above to link the mousewheel

Currently, my website is utilizing Jquery 1.8.3. Unfortunately, I am facing an issue where I am unable to bind the mousewheel with this version of jQuery, while the 1.4.2 version successfully binds the mousewheel. I am seeking a solution to overcome this ...

Update Input field by eliminating white spaces using jQuery version 3.2.1

I am currently developing an HTML/PHP form for user registration. Using the code below, I have managed to prevent any blank spaces from appearing in the input field: <!DOCTYPE html> <html> <head> <script> function stripspaces( ...

How can a bootstrap gallery maintain a consistent size despite variations in picture dimensions?

I am currently working on creating an image gallery for our website using the latest version of Bootstrap. However, we are facing an issue with the varying sizes of our images. Each time the gallery switches to a new image, it disrupts the overall size and ...

What could be causing the flex item to overstep its bounds in the mobile view?

Just starting to dive into the world of CSS and HTML, I am currently experimenting with FlexBox. I have encountered an issue with my layout and I can't seem to figure out why my second div (.rightContainer) is overflowing its parent. I have tried remo ...