Ways to arrange buttons vertically so they are perfectly aligned beneath one another

I'm trying to align a set of buttons, each containing an information icon, vertically under each other. The current alignment can be seen in image_1 below.

Can someone please provide me with guidance on how to achieve this using CSS and HTML? I was thinking about setting equal margins from the left side starting from the checkbox, but I'm not sure how to implement it.

Here is the HTML markup for the buttons:

<button class="btn btn-sm btn-icon" (click)="showInformation('SERVICE_SYNOPS_AGGREGATED_AREAS')">
    <clr-icon shape="help-info" class="is-solid"></clr-icon>
</button>
                        
<button class="btn btn-sm btn-icon" (click)="showInformation('SERVICE_SYNOPS_AGRICULTURAÖ_AREAS')">
    <clr-icon shape="help-info" class="is-solid"></clr-icon>
</button>                       
                            
<button class="btn btn-sm btn-icon" (click)="showInformation('SERVICE_SYNOPS_WATER_AREAS')">
    <clr-icon shape="help-info" class="is-solid"></clr-icon>
</button>

img_1:

https://i.stack.imgur.com/sB4pw.png

htmlcss

Answer №1

Utilize Bootstrap classes like row and column for creating a structured layout.

Explore more on Bootstrap's Grid system

<div>
    <div class="row">
      <div class="col-2">
        <input type="checkbox" />
      </div>
      <div class="col-8">
        Aggregated Areas
      </div>
      <div class="col-2">
        <span style="border: 1px solid lightgreen">i</span>
      </div>
    </div>
    <div class="row">
      <div class="col-2">
        <input type="checkbox" />
      </div>
      <div class="col-8">
        Aggregated Areas
      </div>
      <div class="col-2">
        <span style="border: 1px solid lightgreen">i</span>
      </div>
    </div>
    <div class="row">
      <div class="col-2">
        <input type="checkbox" />
      </div>
      <div class="col-8">
        Aggregated Areas
      </div>
      <div class="col-2">
        <span style="border: 1px solid lightgreen">i</span>
      </div>
    </div>
  </div>
  
  <link rel="stylesheet" type="text/css"
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
  </script>

Answer №2

Based on the image, it appears that the box has a set width. To work within this constraint, try incorporating an inline span element between the text and button with a width set to occupy the remaining space. Doing so should align the buttons to the right side of the box.

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

Opening a modal from a different component in Angular 6

I am attempting to launch a modal that is associated with a separate component. However, I encountered an error ERROR TypeError: Cannot read property 'show' of undefined Here is my code: product-catalog.component.html <app-cart-table-modal& ...

javascriptangularhtmltypescript

After filling out the form, the user's entered information is instantly shown on the same page

I want to create a form where my friend can input information that will be displayed on the same page. For example, when he enters the title in a text field and clicks submit, it should appear in the title box. Additionally, he should be able to enter va ...

jqueryhtmlcssajax

When a user clicks anywhere on the website, the active and focused class will be automatically removed

I'm currently working with Bootstrap tabs on my website. I have three tabs, and when a user clicks on one, the active and focus classes are added to indicate which tab is selected. However, I've encountered an issue where clicking anywhere else ...

javascripthtmlcss

Tips for switching the status of each item as I navigate the page with the tab key

I am facing an issue with my list of items that have hidden content appearing on hover. I want to achieve the same functionality while tabbing through my page, but currently, all hidden content appears at once. Check out a live example of my code here jQ ...

javascriptjqueryhtmlcss

Adding two BR tags between inline images within a wrapper is causing inconsistencies in spacing when viewed in Firefox compared to all other browsers. Check out an example of this issue in

JS Fiddle Link http://jsfiddle.net/Xfvpu/1/ Having a perplexing issue with image rendering in Firefox compared to other browsers. The xhtml doctype is used with proper br / tag spacing, but the gap between two images on this specific document displays dif ...

htmlcssbrowser

The UI-SELECT feature in angular-js does not seem to be displaying

I've added the necessary ui-select js and css files to my page : <link href="assets/plugins/ui-select/select.min.css" rel="stylesheet" type="text/css" <script src="assets/plugins/ui-select/select.min.js" tyle="text/javascript" </script> ...

javascriptangularjshtmlui-select

