'How to prevent paragraph from expanding bootstrap's col-auto parent width?

I'm using bootstrap's row with two col-auto. Inside the second, I have a form with <input>'s and a paragraph <p>. This second column should have a minimum possible width, according to the input fields (all the input fields have a min-width assigned via maxlength and size attributes).

My problem is that the paragraph is always increasing the width of the column if the paragraph is long enough. I'd rather have some linebreaks and show the content on more lines. Is there a way to do this without setting a fixed width, adding <br> or using javascript?

LIVE : https://jsfiddle.net/hg37j0yt/

htmlcssbootstrap-4


Solution 1:[1]

lol can be easy ... i hope this post will not be treat as advertising :) i bought pingendo.com so i can give you this as an exercise to improve my skills with pingendo:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
  <link rel="stylesheet" href="theme.css" type="text/css">
</head>

<body>
  <div class="py-5 px-0 mx-0">
    <div class="container col-sm-12 col-12 col-md-12 col-lg-12">
      <div class="row">
        <div class="col-4 bg-primary"> COL1 </div>
        <div class="col-8 bg-secondary">
          <input class="form-control" type="text">
          <p > I'm a quite long paragraph and I do not want to expand the width of my column, I'd rather be wrapped. </p>
        </div>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

anyway... if you download the thing you should click on new project, _blank.html , then you will see a blank screen then push f2 key and in the left side you can see some bootstrap objects you can use to test quick an setup for anything use bootstrap

Solution 2:[2]

Can't you just replace <div class="col-auto bg-warning"> with <div class="col bg-warning">?

i.e. don't use col-auto, just use col for the div containing the <p>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Constantin
Solution 2 Edward

Related Questions