How do I adjust the Bootstrap 4 column width to match the size of its content?

I am facing the following situation: [![enter image description here][1]][1]

What I want is:

  • Number 1: Adjust the column width to fit the content, in this case the image.

  • Number 2: Resize the column width to accommodate the text "Title of Content"

  • Number 3: Make the width of this column flexible to adjust to the rest of the available space.

My HTML:

  <div class="container-fluid">
    <div class="jumbotron">
      <div class="row">        
        <div class="col-xl-3 .mx-auto text-center">
          <div class="row">              
              <div class="col-xl-1  bg-dark">
                 <img src="img/01_number_in_circular.svg" alt="Step 1">
              </div>
              <div class="col-xl-11 bg-success">
                  <h2>Title of Content</h2>
                  <p>Description Text in short form.</p>
              </div>              
          </div>
          </div>
          <div class="col-xl-9 bg-info">
            Column 3            
          </div>
      </div>
    </div>

I have tried using col-xl-*, but it didn't work.

Is there a specific class that can help me achieve this? I would appreciate your assistance. Thank you.

htmlcssbootstrap-4

Answer №1

Check out the practical example below (run snippet in 'full window' mode). It is based on https://getbootstrap.com/docs/4.0/layout/grid/

See the outcome:

https://i.sstatic.net/ggYjJ.png https://i.sstatic.net/58lJT.png

.col1 {
    background-color: red;
}

.col2 {
    background-color: green;
}

