Arrange elements within a division when the division splits into two rows

Currently in my setup:

I have a navigation bar with a group of buttons located on the right-hand side.
When the navbar is reduced to a smaller size, like on a smartphone, the two buttons get split across 2 rows within the div. In this state, I'm aiming to align these 2 buttons to the right side inside the div. However, despite numerous attempts, Bootstrap always ends up aligning the items to the left side, as seen in the provided image. (outline included solely for visualization)

Effective Layout:

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

Ineffective Layout:

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

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ef8d80809b9c9b9d8e9fafdac1dec1dc">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8eece1e1fafdfafceffecebba0bfa0bd">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


<!-- Body -->
<nav class="navbar navbar-expand d-flex justify-content-around" style="box-shadow: 0 2px 0 #202020;">
  <div class="">
    <a class="btn btn-orange m-1" href="./projects">Projects</a>
  </div>
  <a href="./">
    <image class="my-1" id="logo" src="./res/fnbg-logo6.svg" alt="FNBG Logo">
  </a>
  <div class="border me-2">
    <a class="btn btn-orange m-1 align-self-end" target="_blank" href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ee8fae8c8dc08a8b">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="01604163662f6564">[email protected]</a></a>
    <a class="btn btn-orange m-1 align-self-end" target="_blank" href="https://linkedin.com/in/abcde/">LinkedIn</a>
  </div>
</nav>

Any suggestions on how to resolve this issue?

htmlcssbootstrap-5

Answer №1

Create a flex container for the buttons by adding the d-flex class to the div, then include the classes justify-content-end (to align them to the right) and flex-wrap so they wrap correctly.

For more information, visit: https://getbootstrap.com/docs/5.0/utilities/flex/

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="680a07071c1b1c1a0918285d465a4658450a0d1c0959">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c6a4a9a9b2b5b2b4a7b686f3e8f4e8f6eba4a3b2a7f7">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>


<nav class="navbar navbar-expand d-flex justify-content-around" style="box-shadow: 0 2px 0 #202020;">
  <div class="">
    <a class="btn btn-orange m-1" href="./projects">Projects</a>
  </div>
  <a href="./">
    <img class="my-1" id="logo" src="./res/fnbg-logo6.svg" alt="FNBG Logo">
  </a>
  <div class="border me-2 d-flex justify-content-end flex-wrap">
    <a class="btn btn-orange m-1" target="_blank" href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="50311032337e3435">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="afceefcdcc81cbca">[email protected]</a></a>
    <a class="btn btn-orange m-1 align-self-end" target="_blank" href="https://linkedin.com/in/abcde/">LinkedIn</a>
  </div>
