Hello, I would like to have help from the adhoc bootstrap project (Course Learn Bootstrap) with Step11.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>
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.