.col3 {
    background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
  <div class="row">
    <div class="col col-md-auto col1">
      1 of 3
    </div>

    <div class="col-md-auto col2">
      Variable width content
    </div>

    <div class="col col3">
      3 of 3
    </div>
  </div>

    <div class="row">
    <div class="col col-md-auto col1">
      1 of 3
    </div>

    <div class="col-md-auto col2">
      Variable width content
    </div>

    <div class="col col3">
      3 of 3
    </div>
  </div>

    <div class="row">
    <div class="col col-md-auto col1">
      1 of 3
    </div>

    <div class="col-md-auto col2">
      Variable width content ......
    </div>

    <div class="col col3">
      3 of 3
    </div>
  </div>

    <div class="row">
    <div class="col col-md-auto col1">
      1 of 3
    </div>

    <div class="col-md-auto col2">
      Variable width content .....................
    </div>

    <div class="col col3">
      3 of 3
    </div>
  </div>
</div>

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

How can I continuously update a datetime tag every second within a Django Template?

I am currently working with Django 3, Bootstrap 4, and MySQL 5.7 on a Laragon server, all running on Windows 10. In one of my views, I have a variable dt_now = timezone.now() that I display in a Template using a simple <p>{{ dt_now }}</p> tag. ...

javascriptjquerydjangobootstrap-4refresh

Combine table cells to improve readability on smaller screens

I currently have a setup designed for larger screens: <table> <thead> <tr> <th>title and image</th> <th>description</th> </tr> </thead> <tbody> ...

javascripthtmlcssresponsive-designhtml-table

How can we add hover effects to Ionic / Angular components when touching or clicking?

For my app, I need to replicate the hover effect from CSS on mobile devices. Users can click and drag elements, and when they drag over certain elements, I want those elements to change z-index and other styles. Is there a way in Angular / Ionic or even ju ...

javascriptjqueryhtmlcssangularjs

The login system detected an error due to an incorrect email/username combination

I've implemented a login system on my website that allows users to create an account, log out, and then log back in. However, there seems to be an issue with the error message displaying when someone tries to log into an account that doesn't exis ...

phphtmlmysql

What is the best way to vertically align two divs on the left and right?

Having trouble aligning my dropdown list vertically with my textarea on the left. It seems like they are clashing together for some reason. UPDATE: Thank you for the assistance, I was able to make the necessary adjustments. JSP: .ExeDropdown{ float: ...

htmlcssjsp

Generate unpredictable visual elements on the canvas using JavaScript

Greetings everyone, I am currently working on creating a javascript game using canvas. My goal is to implement random enemy objects in the game. I have come across this example for spawning: JSFiddle Demo Is there a way to load image(s) instead of balls f ...

javascriptjqueryarrayshtmlcanvas

Why is the ajax request in JQuery initiated before the code in beforeSend is fully executed?

I have encountered an issue with my code. I am trying to get a Reload.gif to start playing on my webpage before sending an ajax request to reload the data. However, the GIF only starts playing after the success function is called. Here is the timeline of e ...

javascriptjqueryhtmlajax

Ways to conclude a running function

This script has been created by me: $(document).ready(function(){ $("div#tabs a").hover(function(){ rod = this.id $('div.tabber').hide(); $('#tabber_' + rod).fadeIn(); $("div#tabs a").removeClass("ta ...

jqueryhtmlmenutabsfadein

What is the best way to align multiple form elements both horizontally and vertically within a frame?

Issue I have checked out various resources, like this one and this one, but I am still struggling to center my form elements both vertically and horizontally on the screen. I have tried using flex, padding, and stretching but nothing seems to work. Even a ...

htmlcssflexbox

I'm looking for a skilled CSS spinner creator. Can anyone recommend one?

Can anyone recommend a good online application for creating CSS spinners? I've been searching and only found one on David Walsh's blog, but it only has one available. Any suggestions? ...

ajaxcssspinnerloading

Having trouble with wkhtmltopdf.exe not responding to the --no-stop-slow-scripts command?

We are currently utilizing wkhtmltopdf.exe (0.10.0 rc2) to change a substantial HTML page containing a significant amount of javascript into a PDF document. Initially, we encountered issues with the PDF being generated before all the javascript could execu ...

javascriptjqueryhtmlpdfwkhtmltopdf

Older versions of Internet Explorer, specifically IE 8 and below, are causing issues with iframe

I am currently working on a website that includes an embedded Vimeo video. The majority of our target audience uses IE8 or older, and interestingly enough, most of them have their browsers zoomed to 125% view. Unfortunately, while everything else on the si ...

cssinternet-exploreriframezooming

Align two divs with text in the center

I am having trouble centering two divs horizontally and aligning them between each other. The issue arises when I add text of different sizes in each div. Here is an example: http://jsfiddle.net/DgEcs/1/ Why does the red div move down and how can this be ...

css

What could be causing the text alignment issue in the flexbox next to this image?

I am having trouble centering a logo and the words 'style guide' next to each other in the header. I am using flexbox for this layout, but the text positioning seems off. I suspect it may be due to scaling the logo to half size, but I can't ...

htmlcssflexbox

Discover all CSS elements with Python Selenium and replace them all

When automating with Python Selenium, I am trying to modify the CSS element style to change the theme color of a page. An example of the page element is shown below: <div style="background: #e7e7e7"> <div style="border-bottom: #e ...

pythonhtmlcssselenium

No overflow is occurring within the DIV element

This code snippet is fully functional on all browsers except for IE. Unfortunately, the overflow feature does not seem to be working correctly. Any assistance would be greatly appreciated. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN ...

htmlcssinternet-exploreroverflowdoctype

What is the best way to retrieve a particular div element from a webpage?

I'm having trouble retrieving a specific div element (specifically with the attribute id="vung_doc") from a website. Instead of getting just that element, I seem to be getting almost every element on the page. Any ideas on what could be causing this i ...

phphtmlxpathdomdocumentdomxpath

[SCSS] I am experiencing difficulties with loading fonts on my machine/browser, while they are functioning normally on other devices

When using relative paths, fonts may not load properly. However, absolute paths seem to work without any issues. //styles.scss @font-face { font-family: 'Roboto-Bold'; src: url('../fonts/Roboto-Bold.ttf'); } @font-face { font-fam ...

cssreactjssassvite

Combining DataTables with multiple tables sourced from various JSON arrays

I am trying to display data from two different arrays within the same JSON source in two separate tables, but my code seems to be malfunctioning. JSON Information: { "Policies": [ { "name": "A", "id": "1", "score": "0" } ], ...

javascriptjqueryhtmljsondatatables

Searching for all classes and IDs in a CSS Stylesheet that include a specific keyword

I am currently working with a premium WordPress theme that has an extensive styles.css file consisting of over 25,000 lines. My goal is to make sitewide changes to the font and main color, and in order to do this effectively, I need to identify all classes ...

cssregex