Is there a way for me to identify the scrolling height and dynamically adjust the title using jQuery?

I am in the process of creating a list of shops from different countries for my website. I want to implement a feature that detects when the user has scrolled to a specific area so I can update the title at the top accordingly. My idea is to assign classe ...

jqueryhtmlcssscrollhtml-lists

Tips for aligning a Material UI FAB button in the center and keeping it in the center while resizing the window

Is there a way to center a MaterialUI FAB button and keep it centered while resizing the window? The current positioning is not centered, as seen in the screenshot below, and it does not adjust with window size changes. Below is the code for the current F ...

cssreactjsmaterial-ui

PHP: The constant ENT_HTML5 is not defined and has been assumed as 'ENT_HTML5'

I encountered the following error message: Use of undefined constant ENT_HTML5 - assumed 'ENT_HTML5' in /blahblahpath/application/models/Post.php on line 12 This error occurred in a basic model that handles some POST input in a forum applicatio ...

phphtmlubuntuazure

In the thymeleaf fragment, the th:field attribute is marked with a crimson underline

I am facing an issue with a fragment that opens a modal when a button is clicked. Inside the modal, there is a form with a text field for token and submit button. However, I am getting a red squiggle underneath the th:field attribute "token", and I'm ...

javahtmlspringthymeleaf

php executing javascript - error

I have a question regarding my PHP file code: echo '<script type="text/javascript">'; echo '<audio id="player" src="../cdh/ba1.mp3"></audio>'; echo '<a onclick="document.getElementById( ...

javascriptphphtmlcss

Attach a button and arrow to the cursor while it is hovering

Can anyone help me figure out how to make a button magnetize the content (arrow) along with it when hovered over by the cursor? I found an example of what I want on this website , but I am struggling to implement it in my own code. I've searched thro ...

javascripthtmlcss

Troubles encountered when loading pages into a div using ajax navigation

As someone new to the world of programming, I am embarking on the journey of creating a simple website for myself. Currently, my website consists of a header, navigation links, an image below the nav (to be updated later), and 3 content divs beneath that. ...

phpajaxhtmlnavigationexternal

Horizontal scroll box content is being truncated

I've been trying to insert code into my HTML using JavaScript, but I'm facing a problem where the code is getting truncated or cut off. Here's the snippet of code causing the issue: function feedbackDiv(feedback_id, feedback_title, feedb ...

javascripthtmlcssscrollhorizontal-scrolling

Attempting to create a slider utilizing jQuery

I'm currently working on creating a slider using jquery. I have downloaded the cycle plugin for the slider and included it in my file. The slider consists of 7 pictures. Below is the code I am using, can someone please help me identify any issues? &l ...

javascriptjqueryhtmlcss

What is the best way to customize the appearance of Image tags located inside SVGs, whether they are in separate files or embedded within the code

I am developing a custom SVG editor application and facing an issue with implementing a highlighted effect when an <image> element is clicked. I have successfully accomplished this for other elements like <circle> by adjusting attributes such a ...

javascripthtmlcsssvgsnap.svg

The JavaScript-set value in a form field is not being transmitted to the PHP script within the $_POST array

Struggling to pass a JavaScript value to a .php script, and then on to a .txt script. It works fine with regular numbers, but when trying with the variable it fails, leaving the .txt file blank. Despite extensive research online, I can't seem to get i ...

javascriptphphtmlformspost

Generate an HTML table from a CSV file with no success in finding a working solution

I came across a solution here However, I am having trouble implementing it. It seems like there might be a basic issue. Can someone provide some advice? This is the snippet of PHP code on my server: $ cat table.php <?php echo "<html><body&g ...

phphtmlcsv

Retrieving Data from Database on the Current Page

Struggling with fetching data from a MySQL database using PHP search methods and displaying the results on the same page? Here's how you can achieve it. This HTML Script: <html> <head> <title>Digital Library</title> </head ...

phphtmlmysql

Trouble aligning a div at the center within another div using margin auto

I am facing an issue with centering a div horizontally inside another div. Here is my HTML code: .block { padding: 0px 20px; max-width: 820px; margin: 0 auto; background-color: #ff0; } .container { margin: 0 auto; display: inline-block; bac ...

htmlcss