</nav>

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 fails to center elements vertically`

Struggling to center a panel using Bootstrap 4? Despite adding classes like align-items-center and h-100, the header continues to stay at the top of the page. Does anyone know the solution? This is in an Angular 4 project with Bootstrap. <div class=&ap ...

htmlangularbootstrap-4

Sending data to a React component from regular HTML

I have a question about implementing a method to pass custom attributes from HTML elements as props to React components. Here's an example: function someFunction(props) { return <h1>props.something</h1> } HTML: <div id="someEl ...

javascripthtmlreactjstypescriptfrontend

What is the best way to only load a specific div from another webpage onto my own webpage without loading the entire page?

I am currently working with two webpages named internal.html and external.html Within internal.html, I have the following code snippet that loads external.html into a div with the id "result": <script src="http://ajax.googleapis.com/ajax/libs/jquer ...

javascriptjqueryhtml

Works well with Bootstrap but not compatible with other frameworks

Looking for assistance with a code within Bootstrap (HTML and CSS). I have been trying to create a dropdown menu (burger menu) following the Bootstrap Documentation, but I am unable to expand the burger menu (Dropdown). I have tested it on both Firefox an ...

htmlcss

"Using Javascript to assign a class based on a date being greater than

I am facing an issue with a script that applies a CSS class to table cells if the date is greater than a certain value. Currently, the script only works for today's date. I need it to work for dates within and outside of this week as well. $('td ...

javascriptjquerycssdate

How can I showcase the index of `<tr>` and `<td>` elements in a dynamically generated table

How can I print the index of table rows and data on click in javascript? <html> <head> <title>Table Creation</title> <script language="javascript" type="text/javascript"> function createTable() { ...

javascripthtmlcss

What causes the modal to appear and then vanish suddenly?

I've created a simple modal code with minimal JS involved. When the button is clicked, the modal appears briefly, then the page refreshes and the modal disappears. I'm not sure what could be causing this issue. Any help would be appreciated! h ...

javascriptcssbootstrap-4modal-dialog

Whenever the user hits the "Enter" key, a new element will be generated and added to the bottom of an existing element

I am in need of creating a new element at the end of another element. For instance, let's say I have this element: <div id="elmtobetrig">Element that should be followed by another element when the user hits enter after this text. <! ...

javascripthtmlcss

Struggling to Send Data and Generate a Calculated Value with Django

Hello, I am currently in the process of learning Django as a beginner. I have written some code that allows me to input data, but for some reason, I cannot successfully POST it to the database. I'm not quite sure where I've made an error. Model ...

pythonhtmldjangodjango-models

Achieve consistent heights for divs within table cells without the use of JavaScript

Is it possible to make two divs contained in table cells in a shared row both have the height of the taller div without using JavaScript? Take a look at this simplified example here: http://jsfiddle.net/Lem53dn7/1/ Check out the code snippet from the fidd ...

htmlcssdynamichtml-table

Adjust text alignment dynamically as a div changes size with CSS in ASP.NET

For the menu bar on my site, I utilized flex containers and nested div elements. Currently, all text is aligned at the center. However, when the website is viewed on smaller devices and it resizes, I would like the text to be aligned to the left. Is there ...

htmlcssasp.net

What is the best way to update text in an element when hovering or activating it?

I am currently designing a website with a prominently placed "Hire me" button in the center of the page. The button was implemented using the following code: <div id="hire_me_button"> <a href="contact.html"><h4 id="hire_me" class="butto ...

javascriptjqueryhtmlcss

Adjusting animation placement when resizing the window

Is it possible to utilize jquery window.resize() to ensure that the positioning of the two donuts never interferes with the text in the middle of the home? I am unsure of how to connect the x and y values of the window size to adjust the top/left and botto ...

htmlcssanimationposition

What are the steps for transitioning with JavaScript?

My goal is to make both the <hr> elements transition, but I'm struggling with only being able to select the lower <hr> using CSS. html { margin-bottom: 0; height: 100%; min-height: 100%; } body { margin-top: 0; height: 100%; ...

javascripthtmlcss

The comparison between AJAX and JSON passing and PHP generating HTML versus returning it

Currently, my code looks like this: <li onclick = " function CBAppData( callerObj, data ) { var string = ''; for( a in data ) { debug.push( data[ ...

phpjavascripthtmlajax

What is the best way to add a CSS link if a request is not made using AJAX?

My webpage, 'foo.html', retrieves data from a database using AJAX ('ajax.html?options=option1') to populate a table. The table is styled nicely with CSS that is linked to 'foo.html'. However, I also want the ajax.html page to ...

htmlcssajax

Determining the class condition using AngularJS ng-class

I am working with an HTML element that contains AngularJS directives: <div class="progress"> <span ng-repeat="timeRangeObject in timeRangeObjects" style="width: {{timeRangeObject.percentage}}%" ...

javascripthtmlangularjs

The directive in Angular compels the webpage to carry out the added HTML attribute

There is a custom directive in my code that applies the spellcheck attribute to two div elements as shown below: (function(){ 'use strict'; app.directive('spellchecker', spellchecker); spellchecker.$inject = ['$timeout&a ...

javascripthtmlangularjs

Ways to create a border button with a matching width to the text above using CSS

Is it possible to style a border button in CSS so that the width matches the text above? I am trying to achieve a clean look for the navigation selected text, where the border-bottom aligns with the text above. Here is an example of what I have attempted ...

htmlcss

Using Jquery to toggle columns based on their index and custom attribute

My table has two rows in the header: the first row with colspan and the second row containing headers. You can see an image below for reference. https://i.sstatic.net/qwSBL.png With a jQuery function, I extract all the table cell values from the second h ...

javascriptjqueryarrayshtmlhtml-table