title: Wrap Text Around Fixed Column Width React Bootstrap Layout
body: <p>I have created a React Bootstrap Card with four columns as per the grid system layout. I'm not the greatest at styling or CSS but I would like the text to be wrapped if it is too long- so for instance, in the image below, &quot;BosniaAndHerzegovina&quot; has pushed one of the columns to the bottom of the card, when I really want the text to be wrapped according to the column size.</p>
  <p>Here is my JSX for the first column:</p>
  <pre><code>return (
          &lt;Card style={{ width: '25rem' }}&gt;
              &lt;Card.Body&gt;
                  &lt;Row&gt;
                      &lt;Col sm='auto'&gt;
                          &lt;Row style={{ marginTop: '5px', marginBottom: '2.5px' }}&gt;
                              {teams[0].name}
                          &lt;/Row&gt;
                          &lt;Row style={{ marginTop: '5px', marginBottom: '2.5px' }}&gt;
                              {teams[1].name}
                          &lt;/Row&gt;
                          &lt;Row style={{ marginTop: '5px', marginBottom: '2.5px' }}&gt;
                              {teams[2].name}
                          &lt;/Row&gt;
                          &lt;Row style={{ marginTop: '5px', marginBottom: '2.5px' }}&gt;
                              {teams[3].name}
                          &lt;/Row&gt;
                      &lt;/Col&gt;
  
  .
  .
  . 
  </code></pre>
  <p>How do I get the text to wrap around a fixed column width?</p>
  <p><a href="https://i.stack.imgur.com/KX3i9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KX3i9.png" alt="enter image description here" /></a></p>