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

Question

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/

score 2 · Answer 1 · answered Dec 15 '22 at 19:38

2

Old question but it took me a while to find the answer. Add the following style to the child in the col-auto div to prevent it from expanding the width of the parent:

style="min-width: 100%; width: 0;"

reference: https://stackoverflow.com/a/36092670/1788672

answered Dec 15 '22 at 19:38

djalonso

665
5
7

Great find. This trick worked on chrome at least – Augusto Barreto Jul 13 '23 at 23:04

score 0 · Answer 2 · answered Aug 25 '19 at 14:05

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

bootstrap was created to build 100 % responsive stuff ,relative things not fixed obsolete stuff that will conduct to non responsive design — , Aug 25 '19 at 14:25
Sry this is not what I'm looking for and what I was asking for... I have asked for `col-auto` (with minimum possible width) and not for some `col-x`, but thank you for your effort. — ezegoing, Aug 25 '19 at 14:34

score 0 · Answer 3 · answered Apr 15 '22 at 02:11

0

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>

answered Apr 15 '22 at 02:11

Edward

580
3
15

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

3 Answers3