Make the bootstrap button group adjust its size to fit the container dimensions

My goal is to create a display for multiple images with descriptions using a button cycling system. However, I am facing an issue where the buttons overflow the container instead of fitting within it when I wrap the cycler in a container with a fixed width. How can I make it scale down inside the container instead?

https://i.sstatic.net/IK8Ev.png

https://i.sstatic.net/xM1fz.png

<div class="container w-50">
    <div class="row">
        <div class="col-12 col-lg-6">
            <div class="img-fluid" style="width: 100%" id="cycler">
                <img class="w-100" src="https://via.placeholder.com/500x800" alt="Volunteer Profile Page" />
            </div>
        </div>
        <div class="col-12 col-lg-6 bg-light p-0 mr-5" style="border-radius: 0.25rem;">
            <div class="row">
                <div class="col-12">
                    <div class="btn-group w-100" role="group">
                        <input type="radio" class="btn-check" checked>
                        <label class="btn btn-secondary m-0 selected">Photograph 1</label>

                        <input type="radio" class="btn-check">
                        <label class="btn btn-secondary m-0">Photograph 2</label>

                        <input type="radio" class="btn-check">
                        <label class="btn btn-secondary m-0">Photograph 3</label>

                        <input type="radio" class="btn-check">
                        <label class="btn btn-secondary m-0">Photograph 4</label>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <p class="p-3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi tempore laborum maxime sequi molestiae saepe soluta, quaerat dolorum ipsam incidunt aut amet nemo quis omnis veniam expedita voluptatum, laudantium in?</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
htmlcssbootstrap-5

Answer №1

In the case of "Photograph 1", the word "Photograph" is causing the issue. The container always has to be large enough to accommodate that specific text, which limits its ability to resize smaller. To address this, consider using abbreviations like "P1", "P2", etc. This simple change will resolve the problem.

If you still prefer to use the original text, you can opt for "Photo 1" and slightly reduce the font size. This adjustment will also effectively resolve the issue.

Answer №2

In my opinion, utilizing the text-truncate property is the most straightforward method...

         <div class="btn-group w-100 text-truncate" role="group">
               <input type="radio" class="btn-check" checked>
               <label class="btn btn-secondary m-0 selected text-truncate">Photograph 1</label>

               <input type="radio" class="btn-check">
               <label class="btn btn-secondary m-0 text-truncate">Photograph 2</label>

               <input type="radio" class="btn-check">
               <label class="btn btn-secondary m-0 text-truncate">Photograph 3</label>

               <input type="radio" class="btn-check">
               <label class="btn btn-secondary m-0 text-truncate">Photograph 4</label>
         </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

Discover the array of results by implementing a while loop in JavaScript

My goal is to create a list of outputs that are not evenly divisible by numbers smaller than the input value. For example, if the input value is 10, the list should be 10, 9, 8, 7, 6, 4, 3, 1. I have written some code in JavaScript for this purpose, but ...

javascripthtmlwhile-loop

How to Integrate a DIV Table with Ajax.BeginForm in MVC4

My goal is to integrate a div table with Ajax.BeginForm: This combination will generate the following structure: <div class="Table"> <div class="Title"> <p>This is a Table</p> </div> <div class="Heading"> & ...

cssajaxasp.net-mvc-4html

Using JavaScript in PHP files to create a box shadow effect while scrolling may not produce the desired result

Issue at hand : My JavaScript is not functioning properly in my .php files CSS not applying while scrolling *CSS Files are named "var.css" #kepala { padding: 10px; top: 0px; left: 0px; right: 0px; position: fixed; background - c ...

javascriptphpjqueryhtmlcss

Event Listener for Spelling Quiz Buttons: Check Correct and Incorrect Answers

I am currently in the process of developing a spelling quiz for a project website using HTML, CSS, and JavaScript. The idea is to present the user with a word that has two missing letters indicated by underscores. The user then selects the correct answer ...

javascripthtmlfunctionbuttonaddeventlistener

Is using .htaccess a reliable method for securing a specific file on the server?

Running a classifieds website comes with its own set of challenges, one being the need for an administrator to have the ability to remove classifieds at their discretion. To address this issue, I have developed a simple function that allows me to specify t ...

phpjavascripthtmlsecurity.htaccess

Splitting up database results into groups of three rows and then organizing them into Bootstrap4 rows in Laravel 7

