Tips on displaying just two buttons in one line

When using *ngFor to display multiple buttons, all buttons appear in one column. I want to have only 2 buttons in a row: the green buttons in one line, and the red buttons in the next line. How can I achieve this?

Here is what I have tried:

<div class="row mt-3">
          <div class="col-sm-5"></div>
          <div class="col-sm-7">
            <div *ngFor="let actionButton of actionButtonData">
              <div *ngIf="actionButton.Direction === 1">
                <button type="button" class="btn actionButton btn-success">
                  {{ actionButton.Name }}
                </button>
              </div>
              <div *ngIf="actionButton.Direction === 2">
                <button type="button" class="btn actionButton btn-danger">
                  {{ actionButton.Name }}
                </button>
              </div>
            </div>
          </div>
        </div>

css

.actionButton {
  width: 200px;
  display: inline-block;
  overflow: hidden !important;
  white-space: nowrap;
  text-overflow: ellipsis
}

Answer №1

<div class='row'>
  <div class='col'>
    <div class='row'>
        <button >
          button1
        </button>
        <button >
          button2
        </button>
    </div>
        <div class='row'>
        <button >
          button1
        </button>
        <button >
          button2
        </button>
    </div>
  </div>
</div>

test out this method for the row and col structure

Answer №2

If you want to group buttons in Bootstrap, simply add the btn-group class to the ngIf div. This is a built-in feature of Bootstrap, so you won't need to write any custom CSS.

    <div class="row mt-3">
          <div class="col-sm-5"></div>
          <div class="col-sm-7">
            <div *ngFor="let actionButton of actionButtonData">
              <div *ngIf="actionButton.Direction === 1" class="btn-group">
                <button type="button" class="btn actionButton btn-success">
                  {{ actionButton.Name }}
                </button>
              </div>
              <div *ngIf="actionButton.Direction === 2" class="btn-group">
                <button type="button" class="btn actionButton btn-danger">
                  {{ actionButton.Name }}
                </button>
              </div>
            </div>
          </div>
        </div>

Answer №3

If you want to achieve a layout with only 2 children in a row, you can utilize normal bootstrap classes. Simply add the class row to the parent div, and then add the class col-sm-6 to each child element.

<div *ngFor="let actionButton of actionButtonData" class="row">             
    <div *ngIf="actionButton.Direction === 1" class="col-sm-6">   
        <button type="button" class="btn actionButton btn-success">
            {{ actionButton.Name }}
        </button>
    </div>
    <div *ngIf="actionButton.Direction === 2" class="col-sm-6">    
        <button type="button" class="btn actionButton btn-danger">
            {{ actionButton.Name }}
        </button>
    </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

Transform the features of a website into a sleek iOS application using Swift

Can I take an HTML website coded with JavaScript and integrate its functionality into my app using WebKit or another method? By using WebKit or WebViews, I can load an entire webpage into my app, automatically bringing along its functionality. However, i ...

The iframe is not adjusting its size in relation to the parent window

For more information, click here: http://jsfiddle.net/5HYve/ <div style="position: fixed; top:0; right:0; width:300px; height: 100%; text-align:justify; overflow:hidden;" class="chat-container"> <iframe id="chat_1" style="width:300px;height:1 ...

NestJS does not recognize TypeORM .env configuration in production build

Currently, I am developing a NestJS application that interacts with a postgres database using TypeORM. During the development phase (npm run start:debug), everything functions perfectly. However, when I proceed to build the application with npm run build a ...

Error: The function User.findOne is not recognized

Currently, I am in the process of developing a Node.js API and aiming to implement JWT for login functionality. I have successfully set up the model and route, and while testing with Postman using the POST method, an error occurs upon sending the request. ...

The Art of Checkbox Design

