Project adhoc-bootstrap Step 11

link project ==> https://www.codecademy.com/courses/learn-bootstrap/projects/adhoc-bootstrap

Hello, I would like to have help from the adhoc bootstrap project (Course Learn Bootstrap) with Step 11.While the columns look good on a large screen, the contents look squished on a smaller screen. Change the width of the column so that it has a width of 4 on medium, and larger, sized screens._

For extra small and small-sized screens, it should have a width of 8 .

and if the following code is correct?

code ==>

<div class="row justify-content-center">
  <div class="col-8-md-4">
    <!-- First card goes here -->
    <div class="card border-0" style="width: 18rem;">
      <img src="https://s3.amazonaws.com/codecademy-content/courses/learn-bootstrap-4/adhoc/experienced.png" class="card-img-top" alt="experienced icon">
      <div class="card-body">
        <p class="card-text text-center">Over 9000 happy clients, and we learn something new from each one.</p>
      </div>
    </div>
  </div>

  <div class="col-8-md-4">
    <!-- Second card goes here -->
    <div class="card border-0" style="width: 18rem;">
      <img src="https://s3.amazonaws.com/codecademy-content/courses/learn-bootstrap-4/adhoc/fun.png" class="card-img-top" alt="fun icon">
      <div class="card-body">
        <p class="card-text text-center">Administration? Fun? Yea, somehow we make it happen.</p>
      </div>
    </div>
  </div>

  <div class="col-8-md-4">
    <!-- Third card goes here -->
    <div class="card border-0" style="width: 18rem;">
      <img src="https://s3.amazonaws.com/codecademy-content/courses/learn-bootstrap-4/adhoc/smart.png" class="card-img-top" alt="smart icon">
      <div class="card-body">
        <p class="card-text text-center">Innovative solutions to the trickest of everyday tasks.</p>
      </div>
    </div>
  </div>
</div>

an answer would be welcome.

Thank you !

1 Like

The reason this does not work is becaue the class is not correct.

<div class="col-8-md-4">

This should be

<div class="col-md-4 col-sm-8">

sm for small screens.

Here is a link to the full documentation of this subject. It has alot more handy classes.

1 Like

I am a little confused of the direction
Extra small
<576px Small
≥576px Medium
≥768px Large
≥992px Extra large

Why

from extra small to smal so col-sm-8

then from medium to extra Large so col-xl-4?

finally ?
col-sm-8 col-xl-4?

1 Like

I am not sure what you don’t understand. Could you explain yourself better as to what exactly you don’t understand ?

1 Like

it’s just that I have trouble indicating the beginning and direction of the screens…

if it’s xl-4 to md-4 and sm-8 to col-8 so <div class="col-xl-4 col-sm-8">

or md-4 to xl-4 and col-8 to sm-8 so <div class="col-8 col-md-4">

Excuse me for the explanation but not very good in English (Is that clearer)

But if I followed your

<div class="col-md-4 col-sm-8">

then we exclude xl-4 and indicate md-4 then the sequence sm-8 and indicate not the end col-8

Still not sure if i follow you but here is the general gist of things.

col-md-4

md means the screen size. other possibility’s for this is sm, xl, lg. These are the generally used screen sizes.
4 means the amount of columns the div’s width will be. Bootstrap has 12 total so 4 will be 1/3 of the total width.

so for an example:
col-xl-8 will be displayed with 2/3 of the total width. and only aplies to large screens and bigger.
col-sm-12 will be displayed as 100% of total width. and only aplies to small screens and bigger.

Lastly. You can put multiple classes on a element. for example:"
<div class="col-sm-4 col-xl-12">
This div has the width of 4 columns on a small(sm) screen and bigger but for screens that are considered large(xl) and bigger it would have a width of 12 columns.

It does not matter in witch order you add the classes these will be handled individually.

This topic was automatically closed 60 minutes after the last reply. New replies are no longer allowed.