Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Am using bootstrap 4 and have my 4 columns in 1 row. When I go to mobile I want the 4 columns to become 1 column (essentially add a row per column.)

My understanding was that if I add col-sm-12 to my divs this would do what I want but it is not working. What am I missing?

<div class="col col-sm-12">
<div>Required Forms</div>
<p>View what forms are required for shipping to the event.</p>
<!-- col -->
<div class="col col-sm-12">
<div>Invoice Instructions</div>
<p>Instructions on how to complete the commercial invoice form.</p>
<!-- col -->
<div class="col col-sm-12">
<div>Labeling &amp; Packing</div>
<p>Tips on packing and labeling your shipment.</p>
<!-- col -->
<div class="col col-sm-12">
<div>Wood Packing</div>
<p>Important information on wood packings (includes skids / pallets)</p>
<!-- col -->
<!-- row -->
For mobile devices like smartphones, you should use the smalles breakpoint class, which is just col-*, the col-sm-* classes are for slightly larger screens (like landscape view of phones).
You can check the responsive breakpoint limits in Bootstrap Docs
NOTE: Also keep in mind that the col-* classes will apply to the specified breakpoint onwards, so if you just use col-12, then the element will use the full with on all screens, if you want this to change you have to set another class for larger devices like col-md-4 so the element only uses 4 columns on tablet screens.
.col {
  border: 1px solid #000;
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col col-12 col-sm-6 col-md-3">
    <div>Required Forms</div>
    <p>View what forms are required for shipping to the event.</p>
  <!-- col -->
  <div class="col col-12 col-sm-6 col-md-3">
    <div>Invoice Instructions</div>
    <p>Instructions on how to complete the commercial invoice form.</p>
  <!-- col -->
  <div class="col col-12 col-sm-6 col-md-3">
    <div>Labeling &amp; Packing</div>
    <p>Tips on packing and labeling your shipment.</p>
  <!-- col -->
  <div class="col col-12 col-sm-6 col-md-3">
    <div>Wood Packing</div>
    <p>Important information on wood packings (includes skids / pallets)</p>
  <!-- col -->
<!-- row -->
Just test working well:
<div class="row justify-content-center">
<div class="col col-12 col-sm-6 col-md-2">
Content Center
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.