bootstrap 5 with uneven spacing

I am working on some HTML/CSS code that utilizes Bootstrap 5.2 and the justify-content-between class in order to move two buttons to the edges of a container.

<div class="container">
    <div class="row">
        <div class="col-12">
            <ul class="d-flex justify-content-center align-items-center bg-grey">
                <li>Test</li>
            </ul>
        </div>
        <div class="col-12">
            <div class="row justify-content-between">
                <div class="col-2 text-start">
                    <button class="btn btn-primary btn-lg">LEFT</button>    
                </div>
                <div class="col-2 text-end">
                    <button class="btn btn-primary btn-lg">RIGHT</button>
                </div>
            </div>
        </div>
    </div>
</div>

This is how I would like the layout to appear - with the LEFT and RIGHT buttons aligned perfectly to the edges.

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

Everything looks good until the viewport width goes below 768px (sm or xs), at which point the RIGHT button overflows.

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

I can adjust the margin at specific responsive breakpoints, but I feel like there might be a more efficient solution without having to do that.

Is there a correct or better method to achieve this desired layout?

htmlcssflexboxbootstrap-5horizontal-alignment

Answer №1

Your second attempt included rows within rows, but the rows should be direct children of the container.

If you don't require Bootstrap grid's column collapsing, consider using explicit flex boxes like this:

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
        <div class="col-12">
          <div class="d-flex flex-column">
            <ul style='background:grey' class="d-flex justify-content-center align-items-center bg-grey">
              <li>Test</li>
            </ul> 
          </div>
          <div class="d-flex justify-content-between">
            <button class="btn btn-primary btn-lg">LEFT</button> 
            <button class="btn btn-primary btn-lg">RIGHT</button>
          </div>
        </div>
    </div>
</div>

A flex-box column is used to stack elements, followed by a flex-box row for the buttons. The current .container element may not be essential, but it helps maintain the padding as originally intended.

Answer №2

Here is a code snippet you can experiment with:

<div class="container">
  <div class="row">
    <div class="col-12">
      <ul class="d-flex justify-content-center align-items-center bg-dark">
        <li>Test</li>
      </ul>
    </div>
    <div class="col-12">
      <div class="row justify-content-between">
        <div class="col text-start">
          <button class="btn btn-primary btn-lg">LEFT</button>
        </div>
        <div class="col text-end">
          <button class="btn btn-primary btn-lg">RIGHT</button>
        </div>
      </div>
    </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

Is it possible to customize the font color of a placeholder in a v-text-field component in Vue?

Recently, I added the following code snippet to my project: <v-text-field hide-details class="search-field" id="name-input" placeholder="Search by name" v-model="search"></v-text-field> I wanted to change the font color of the placeholder tex ...

javascripthtmlcssvue.jsvuetify.js

Tips for changing the color of an underline in an <a> tag when it is hovered over

Is it possible to change the color of the underline in an <a> tag when hovering over it? After some investigation, it seems that direct color changes are not feasible. Instead, you can use the border-bottom option. However, my attempt did not yield ...

htmlcss

`The universal functionality of body background blur is inconsistent and needs improvement.`