Is it feasible to utilize bootstrap rows when retrieving data from the database? I have designed a layout with 3 columns and my objective is to showcase the database outcomes in these rows. In order to display 3 rows, each containing 3 items on every page, ...

phphtmlcsslaravelbootstrap-4

Ensuring that my divs remain stationary despite changes in the size of the browser window

Hey there! I'm new to web design/development and I've been working on a simple website to get the hang of things. I managed to make my webpage look good at full screen, but as soon as I resize the window, everything starts shifting around and it ...

htmlcss

Getting the text from a Selenium element can become tricky when dealing with product discounts that alter the element

(Programming) I am working on selecting random products from a website, some with discounts and some without. For instance: How do I retrieve product 748 (without discount)? or How do I retrieve product 419 (with discount)? When the product ha ...

javahtmlseleniumtestingautomated-tests

Improving the layout and size of text within input fields

How can we adjust the input text positioning to the right so it's not directly against the edge? Is there a way to move 'searching' 5px to the right? ...

htmlcss

I am working in Angular 13 and attempting to dynamically assign attributes to an SVG HTML element by passing in values from variables declared in a TypeScript file

Within a specific HTML file of my Angular13 app, I'm aiming to dynamically bind a list of attributes and their values to an element using Angular's double-binding approach {{attribute value}}. This will allow me to display a series of social medi ...

htmlangularsvgpropertiesattributes

Tips for minimizing the arrow size in the infowindow on a Google Maps interface

As a newcomer to customizing Google Maps, I am looking to decrease the size of the arrow in the infowindow and position it in the bottom left corner for a better appearance. I am struggling to figure out how to adjust the height and width of the arrow and ...

jquerycssgoogle-mapsgoogle-maps-api-3

Arranging hierarchical data in JavaScript

After populating the hierarchy data, it is structured as follows: Here is a screenshot: I am looking to sort this data. Currently, I have a flat data object for rendering purposes. For example, my rendering object looks like this: renderedobjects=[ {1,. ...

javascriptjqueryhtmlarrayssorting

Is there an issue with BootStrap v5.3 Navbar dropdowns not functioning on WebApp built with AppsScript?

Looking for a solution to the issue with the full-fat Navbar from BootStrap v5.3? Check out the documentation here. You can find an image of the problem at this link: https://i.sstatic.net/yyjZK.png If you're working on an AppsScript WebApp project ...

google-apps-scriptweb-applicationsbootstrap-5

Having trouble with Jquery's Scroll to Div feature?

When I click on the image (class = 'scrollTo'), I want the page to scroll down to the next div (second-container). I've tried searching for a solution but nothing seems to work. Whenever I click, the page just refreshes. Any help would be gr ...

javascriptjqueryhtmlcss

Developing an HTML table with the power of JavaScript and JSON

I am having difficulty creating an HTML table using JavaScript with JSON input. In my code, I'm using a placeholder in the HTML that will be filled by a innerHTML call in Javascript: for (var i = 0; i < json.data.length; i++) { listItem = json. ...

javascripthtmljson

Moving specified data from one interactive table to another interactive table

In my setup, there are two tables - one for products and another for customers: <table cellpadding="0" cellspacing="0"> <thead> <tr> <th>Product Code</th> </tr> </thead> ...

angularjshtml

Building vue js logic to manage state across multiple ul li elements

I have a situation where I have an unordered list with a static number of list items (menu elements) that are rendered on the server side. I need to add some state-based logic to each list item, such as changing the color of the active item and expanding ...

javascripthtmlvue.jshtml-lists

Issues with redirection to registration page in PHP Slim framework

When I access localhost/path/home, it takes me to the homepage where I can either login or signup. Clicking on either option should redirect me to localhost/path/login or localhost/path/signup respectively for the login or signup page. However, there seem ...

htmlanchor

Is it possible to dynamically change the background image using ReactJS?

I attempted to dynamically change the background image style for the div below: Below is my code snippet for implementation: render: function() { var divImage = { backgroundImage : "url(" + this.state.song.imgSrc + "),url(" + this.state.nextImgSrc ...

cssreactjs

The 'utf-8' codec is unable to interpret the byte 0x96 at position 227, as it is an invalid start byte

Recently, I began working with Django. Unfortunately, I encountered an error that I haven't been able to solve. Can anyone explain why this error is occurring? Specifically, I am utilizing {% extends "base.html" %} on my login page. Here is the exa ...

cssdjango