How to align the Bootstrap 4 button toolbar horizontally in an Angular project

I'm struggling to center the button toolbar horizontally on my webpage. This is what I have so far:

<div class="row">
  <div class="col-sm-6 mx-auto">
    <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
      <div class="btn-group mr-2" role="group" aria-label="First group">
        <button type="button" class="btn btn-secondary">Sign Up</button>
      </div>
      <div class="btn-group mr-2" role="group" aria-label="Second group">
        <button type="button" class="btn btn-secondary">Forgot Password?</button>
      </div>
    </div>
  </div>
</div>

Here is an image of how it currently looks: https://i.sstatic.net/JcFRm.png

htmlcssangularbootstrap-4centering

Answer №1

Have you experimented with the following:

<div class="row justify-content-center">
    .
    .
    .
</div>

There are various methods to align content based on your requirements, you may find some useful options here: https://getbootstrap.com/docs/4.0/layout/grid/

Answer №2

Here is a CSS snippet you can use for the btn-toolbar class:

.btn-toolbar{
    text-align: center !important;
    display: Block !important;
}

If you want to implement this, make sure to include the necessary Bootstrap stylesheet:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row">
  <div class="col-sm-6 mx-auto">
    <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
      <div class="btn-group mr-2" role="group" aria-label="First group">
        <button type="button" class="btn btn-secondary">Sign Up</button>
      </div>
      <div class="btn-group mr-2" role="group" aria-label="Second group">
        <button type="button" class="btn btn-secondary">Forgot Password?</button>
      </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

When using Angular 2, an error may occur where you receive a message stating that you cannot read the property 'length' of undefined while attempting to call

When creating a component (let's call it A) with the @input decorator to retrieve values from the selector, keep in mind that this component will generate text fields based on the input values specified in the selector. Component A is then utilized in ...

angulartypescript

Is there a speed advantage in Angular 2+ when using [disabled] instead of "disabled" in a template?

Let's analyze the differences between these two HTML snippets: <input formControlName="address" [disabled]=isDisabled/> <input formControlName="address" disabled={{isDisabled}}/> While it seems that the first option is more readable, I ...

htmlangular

How can I prevent an iframe from scrolling by making changes to the linked page?

Is there a method to prevent the scrollwheel from functioning on a page that is being linked by an iframe? I am attempting to use an iframe to link to a website I created, but modifying the scrolling attribute of the iframe to "no" does not stop the scro ...

javascripthtmlcssiframe

Deactivate Link Using CSS while Allowing Title to be Functional

Is there a way to enable the link in CSS while still showing the title? Take a look at my code: CSS and HTML Code: .disabledLink { pointer-events: none; opacity: 0.6; cursor: default; } <a href="www.google.com" class="disableLink" title="M ...

htmlcss

Navigating to the next page on a dynamic component in Angular 5 by

I'm uncertain if this scenario is feasible, but I have a page that fetches a list of items from an external API. There are currently 5 elements on the page, each acting as a link to its individual dynamically generated page through query strings. For ...

javascriptangulartypescriptcontentful

Align a series of items in HTML to the center side by side

Currently, I am in the process of creating a personalized homepage that features multiple lists of links placed next to each other. However, I'm facing a dilemma on how to center all of them while still maintaining the desired format. If you'd li ...

csshtml

What is the solution for getting `overflow-x` to function in place of `overflow-y`?

I have a main container with several sub-containers inside. When the main container's width exceeds its limit, I want to display a horizontal scroll bar. Instead of using the 'display: inline-block' property because it creates unwanted whit ...

htmlcss

Adjustable value range slider in HTML5 with ng-repeat directive in AngularJs

I am facing a problem with my HTML5 range slider. After setting a value (status) and sending it to the database, when I reload the page the slider's value is always set to '50'. The slider is being generated within an ng-repeat from AngularJ ...

javascriptangularjshtmlrange

Enhancing the Appearance of Legends in Chartjs

I'm attempting to customize the legend in my Chartjs chart, but I'm facing an issue where I can't seem to change the font color. What I want to achieve is having the font color in white while keeping the individual item colors intact in the ...

javascriptjqueryhtmlcsschart.js

Is there a way for me to acquire the Amazon Fire TV Series?

I'm currently working on developing a web app for Amazon Fire TV, and I require individual authorization for each app. My plan is to utilize the Amazon Fire TV serial number for this purpose. However, I am unsure how to retrieve this serial using Jav ...

javascripthtmlamazon-fire-tv

Identify whether the page is being accessed through the Samsung stock browser or as an independent web application

Hey there! I am on a mission to determine whether my webpage is being accessed through Samsung's default browser or as a standalone web app saved on the homescreen. Unfortunately, the javascript codes I have come across only seem to work for Safari an ...

javascripthtmlcssweb-applicationssamsung-mobile

Add additional text using the ::after pseudo-element exclusively for a particular class

Here is the HTML code snippet I am currently working with: <style> p::after { content: "%"; } </style> <div class="counter-box"> <p data-value="185">100</p> </div> At present, my CSS applies text injection to ...

htmlcsspseudo-element

Ensure that the content in the right column is in alignment with the

The two div elements are colored differently, with the right column (pink) not aligning properly with the left column (green). For reference, here is my fiddle: JSfiddle * { margin: 0px; padding: 0px; border: 0px; } #wrapper { width: 960px; m ...

htmlcss

The toggle feature in Bootstrap is stuck in the "on" position and refuses to "untoggle."

Currently, I am working on developing a basic website using Laravel and Vue.js. To ensure that the website is responsive, I integrated Bootstrap 4 into the project. For the most part, everything appears to be functioning correctly - the navbar collapses as ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Storing a database row value into a PHP variable using an SQL query

I am encountering a number of questions related to my issue, but as a beginner in programming, I am struggling to understand most of the solutions. The code snippet below is the only one that works for extracting data from my table, although it is carrying ...

phphtmlsqlvariables

Target specifically the onhover div element using JQuery and trigger the smooth sliding down effect with the SlideDown() function

Is it possible to create a unique JQuery slidedown() function that will only be applied to the div where the mouse is hovering? I have managed to make it work by giving each div a separate class, but when I name them all the same, it triggers the slide do ...

javascriptjquerycss

Only trigger NgRx actions when specific properties change during Rxjs Polling

I am working with a Rxjs Polling effect that looks like this: updateProductData$ = createEffect(() => this.actions$.pipe( ofType(fromActions.loadProduct), switchMap(_) => this.http.get('endpoint').pipe( delay(1000), ...

angularrxjsngrx

Show information in a Tree structure using Angular

Is there a way in Angular to display people data in a tree structure with a filter based on the "area" field? If so, how can this be achieved? Here is an example of the data structure: public rowData = [ { area : 'Area A', Persons: [ { pe ...

angular

How can I display different data values on each individual circle counter, rather than all circles showing the same data?

Hey there! I'm trying to get my circular counters to display the counter value that I specify in their class and data-percent. However, currently all four counters are only showing the data from the first counter, even though I've set different d ...

javascripthtmlcsscounter

Prevent a click event from triggering on one div when another div is clicked using jQuery

I am in the process of designing a website that includes two clickable divs, "#coloursettings" and "#powersettings". Both of these divs successfully unbind the menu ("#tab a"), but I am struggling to make them deactivate each other upon clicking one, then ...

jqueryhtmlcssbindunbind