What is the best way to align the action buttons on this webpage?

I'm struggling to center both buttons on the page. I've tried using margin:0 auto 0 auto; in the position property, but it doesn't seem to work. Strangely, when I used a table instead of a div, it worked. I'm curious to know why I can't seem to center it using a div.

Check out the actual web page here

                 <div class="col-md-9 col-sm-12 service-details">
                    <h1 class="website-banner">We Just Don't Create Websites, We Create Art.</h1>
                    <div class="button-container">
                        <button class="btn btn-lg btn-dark" type="button">
                            Build My Website
                        </button>

                        <button class="btn btn-lg btn-dark" type="button">
                            Work With Us
                        </button>
                    </div>

                </div>

Any insights would be greatly appreciated. Thanks.

htmlcssbootstrap-4css-positioncenter

Answer №1

.button-holder{
  display:flex;
  justify-content:center;
}

Alternatively, you can achieve the same layout using Bootstrap utility classes

<div class="button-holder d-flex justify-content-center">

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

Integrating content from a separate PHP page into the main index PHP page

I can't seem to get the #container1 div on my index.php page to load with the content from another #container2 div on page1.php. It's frustrating because I've checked my file hierarchy and everything seems correct. This is how my files are ...

javascriptphpjqueryhtml

CSS alert problem encountered

I have an HTML and CSS notification template that I would like to incorporate into my PHP code. You can view the template here. HTML <div class="alert-box error"><span>error: </span>Write your error message here.</div> &l ...

phphtmlcss

Combining multiple rows into a single row and inserting a new column

Hi there, I'm currently diving into the world of programming and tackling a project involving PHP and MySQL. However, I've encountered a bit of a roadblock. My current setup involves a table named marks, where each time a mark is added to a stud ...

phphtmlmysqlhtml-table

The issue arises when the ng-hide directive fails to function properly due to the presence of a custom directive with the terminal option

Below is the code for my button: <button ng-hide="todo === 'add'" confirm-click ng-click="delete()">Delete</button> This is the directive implementation: (function(app) { app.directive('confirmClick', function(){ ...

htmlangularjsangularjs-directiveng-hide

The Navbar Button is having trouble with vertical alignment

I've been experimenting with Bootstrap to customize a navbar to my liking. I'm having trouble getting everything vertically centered properly in this menu, as you can see in my code. I've made some okay adjustments by tweaking the margin, bu ...

htmlcsstwitter-bootstrap

Ways to retrieve dictionary keys as an array in Angular

Here is an example of an Angular dictionary: { ARRAY1: [{...}, {...}, {...}] ARRAY2: [{...}, {...}, {...}] ARRAY3: [{...}, {...}] ARRAY4: [{...}] } I want to show all the keys of arrays from this dictionary on an HTML page. I attempted to do ...

javascripthtmljsonangulartypescript

When hovering over CSS cards, they transform into a zigzag pattern and the text spills out of the box with overflow

I'm having an issue with my webpage where the text on my CSS cards is overflowing and not staying within the card. Additionally, when I hover over an element, the remaining CSS cards are arranged in a zig-zag manner. Here's the code snippet for r ...

cssbootstrap-4flexboxcss-selectorsstyling

Tips on pausing a moving image from left to right and restarting it later

Is there a way to pause the left to right moving image at the end and then restart the loop? I tried utilizing this website link for assistance: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_animation-delay Unfortunately, I couldn't fi ...

javascriptjqueryhtmlcss

Show off a font-awesome icon overlapping another image

My task involves fetching image source from a JSON file and then displaying it on an HTML page. https://i.sstatic.net/coOaU.png I also need to overlay a Font Awesome icon on top of the image as shown below: https://i.sstatic.net/nbrLk.png https://i.sst ...

javascriptjqueryhtmlcssjson

Tips for showcasing beautifully formatted XML content on a webpage

I have some XML data that I want to display on my website, but I'd prefer to show it in a styled format like a bootstrap table. However, I'm not sure how to go about doing this. Here's an example of the XML: <?xml version="1.0" encoding ...

htmlcssxml

Creating a webpage with a form is a simple process that involves utilizing both PHP and HTML

Just like creating a post in WordPress or asking a question on this website, I am curious about how to create a page simply by filling out a form. I understand how to build an HTML form, manage data in a database, and have some knowledge of PHP. However, ...

phphtmlmysqldatabaseforms

Organizing your thoughts: Utilizing Etherpad-Lite's list

Looking to stylize the list items with decimal, upper-alpha, lower-alpha, upper-roman, and lower-roman for each of the first five levels? I attempted to achieve this by adding CSS in my pad.css file. .list-number1 li:before { content: counter(first)") " ...

cssetherpad

Adjust the href attribute of a link dynamically using the value input from a text field immediately

Is there a way to dynamically change the href attribute of a link when a user types in an input field? And is it possible to detect when a user pastes content into the input field as well? Would appreciate any suggestions on how to accomplish this using j ...

javascriptjqueryhtmlevents

The alert stubbornly refuses to close even when attempting to do so

I am encountering an issue with an alert in my Bootstrap 5 project. The alert does not close when I click on the "X" button. https://i.sstatic.net/pvCdm.png Below is the code snippet: {{#if success}} <div class="container p-4"> ...

htmlbootstrap-5hbs

Is it possible to tailor the style output of .sass?

.bar { font-size: 16px; } Can anyone suggest a way to automatically add a newline before the closing } when converting a .sass file to a .css file? I'm specifically looking for guidance on how to implement this feature in the command sass --watch st ...

cssformattingsassbraces

JavaScript and Angular are used to activate form validation

Update: If I want to fill out the AngularJS Forms using the following code snippet: document.getElementById("username").value = "ZSAdmin" document.getElementById("password").value = "SuperSecure101" How can I trigger the AngularJS Form validation befo ...

javascriptjqueryhtmlangularjs

Exploring the depths of HTML with the Agility Pack

Looking to extract specific elements from my HTML code: <div id="mailbox" class="div-w div-m-0"> <h2 class="h-line">InBox</h2> <div id="mailbox-table"> <table id="maillist"> <tr> ...

c#htmlparsinghtml-agility-pack

What's the reason for the align-self: flex-end CSS property not working as expected on a flex div element?

I am trying to align the "Click me" button to the left of the div that contains it. Here is my code: render = () => { return ( <Wrapper> <Body> <span>Title</span> <Desc ...

cssreactjs

Stop the Bootstrap row from automatically adjusting to the height of the tallest child column element, and instead utilize the extra space below the smaller element

My current framework is Bootstrap 5.2. I am aiming to create two columns, each with a col-md-6 class inside a row. You can visualize the layout through this image: . The challenge I'm facing is the inability to add another row with col-md-6 element ...

htmlcssbootstrap-5

How come this particular design is being passed down from a predecessor (and not a direct parent) div?

Web development can be frustrating at times. Hopefully, someone out there can shed some light on this issue and offer a solution. You can view the HTML/CSS code below or check out this example on JSFiddle The problem arises when I have a header div and a ...

htmlcss