Ensure that the width of the column is limited to the size of its content

Is there a way to set the width of a column in bootstrap based on its content size?

I am working with a list of items. The HTML code for this section is as follows:

<div class="row">
            <div class="col-lg-1 " style="background-color: rebeccapurple">
                <input type="checkbox">
            </div>
            <div class="col-lg-10" style="background-color: #007fff">
                Title
            </div>
            <div class="col-lg-1" style="background-color: #777620">
                Button Group
            </div>
</div>

I want the first and last columns to adjust their width according to their content size. https://i.sstatic.net/yi2NK.png

csstwitter-bootstrapgridrow

Answer №1

To make a div autosize, include width:auto; in the style attribute.

<div class="row">
    <div class="col-lg-1 " style="background-color: rebeccapurple;width:auto;">
        <input type="checkbox">
    </div>
    <div class="col-lg-10" style="background-color: #007fff;">
        Title
    </div>
    <div class="col-lg-1" style="background-color: #777620;  width:auto;">
        Button Group
    </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

Bootstrap 4 custom dropdown menu

Looking to revamp the design of my dropdown menu, but struggling to achieve the desired outcome. My goal is to have the drop-down menu match the size of its container. (refer to screenshot below) I've attempted various modifications to the dropdown- ...

twitter-bootstrapdrop-down-menubootstrap-4

How to place an absolutely positioned div inside a scrollable div with overflow-y: scroll

Here is the HTML code: <div class="container"> <div class="scrollable-block"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, whe ...

cssscrollpositionoverflowabsolute

Show a checkmark or X depending on the condition in Javascript

I have an array of data that I want to compare to the input in a text field. If the input matches an element in the array, I want to display a checkmark, and if it doesn't match, I want to display a crossmark. However, I'm having an issue where ...

javascripthtmlcssangular

What is the best way to add custom styles to Material UI tabs in a React application?

I need help styling my material UI tabs within a react component. I am having trouble getting the styles applied correctly, specifically setting the background color and box shadow of the entire bar, as well as defining the indicator background color and u ...

cssreactjsmaterial-uinavigation

Guide on how to use a tooltip for a switch component in Material-UI with React

I am attempting to incorporate a tooltip around an interactive MUI switch button that changes dynamically with user input. Here is the code snippet I have implemented so far: import * as React from 'react'; import { styled } from '@mui/mater ...

javascriptcssreactjsmaterial-ui

Leveraging $_POST data in embedded CSS styling

Can I use a PHP variable in inline CSS code? In the CSS section below, I have tried to incorporate a PHP variable: <style> p { text-align: center; } img{ -moz-animation:<?php $_POST["rmp"]; ?>s rotateRight infinite li ...

phphtmlcssformspost

Content displayed in the center of a modal

Struggling to center the captcha when clicking the submit button. Check out the provided jsfiddle for more details. https://jsfiddle.net/rzant4kb/ <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class=" ...

javascripthtmlcssbootstrap-5

Navigate to a specific section in an Accordion with the help of jQuery

I currently have 2 pages: page1.html, which contains a series of links, and page2.html, where an Accordion is located. The Query: I'm wondering if it's feasible to link directly to a specific section within the Accordion. For instance, if I want ...

javascriptjqueryhtmlcss

Tips for displaying a pop-up when pressing a link:

I've spent a considerable amount of time on this project without making much progress. However, I came across a tutorial with a beautiful menu design that I decided to replicate. Here is the code: HTML: <!DOCTYPE html> <html> <head> ...

htmlcsspopup

Padding beneath font only seen in Apple devices

My horizontal navigation bar and footer appear perfectly on my PC, but when I tested it on a Mac, the font seemed to be raised about 30px above its intended position in the navigation bar. After attempting various CSS resets and adjustments to the line-he ...

macoscssfontsbaseline

What is the process for incorporating CSS, JavaScript, and images into a Django project?

Within the static folder, I have created a CSS file called resume.css with the following structure: static css resume.css In my settings.py file, I did not make any changes to the static code. I have referenced the index.html file in my vie ...

pythonhtmlcssdjangodjango-static

Conceal the initial modal beneath the overlay when the second modal is activated

I have a situation where I am using a modal that contains a button to trigger a second modal. The issue is that the overlay of the second modal does not hide the first modal, it simply darkens the background. How can I make the overlay of the second modal ...

jquerycsstwitter-bootstrapmodal-dialogoverlay

What is the best way to preserve the background color of nested progress bars?

In this scenario, I am attempting to apply border-radius specifically to the upper and lower right corners of the progress bars. The idea is to create a cascading effect where each color (red, green, and blue) progress bar overlaps slightly with the next o ...

htmlcssbootstrap-4

Alternative image loading in a figure element

I'm currently in the process of putting together an image gallery using Angular 4.3.0, where images are displayed as background images within figure elements rather than img tags. The images are initially resized to smaller dimensions before being use ...

javascripthtmlcssangularimage

Issue with overlapping positioning of child components in React

I've come across multiple inquiries addressing this issue, yet none of them have provided a solution that fits my problem. In my scenario, there's a Parent component containing three Child components. import React, { Component } from 'react ...

cssreactjs

Is it secure to use a unique, static HTML/CSS website?

As a web developer, I am currently working on hosting a Wordpress-website for a client. However, my frontend development skills have improved significantly and now I feel inspired to create a simpler and more customizable version on my own. This website i ...

jqueryhtmlcsssecurityweb

Populate a series of rows in R with data

Currently, I am working with a panel dataset in R that consists of observations per group over time (month). I have shared a snippet of the full dataframe below: df <- data.frame(group = c(1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2), month = c("Ja ...

rrowfillpanel-data

The jQuery toggleClass() function is not being applied successfully to content that is dynamically generated from

I've created an awesome collection of CSS-generated cards containing icons and text with a cool animation that expands upon tapping to reveal more icons and options. I carefully crafted the list to look and behave exactly how I wanted it to. But now, ...

javascriptjqueryhtmlcssjson

Ways to conceal the contents of a page behind a transparent background div while scrolling

I created a Plunkr with the following markup: <body> <div class="container-fluid"> <div class="row"> <div class="col-sm-12"> <nav class="navbar navbar-fixed-top"> <div class="container-fluid"& ...

htmlcsstwitter-bootstrap

Issue with aligning items vertically using CSS and Javascript

I must admit, I am not well-versed in CSS. My goal is to create a performance bar using CSS and Javascript. So far, I have managed to generate a background bar with another bar inside that fills up to a specific percentage. However, my issue lies in the fa ...

javascriptcssdom