How to align buttons in the center of a Bootstrap grid column using Angular's *ngFor directive

I have been trying to center some buttons using the bootstrap 4 grid system within a column with a green border. Despite using justify-content-center, I have not been successful so far.

<div class="row" style="border:1px solid red;">
  <div class="col">
    <button mat-raised-button>text</button>
    <div *ngFor="let text of buttonText">
      <button mat-raised-button>text</button>
    </div>
  </div>
</div>

Here is what the example currently looks like:

https://i.sstatic.net/C9ehq.png The desired result is shown below:

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

The same example can be viewed on Stackblitz: https://stackblitz.com/edit/github-t6uyxp-z6is8f?file=src/app/app.component.html

cssbootstrap-4bootstrap-grid

Answer №1

If you are looking to center your text, Bootstrap offers the text-center class that will meet your requirements.

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="row">
  <div class="col-2">
    <span>some text</span>
  </div>
  <div class="col-8 text-center" style="border:1px solid green;">
    <button mat-raised-button>I am a button</button>
    <button mat-raised-button>I am a button</button>
    <button mat-raised-button>I am a button</button>
  </div>
</div>

Answer №2

There are numerous methods to achieve this. One approach involves utilizing the flexbox utilities...

<div class="row">
  <div class="col-2">
    <span>some text</span>
  </div>
  <div class="col-8 d-flex justify-content-center" style="border:1px solid green;">
    <button mat-raised-button>I am a button</button>
    <button mat-raised-button>I am a button</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

the components progress down the line

For my right column implementation, I decided to use CSS position:relative and put different elements inside in position:absolute as shown below: <!-- Right Column --> <div class="col-xs-3 pl18" style="position:relative;"> <!-- Withou ...

jqueryhtmlcss

Ways to Personalize Navbar in the Bulma Framework

How can I make the <router link> element in my navbar component full width? I'm also looking for keywords related to achieving this layout. Here is an image of the issue: https://i.sstatic.net/2f2b0BcM.png I want a layout that spans the full ...

cssvue.jsvuejs3bulma

Using Styled Components to achieve full width for input tag in relation to its parent

I am working with an input field that has a specific width set. My goal is to increase the width of this input field to 100% by selecting it from its parent component. Is there a way to achieve this without passing an explicit width prop in the styled c ...

javascripthtmlcssreactjsstyled-components

End the div element upon completion of the Vimeo video

I am in need of a website that includes an intro video displayed as a full-width div over the background content. To achieve this, I created a Div containing an iframe video from Vimeo along with a button to skip the intro (which closes the div upon clicki ...

javascriptjquerycssvimeovimeo-api

What is the process for making the default text in a text box appear grayed out?

Hey there! I have this cool idea for a text box. Basically, it starts off with default text but when you hover your mouse over it, the text disappears and you can start typing as usual: If you want to see how it looks like, you can check out this link: N ...

javascriptcss

Unable to apply a dotted border to a horizontal rule when a Bootstrap 5 link is present

As I strive to add a dotted border-style to the horizontal rule on my website, an interesting challenge arises when the Bootstrap-5 CDN is included. The border-style does not take effect as expected. Even on Codeply, the border-style works perfectly until ...

htmlcsswebbootstrap-5

Is there a way to eliminate a CSS class from a div element within the outcome of an ajax response?

My ajax response is functioning properly and displaying the content of the result, but I am always getting the CSS effects which I do not want. I need to eliminate the class="container body-content" from the following div in the ajax call's result. ...

jqueryhtmlcssajax

Adjust the background shade of specific characters within an input text field

When a user inputs a string into a standard HTML input field (type="text"), such as "2013/13/29", and validation reveals that the number 13 is invalid in this context, I would like to visually highlight it by changing its background color to red while tu ...

cssregexbackground-colorhtml

Full-width sub menu within the menu

I'm trying to make a sub menu appear below my main menu that is the same width as the main menu, which has a fixed width. I want the sub menu to adjust its width based on the number of links it contains. Is this even possible? Here's the code I h ...

javascripthtmlcss

What could be causing Media-Query to fail when using the max-width media feature?

I recently added a max-width media feature to my code, but for some reason, the colors aren't changing when the width is less than 300px. I've been trying to inspect elements on my laptop to troubleshoot the issue. Additionally, I've made su ...

htmlcssmedia-queries

Changing innerHTML with HTML generated by a PHP function? (utilizing xajax)

I have managed to successfully update the content inside a DIV using xajax when clicking a link. However, I noticed that it only works when I directly assign HTML within the function itself, not when calling it from another function. Allow me to demonstra ...

phphtmlcssajaxxajax

The lack of vertical alignment in the table

Trying to do something really simple here and I'm a bit stuck. Currently working on a forum project, and surprisingly the backend is error-free (thanks to some questionable magic tricks), However, my current task is to display all subcategories using ...

phphtmlcss

Two vertical divs stacked on top of each other, each expanding to the entire height and width of the browser window

Is there a way to set the width and height of two divs on a webpage to match the dimensions of the browser window, requiring scrolling to view the second div? In addition, how can I ensure that the content within these divs is vertically centered? To ach ...

csshtmlheight

Ensuring a DIV remains fixed in place for a specific number of scrolls

I'm looking to create a 'Page section' that remains in place while scrolling for a specific distance and then smoothly transitions to the next section. I've attempted to implement this within the child theme without success... Any sugge ...

javascriptjqueryhtmlcsswordpress

The reason CSS properties do not inherit automatically

As I work on designing a straightforward website, I find myself grappling with CSS and particularly inheritance. My objective is to create a side menu where items are stacked vertically: #inner-flex-container { display: flex; flex-direction: column; ...

htmlcssflexboxalignment

Acquire Table Element Using Javascript

I have a HTML table that contains information such as names, addresses, and phone numbers. Within each row of the table, there is a link that can be clicked to open a popover. When a popover is opened, I want to save the name from that particular row. The ...

javascriptjqueryhtmlcss

Tips for including vertical lines within text boxes to distinguish elements

I've been working on a simple form using CSS and HTML, but I'm struggling to add vertical lines to separate my text from the radio buttons. Right now, I'm just using '|' to divide them, but it's not the most visually appealing ...

htmlcss

Surprising outcomes when hosting my website on its domain

During the development of my website, I uploaded it to Cpanel once everything was finished. It functioned perfectly fine at that time. However, after making some changes and uploading it again, the fonts and videos on the live domain appear larger than i ...

htmlcsscpanel

Aligning text inputs inline within a Bootstrap form for a cleaner and organized

I am currently working on designing a form using Bootstrap, and I have a specific requirement where the first name and last name fields need to be displayed inline while the rest of the form remains unchanged. Although I have managed to make the inline fu ...

htmlcsstwitter-bootstrap

Obtaining solely the words found within HTML documents

In my Python 2.7 project, I have a folder containing multiple HTML pages that I need to extract only words from. My current process involves opening the HTML file, using the Beautiful Soup library to extract text, and then writing it to a new file. However ...

javascriptpythonhtmlcsspython-2.7