Tips for creating a responsive width for a column of Bootstrap 4 buttons

I am attempting to design a vertical column of buttons that adjust responsively. Despite my efforts, the buttons do not resize properly when the screen size changes. I have explored resources on how to address this issue in Bootstrap and tried adjusting the div sizes with no success.

Here is my code:

CSS:

body {
    height: 100%;
    width: 100%;
}
#button-container {
    height: 75vh;
    width: 10%;
    margin: 5% 2.5% 0 5%;
    background-color: aquamarine;
}
#button-group {
    height: 100%;
    width: 100%;
}
button {
    height: inherit;
    max-width: 100%;
    word-wrap: break-word;
    display: block;
}

HTML:

<div id="button-container" class="container">
<div id="button-group" class="btn-group btn-group-vertical btn-group-lg" 
role="group">
    <button id="about" type="button" class="btn">About</button>
    <button id="resume" type="button" class="btn">Resume</button>
    <button id="works" type="button" class="btn">Works</button>
    <button id="contact" type="button" class="btn">Contact</button>
</div>
</div>

Link to JsFiddle for further reference: https://jsfiddle.net/TravellingPumpkin/hs227bup/6/

Answer №1

If you're utilizing Bootstrap, why not take advantage of the Grid System for your responsive design needs? These pre-built features eliminate the need for custom CSS and simply require applying specific classes. With the ability to select different grid sizes for diverse screen dimensions, everything seamlessly aligns. The Grid System effortlessly breaks down into 12 sections.

In your scenario, replacing the width CSS property with a few grid classes could enhance functionality.

<div id="button-container" class="container">
  <div class="row">
    <div class="col-sm-6 col-lg-4 col-xl-3">
      <div id="button-group" class="btn-group btn-group-vertical btn-group-lg" role="group">
        <button id="about" type="button" class="btn">About</button>
        <button id="resume" type="button" class="btn">Resume</button>
        <button id="works" type="button" class="btn">Works</button>
        <button id="contact" type="button" class="btn">Contact</button>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/hs227bup/7/

The example above, while perhaps not precisely catered to your requirements, acts as a starting point. I introduced a <div> with the row class around your group, followed by another div with grid classes applied.

col-sm-6 specifies a 50% width at the 'small' breakpoint.

col-lg-4 denotes a 33% (4/12) width at the 'large' breakpoint.

col-xl-3 signifies a 25% (3/12) width at the 'extra-large' breakpoint.

Experimenting with these values can help tailor the layout to your preferences.

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

Is the attribute of the label malfunctioning within an Angular directive?

As I delve into the world of angular directives, I have encountered success in many aspects. However, there is one minor issue that has been troubling me lately. Within my directive, I have set a for attribute to match the id of an input field. Strangely, ...

Guide to implementing an ES6 template within an HTML anchor tag href

Hello there, this is my first time seeking assistance here. I have an ajax request returning a JSON response. Now, I am aiming to use the response data to dynamically generate recipe titles and also create clickable links with that data. $( window ).load( ...

When you scroll through the page, white blocks suddenly appear

After completing a website, I noticed some white blocks appearing when scrolling. You can view the site here. This issue occurs on both mobile and desktop devices during the initial load only. Could this indicate that the page has not fully loaded yet? If ...

Implement jQuery Tabs in Brackets software to enhance user experience

My Adobe Creative Cloud subscription is expiring soon, and I am considering switching to Brackets, an open-source code editor developed by Adobe. However, I am facing some difficulties adding jQuery tabs to my HTML documents. I downloaded the 1.10.4 zip f ...

Executing a Python script within an HTML page using Django and extracting a variable from an input form

I have created a sentiment analysis Python script, but now I want to integrate it with an HTML page. The goal is to take input from the HTML form, process it using the Python script, and then display the results back on the HTML page. Currently, I am usin ...

Is it possible to utilize AngularJS ngAnimate to perform cross-fading transitions on list items?

I am currently exploring the ins and outs of angularJS with my simple message ticker example. This ticker displays messages by toggling the CSS display property of one of the li elements. <div id="ngtickerMessage" class="ngtickerMessage"> ...

Tips for managing nested data in Angular 4 using a Bootstrap 4 data-table

I am currently using the Data Table from a GitHub project found at: https://github.com/afermon/angular-4-data-table-bootstrap-4-demo. It works perfectly with data structured in a key-value format like the sample provided. However, I am facing challenges wh ...

Remove the bottom border from the active tab by utilizing the <div> and <a> elements

I am facing an issue with a tabbed menu on my webpage. While the menu is functioning correctly, I am struggling to remove the bottom border from the active tab. You can view all of my test code here. While I have come across solutions using <ul> an ...

Merge web address when form is sent

I'm currently working on a search application using the Django framework and the Yelp API as my backend, which is functioning properly. However, I am facing some challenges with the frontend development, specifically integrating Leaflet.js. My search ...

Tips for maintaining an open side menu

I'm having trouble keeping the side menu open when a user clicks on one of the child menu items. Ideally, I want section 1 to display section 2 content when hovered over, and keep both sections open even when section 2 is clicked. The only time they s ...

Ways to create sidebar images in a dual-column layout

I am currently working on creating images for my sidebar that have the same width but different heights. I am trying to achieve this without any spaces between the images. To get a better understanding of what I am trying to do, please refer to the follow ...

Working with CSS styles for the <datalist> element

I currently have a basic datalist drop-down menu and I am looking to customize the CSS to match the style of other fields on my website. However, as someone new to web design, I am unsure of how to go about this process. Check out the code here: http://j ...

HTML5 sortable lists, ajax posting, and inactive elements are not functioning correctly

I'm currently utilizing a fantastic plugin for jQuery known as HTML5 Sortable. It can be found at . I am attempting to disable certain items using this plugin. My approach involves adding the class="disabled" to the <li> tag and including items ...

Tips on showcasing lengthy string content from JSON in a structured list format using react with typescript

Is there a way to display long string data from a JSON file in a list format when the description string is too lengthy? How can I split or format the description using React and TypeScript? The JSON data I have is as follows: "options": [ ...

Interact with webpage dropdown menus using Python

I'm currently working on a Python script that interacts with a webpage, specifically , to retrieve a (DNA sequence in fasta format) file. The file is automatically downloaded when a user clicks on a dropdown menu. Here's the dropdown menu: Dow ...

SleekScroll, SafariAssist, and Adaptive Navigation

I have a few queries regarding this side here Is there a way to implement smooth scrolling? I've experimented with different options, but removing the .slim from jquery breaks the dropdown functionality. How can I resolve this issue? I encounter ...

Excessive display of Typescript Alert causing unnecessary interruptions

Why is my button creating multiple alerts when clicked? When I click the Login Button for the first time, the alert shows once. But on clicking it again, the alert shows 2 times. Subsequent clicks increase the alert count accordingly. Furthermore, if I c ...

Unable to get PrependTo to remove itself when clicked

Below is a custom jQuery script I put together: $(function(){ $("a img").click(function() { $("<div id=\"overlay\"></div>").hide().prependTo("body").fadeIn(100); $("body").css({ ...

Showcase - Text aligned with image inside a container on a list item

I am currently facing the following situation, which I will illustrate with images: 1st scenario: In the image below, there is a small text and I have encountered an issue. The edge of my list does not align properly with the picture. I would like it to a ...

When is it acceptable to use HTML within PHP without judgment?

Separating control logic from view logic is a common practice, but there are instances where using html templates can be faster and less complicated. I'm wondering where it is appropriate to use this approach. For example, functions that generate dy ...