I've developed a modal that blurs the background when the modal window is opened. It's functioning flawlessly with one set of HTML codes, but encountering issues with another set of HTML codes (which seems odd considering the identical CSS and Ja ...

javascripthtmlcssarraysbootstrap-4

The appearance of online and local websites varies on a single screen and browser

My current dilemma revolves around the difference in appearance of my website when viewed locally versus online. Both versions are connected to the same git repository and use the same css file. Interestingly, I can view the page on both my local machine a ...

cssrenderingjsxnext.js

Incorporating a stationary navigation bar alongside a parallax scrolling layout

After spending the entire night trying to figure this out, I have had zero success so far. I decided to tackle this issue with javascript since my attempts with CSS have been completely fruitless. This is a demonstration of the parallax scrolling webpage. ...

javascriptjqueryhtmlcss

How to create list item bullets with a star icon using reactstrap/react?

As a machine learning professional looking to enhance my frontend skills, I am curious about how to create list item bullets using a custom star bullet image. Could anyone please share a complete HTML/CSS example with me? Thank you in advance! ...

htmlcssreactjsfrontendreactstrap

Responsive HTML5 audio player adjusts size when viewed on mobile devices

I am facing a challenge with an HTML5 Audio player. It looks fine on desktop but behaves strangely on mobile devices. While the width remains intact, it repositions itself and floats over the element it is contained within. How can I prevent this repositio ...

htmlcssmobile-safarihtml5-audioaudio-player

How to customize field appearance in Django authentication login view by adding a CSS class

I recently started working with Django and came across Django forms when using the django.contrib.auth.views.login view for user authentication. However, I'm struggling to figure out how to add a CSS class to the username and password fields. The doc ...

cssdjangodjango-formsdjango-templates

Can someone please explain how I can extract and display information from a database in separate text boxes using Angular?

Working with two textboxes named AuthorizeRep1Fname and AuthorizeRep1Lname, I am combining them in typescript before storing them as AuthorizeRep1Name in the database. Refer to the image below for the result. This process is used to register and merge the ...

htmlsql-serverangulartypescript

Decrease the gap between the <hr> and <div> elements

I currently have multiple div tags with hr tags in between, resulting in automatic spacing. I am looking to decrease this space. Please view the image link provided below for reference. [I am aiming to minimize the gap indicated by the arrow] Additionally ...

htmlcsstextlinespace

Show a specific form field based on the chosen option in a dropdown menu using Angular and TypeScript

I am looking to dynamically display a form field based on the selected value from a dropdown list. For instance, if 'first' is chosen in the dropdown list, I want the form to remain unchanged. However, if 'two' is selected in the drop ...

javascripthtmlangularformstypescript

Clever method for enabling image uploads upon image selection without needing to click an upload button using JQuery

Is there a way to automatically upload the file without having to click the upload button? Detail : The code below shows an input field for uploading an image, where you have to select the file and then click the "Upload" button to actually upload it: & ...

javascriptphpjqueryhtmlcss

Creating a dynamic navigation bar that adjusts to changing content requires careful planning and implementation

Struggling with achieving my visual mockup while designing a webpage: Check out my web design mockup Currently focusing on section 2 of the page. Using Angular 5, Bootstrap 3, and ngx-bootstrap library to integrate Bootstrap components into Angular. Here ...

htmlcssangulartwitter-bootstraptwitter-bootstrap-3

Looking for assistance with fixing the echo issue in my PHP temperature converter script. Any help is greatly appreciated

Below is my PHP code for converting temperatures: <html> <head> <title>Temperature Conversion</title> <meta charset="utf-8"> </head> <body> <form name="tempConvert" method=&q ...

phphtmlformsecho

Having trouble accessing the div element inserted by the Angular application

I've encountered an issue while trying to access a div that is injected into the DOM by an Angular app on the page. Below is the script I have placed at the end of the HTML page: $(document).ready(function () { var targetNode = document.querySelect ...

javascripthtmlangularjsdom

Ways to refine date results using JavaScript

Here is the JavaScript code I have: $(".datepicker").datepicker(); $(".datepicker-to").datepicker({ changeMonth: true, changeYear: true, maxDate: "0D" }); This code ensures that the date selected cannot be beyond the cur ...

javascripthtml

What could be causing WidgEditor, the JavaScript text editor, to fail to submit any values?

After clicking submit and attempting to retrieve text from the textarea, I am encountering a problem where the text appears blank. The reason for this issue eludes me. function textSubmit() { var text = $("#noise").val(); console.log(text); consol ...

javascripthtmltextareatext-editor

I am attempting to retrieve the aria-expanded value using JavaScript, however, I keep receiving an "undefined" response

I'm attempting to dynamically change the class of a <span> element based on the value of the attribute aria-expanded. However, I am encountering an issue where it returns "undefined" instead of the expected value of true or false. Below is the ...

javascriptjqueryhtmltwitter-bootstrap

Creating a list of definitions in the form of an HTML table using a multidimensional array in

Currently, I am tackling the following challenge: I must create a public static buildDefinitionList() method that produces an HTML list of definitions (using <dl>, <dt>, and <dd> tags) and then returns the resulting string. If the array c ...

javahtmlarraysmultidimensional-arraystringbuilder

The instance is referencing "greet" during render, but it is not defined as a property or method

At the same time, I encountered another error stating "Invalid handler for event 'click'". <template> <div id="example-2"> <!-- `greet` is the name of a method defined below --> <button v-on:cli ...

javascripthtmlvue.js