Project adhoc-bootstrap Step 11

Projects
1

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
2

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
3

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
4

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

1 Like
5

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

6

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.

7

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