How can I stop a paragraph from extending the width of its parent col-auto in Bootstrap?

Currently, I am utilizing Bootstrap's row feature along with two col-auto. Inside the second column, there is a form containing <input> elements and a <p> paragraph. The intended width of this second column should be as minimal as possible, based on the input field widths (each input field has a minimum width established using the maxlength and size attributes).

The issue I am facing is that the paragraph tends to expand the column width if it contains a significant amount of text. Ideally, I would like the content to break into multiple lines rather than expanding the column width continuously. Is there a method to achieve this without specifying a fixed width, inserting <br> tags, or resorting to JavaScript?

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

htmlcssbootstrap-4

Answer №1

After searching for quite some time, I finally found the solution to an age-old question. To prevent a child element in the col-auto div from expanding the width of its parent, simply add the following style:

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

If you're curious about the source of this tip, check out this link:

Answer №2

It's quite fun to play around with lol... I wanted to share my recent purchase of pingendo.com, not to promote it though :) I acquired it to practice and enhance my skills using Pingendo, here's a snippet of code for you to try out:

<!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 > This is a lengthy paragraph that should not exceed the column width, but instead be wrapped within it. </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>

By the way, if you decide to give it a go, simply create a new project on '_blank.html', then press the F2 key. On the left side, you'll find various Bootstrap components to experiment with and easily set up your projects using Bootstrap.

Answer №3

Instead of using 

<div class="col-auto bg-warning">
, why not replace it with 
<div class="col bg-warning">
?

In other words, opt for col over col-auto when styling the div that houses the <p>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Change the content of a selectbox dynamically with the help of jQuery and AJAX

Currently, I am exploring the best approach for a specific challenge: I have various categories, subcategories, sub-subcategories, and so on, that I need to display in separate select boxes. For instance, initially, the options may look like this: <sel ...

javascriptjqueryhtmlajax

Masonry layout organizes images in a vertical stack, with one image per row

After implementing Masonry on my website, I encountered an issue where all the images stack vertically in a single row once the page loads. Instead, I would like them to stack both horizontally and vertically. You can view the problem on My Jsfiddle. This ...

javascriptcsstwitter-bootstrapjquery-masonrymasonry

Center nested rows vertically within an alert box using Bootstrap

Can anyone provide some insight into why the inner row is not vertically centered within its alert-box? I feel like it might have something to do with the nested row structure. Here is a link to the code: https://jsfiddle.net/d2pg4xta/ <div class=" ...

htmlcssbootstrap-4

I am looking to create a layout with two images placed next to each other using bootstrap, regardless of their dimensions. However, the images do not automatically adjust themselves within

<div class="container" style="background-color: aqua;"> <div class="row"> <div class="col-md-6"> <img src="nature.jpeg" class="img-responsive"> </div> <div class="col-md-6"> ...

htmlcssangularbootstrap-4

Chrome leak when rounded border in `overflow:hidden` parent is exceeded

Even with a rounded parent element, the hidden part of a child element continues to appear in Chrome: In Internet Explorer, adding the CSS property z-index to the parent element can solve this issue. However, this solution does not work in Chrome. #con ...

htmlcssgoogle-chrome

Problem with fetching Grails

I have a table nested within an anchor tag. The table is centered on the page, with each row containing an image. When the page loads, I noticed the following: a) The table initially appears at the top-left corner of the screen. b) As there are multiple v ...

javascripthtmlcssgrails

Margin in Bootstrap Panel Not Set to 0 as Needed

My bootstrap panel's margins are set to 0, but it doesn't seem to actually be 0. In the image attached, the margin shows as "-", which I assume means 0. However, when I highlight it, I see a large block of orange. Does this indicate that the marg ...

htmlcsstwitter-bootstrappanel

Retrieving Data Value from a Website with Python Web Scraping

Introduction Greetings everyone! I am new to the world of Python and web scraping. Currently, I am using a Mac (Sierra) with Jupyter Notebook through Firefox (version 87.0). My goal is to extract various data points from a webpage similar to the one found ...

pythonhtmlseleniumweb-scrapingbeautifulsoup

Display a border on a div only if its height exceeds a specific threshold

Imagine I have a div set with a maximum height of 350px. If the content exceeds this height, the div will overflow and display a scroll bar. But how can I make sure that a border is visible when there is no scroll bar present? Appreciate any help. Thank ...

css

A triangular-shaped div positioned at the bottom with a captivating background image

Is there a way to create a div with a unique twist - a triangle shape at the bottom? I've been attempting to add a background image within the triangle using a pseudo element (:after), but so far, it hasn't been successful. #homebg:after{ co ...

htmlcsssvgcss-shapes

The registration page in PHP is malfunctioning, and the reason remains a mystery to me

Having trouble with my register page submit button. Any help is appreciated. Below is the structure of my SQL table: CREATE TABLE `USERS` ( `id` int(20) NOT NULL AUTO_INCREMENT PRIMARY KEY, `username` varchar(50) NOT NULL, `password` varchar(50) N ...

phphtmlmysql

Need help restarting a timer I've built in Angular with just a click?

I am in the process of developing a compact application that will help me keep track of my activities within a specific time frame. Once I input an activity into a field and click "OK," it should be added to a list. My current challenge lies in resetting ...

htmlangulartypescript

Tips for presenting a returned list of Objects from the AdminController to the Admin interface in asp.net MVC5

Two methods have been configured in the AdministrationController to handle locked accounts. One method will collect all locked accounts, and the other method will unlock an account when the user id is passed to it. public bool unlockUserById(String userId ...

c#htmlasp.netasp.net-mvc-5

Is it possible to modify the :hover effects of a material-ui outlined select component?

I am currently developing a react application using Material UI. My goal is to change the color of a selector to white when hovering over it. However, I have encountered difficulties in applying the style as intended. Even when directly adding classes, the ...

cssreactjsselectmaterial-uistyles

Increase the number of elements every time a button is clicked

I have 5 buttons, and each button click will add its respective element. My concern is that when I go back to a previous button, only the elements up to that point should be shown. For example: If I click on button 5, it shows 5 added elements. If I then c ...

javascripthtmljquery

The CSS transformation is being overridden

Having an issue where I have two functions that both apply a CSS transform to an element using jQuery, but they end up overwriting each other. These functions are called at different times and have no knowledge of each other. An example showcasing the pro ...

jquerycsstransform

Creating adjustable absolute positioned elements in Bootstrap 4 for optimal responsiveness

Is there a Bootstrap 4 class that can help me position an absolute yellow color container in a responsive way across all devices, without the need for writing multiple media queries? I want to achieve a screen layout like this on my webpage. Any suggestion ...

htmlbootstrap-4responsive

Is there a way to iterate through rows and show a different div using jQuery when hovering over a specific div?

I am currently facing a challenge in trying to display one div when another is hovered over, especially with the use of a loop. This is my HTML: <div class="row"> <div class="half"> <img class="restaurant-logo" src= ...

jqueryhtmlhover

What is the best method for importing data into an array using AngularJS?

Check out the Plunker link I have shared. Can you help me identify any mistakes? <a href="https://plnkr.co/edit/3VryaPGtgPRD6Nn8zx7v">Click here to visit the Plunker page</a> ...

htmlcssangularjs

Creating personalized buttons with Bootstrap

I'm looking to create custom buttons using Bootstrap. The "Get Quote" button should have a magnifying glass symbol on its left, and the "Clear" button should have a symbol on its left as well, like shown in the image below. Additionally, I want to cha ...

htmlcssbootstrap-4