Seeking help in replacing the default check mark on a checkbox with an image. Here is the code snippet I am currently using: <html> <head> <style> .bl { background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #175899), c ...

Navigate between tabs with a single click

Hey there! I'm having trouble putting together a webpage that features a sidebar. I want to make it so that clicking on one of the links at the top will switch the tab and its content accordingly. However, the current code I have isn't working an ...

Create a dynamic feature in Bootstrap4 where the navigation bar changes color as the user scrolls to different sections of the

Currently building my personal portfolio website with Bootstrap 4, I came up with a great idea: changing the navigation bar color based on different sections of the website. I attempted to achieve this using JQuery's offset and scrollTop functions, bu ...

Is the image flickering non-stop when the button is pressed?

Every time I push the button, the image on the HTML 5 canvas flickers. After investigating, it seems like the issue might be related to the ctx.clearRect(0,0,100,500) function. Any suggestions on how to fix this problem? I'm currently working on anim ...

Conquering challenges arising from organizing subdirectories for js/css/xml files

During the process of developing a website with html, css, js and xml files stored on my computer (not yet online), I initially kept all the files in one folder along with an images folder. However, as the project progressed and things started to get mes ...

Utilizing the power of JavaScript/JQuery to showcase a compilation of all input values within an HTML form

I'm struggling to showcase all the input values from my HTML form on the final page before hitting the "submit" button. Unfortunately, I am facing a challenge as the values are not appearing on the page as expected. Despite several attempts, the valu ...

Display or conceal a button in Angular 6 based on certain conditions

In my current project, I am facing a challenge where I need to disable a button while a task is running and then activate it once the task is complete. Specifically, I want a syncing icon to spin when the task status is 'In_progress' and then hid ...

What is the result of using `X ? A : B` in typescript?

type TestAny = any extends 'a' ? 1 : 2 // => 1 | 2 why??? how to interpret? type TestUnknown = unknown extends 'a' ? 1 : 2 // => 2 type TestStringA = 'a' extends 'a' ? 1 : 2 // => 1 type SomeUnion = ' ...

What is the best way to optimize a search for objects with extensive field arrays?

Recently, I've been working with an object schema that includes an array field to store ids for objects from a separate collection. This array has the potential to contain thousands of ids. Up until now, I have been excluding this field using .select( ...

When the previous textbox is filled, the cursor will automatically move to the button

Utilizing an RFID reader where students tap their ID to display basic info, a hidden button on the form opens a modal with various purposes for selection. The challenge is shifting focus of cursor to the button and automatically clicking it when the last ...

How can I customize the hover effect of the drop-down options <option> to have a "blue" background color?

I've been struggling to change the default blue background color of the drop-down options when hovering over them with the mouse. Despite trying various solutions from this forum, nothing seems to be working at the moment. (These solutions used to wor ...

Resposiveness of force-directed graph is lost

const container = document.getElementById("container"); const svgElement = d3.select(container).append("svg") // Get the width and height computed by CSS. let width = container.clientWidth; let height = container.clientHeight; const colorScale = d3.scale ...

Determining the identity of an HTML element using its surrounding values

I have a webpage with a table displaying various services and their corresponding download buttons. Here is an example of the content: nov. service 1 [ click to download pdf ] nov. service 5 [ click to download pdf ] nov. service 3 [ ...

Using Typescript to import an npm package that lacks a definition file

I am facing an issue with an npm package (@salesforce/canvas-js-sdk) as it doesn't come with a Typescript definition file. Since I am using React, I have been using the "import from" syntax to bring in dependencies. Visual Studio is not happy about th ...

Transform your table into an ASCII-art masterpiece using CSS styling techniques

My vision is to style a table "ASCII art" using CSS, like the example below: +------+---------+----+ | Jill | Smith | 50 | +------+---------+----+ | Eve | Jackson | 94 | +------+---------+----+ | John | Doe | 80 | +------+---------+----+ <ta ...

Tips for using ng-repeat with a hardcoded value instead of an array

Is there a way to manually run the ng-repeat function a specific number of times without passing an array parameter? I attempted to hardcode the number in the ng-repeat attribute, but it didn't work as expected. <h1 ng-repeat="x in 20">{{sumofT ...