What would be the best way to horizontally center align two BTN buttons inside a jumbotron using HTML?

Looking to create a homepage using HTML and CSS, but need help with center aligning buttons within a jumbotron.

Please refer to the screenshot linked below for reference:

https://i.sstatic.net/3PX9I.png

This is my current HTML code:

<div class="jumbotron">
        <h1>Bespoke Recruitment Solutions</h1>
        <p class="lead">We are an independent recruitment company specializing in providing customized HR services.<br> We take the time to understand our clients' vision, goals, and culture, allowing us to connect with the right talent to fill vacancies.</p>
        <p><a class="btn btn-primary btn-lg" role="button">Submit Your CV</a><a class="btn btn-primary btn-lg" role="button">Fill A Vacancy</a></p>
      </div>
htmlcss

Answer №1

To center the text, simply add the text-center class to the <p> tag where your buttons are located.

Customize Your HR Services

<div class="jumbotron">
        <h1>Bespoke Recruitment Solutions</h1>
        <p class="lead">We are an independent recruitment company specializing in providing tailored HR services.<br> We take the time to grasp our clients' vision, goals, and culture, enabling us to connect with the right talent to fill the vacancy.</p>
        <p class="text-center"><a class="btn btn-primary btn-lg" role="button">Submit Your CV</a><a class="btn btn-primary btn-lg" role="button">Fill A Vacancy</a></p>
      </div>

Check out the live demo here

Answer №2

When utilizing bootstrap, make sure to include the 'text-center' class in your <p> element.

<div class="jumbotron">
        <h1>Tailored Recruitment Solutions</h1>
        <p class="lead">We are a unique recruitment agency specializing in providing customized HR services.<br> We take the time to grasp our clients' vision, goals, and culture, enabling us to connect with the right talent for filling vacancies.</p>
        <p class="text-center"><a class="btn btn-primary btn-lg" role="button">Submit Your Resume</a><a class="btn btn-primary btn-lg" role="button">Post a Job</a></p>
</div>

Answer №3

To solve this issue, simply use the text-align: center property.

For a demonstration, check out this example

Custom CSS:

.center{
  text-align: center;
}

Updated HTML Code:

<div class="jumbotron">
        <h1>Bespoke Recruitment Solutions</h1>
        <p class="lead">We are an independent recruitment company specializing in providing customized HR services.<br> We take the time to understand our clients' vision, goals and culture, enabling us to connect with the right talent to fill the vacancy.</p>
        <p class="center"><a class="btn btn-primary btn-lg" role="button">Submit Your CV</a><a class="btn btn-primary btn-lg" role="button">Fill A Vacancy</a></p>
      </div>

If you are using Bootstrap, you can apply the text-center class directly to the paragraph containing buttons.

Here is how it works:

<p class="text-center"><a class="btn btn-primary btn-lg" role="button">Submit Your CV</a><a class="btn btn-primary btn-lg" role="button">Fill A Vacancy</a></p>

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

What is the process of incorporating a hover class into jQuery click(function() accordion divs?

This accordion is designed to open independent hh-content-entry divs on click: Using jQuery: $(".hh-content-entry").slideUp(); $(".hh-title-entry").click(function(){ $(this).next(".hh-content-entry").slideToggle("slow"); In HTML: <div class="hh-titl ...

jquerycss

Utilize the $element custom data-attribute in the click event handler for KnockoutJS

Can the data-* attributes associated with the element referenced by $element be accessed? For example, in a click event binding: data-bind="click: function() { myfunction(arg);})" I successfully used $element.id as arg, but I would have preferred to use ...

htmlknockout.jsattributes

The h3 element is not responding to the adjacent sibling selector

Below is my HTML DOM structure. I am trying to remove the margin and padding for all h3 elements that are immediate siblings of a div with the id "successor". I attempted to achieve this using the adjacent sibling selector "+", but unfortunately, I'm ...

htmlcsscss-selectors

Angular offers a simple solution for adding events to all "p", "span", and "h1" elements easily

I am attempting to implement a "double click" event on all text HTML elements (p, span, h1, h2, etc.) across all pages in order to open a popup. I believe there should be a more efficient way than adding (dblclick)="function()" to each individual element. ...

htmlangularevents

Stop the div from collapsing when hiding or deleting all child elements to maintain its structure

I have recently developed a Vuetify application that manages card items. To ensure security and accessibility, I have added a feature where the actions/buttons are displayed based on the User's permissions. In case of missing permissions, these button ...

htmlcssvue.jsvuetify.js

What is the best way to change a variable's type from string to integer in Javascript?

Check out the fiddle I created: https://jsfiddle.net/ajc100/vrzme0st/ I have been working on an insurance calculator (with fake numbers) using a form with radio buttons and dropdowns where the value of each selection is a number. Currently, I am able to d ...

javascriptjqueryhtmlinteger

What jQuery method can be used to target the parent table containing a nested table opposite of the :has() selector?

I am facing an issue with a nested table structure in my HTML code. Below is the representation of the table: <table class="table parent"> <tbody> <tr> <td>TEXTA</td> <td>TEXTB</td> </t ...

htmljquery

What is the best way to apply background color to a background image?

I am encountering an issue where I need to display image 1 while keeping the original image as image 2 using CSS or Bootstrap. Any help would be greatly appreciated! https://i.sstatic.net/xsQv6.png https://i.sstatic.net/0nziL.png ...

phphtmlcssbootstrap-4

HTML files do not inherit from other HTML files

I am venturing into the world of VSCode for the first time to create a web application. Starting with the basics, I have an index.html page with a simple "Hello, world!" message. Additionally, I have developed a layout.html file that contains code for a na ...

pythonhtmlcssdjango

Unusual Behavior of Bootstrap Buttons

<a class="btn btn-dark" href="#" role="button">Apple Music</a> Everything looks great in full resolution. View the image in full resolution here However, at a certain resolution, Bootstrap starts to act oddly. Check out the weird image beha ...

htmlcssbuttonbootstrap-4

Is there a way to match the color of a fixed element with the background elements' color?

In my current website setup, I have multiple full-width content containers stacked on the Y-axis. Every other container is blue and red alternatively. I am looking to incorporate an SVG image or a button fixed in the top-left corner that moves with the use ...

javascriptcss

What is the method to incorporate spread into inner shadow within an SVG file?

Seeking assistance with creating an inset-shadow effect with spread for an SVG rectangle in Figma. Check out this example of a rectangle with inner-shadow and spread. I have successfully added blur and positioned the shadow using x and y coordinates, but ...

htmlsvgsvg-filters

Is it advisable to incorporate HTML into my PHP code?

Lately, I've been utilizing action="form.php" in my forms. However, now I am realizing that it may not be necessary to specify an action if the PHP and form elements are within the same file. Which approach offers more security: a standalone PHP file ...

phphtmlsecurity

Using the Bootstrap class `d-flex align-items-center` will shift items slightly off-center towards the left side

As I delved into a web development course led by Andrei Neagoie, everything was smooth sailing and I was thoroughly enjoying the material. However, when I reached the section on Bootstrap (where Andrei was constructing a startup landing page), I encountere ...

htmlflexboxbootstrap-5

Sending a value to a text box using json data transmission

I am having trouble accessing data from a js file and fetching the value to an html text box. Despite trying, I'm unable to get the desired result. Below are the contents of samle.js file and jsonhtml.html file: { "var1": "1", "var2": "2" } <scri ...

javascriptjqueryhtmljson

What are the steps to create a dynamic navigation bar in React without encountering hydration issues?

My goal is to dynamically show or hide links based on user authorization. Here's my initial approach: const Navbar = () => { const { canDo, ...} = useUser(); //A Zustand store return ( <> <div> <ul> ...

javascripthtmlcssreactjs

How can I display a blank date picker using Material UI in a REACT application?

CURRENT SETUP <MuiPickersUtilsProvider utils={DateFnsUtils}> <DatePicker fullWidth value={dob} label="Date of Birth" format="dd / MM / yyyy" margin="normal" maxDate={new Date() ...

cssreactjsmaterial-ui

Utilizing jQuery and AJAX to dynamically include multiple PHP pages

My webpage contains a div tag similar to this structure: <div class="ajax-load"> <!-- First.php: jquery-slider-1 jquery-widget-1 second.php: jquery-slider-2 jquery-widget-2 --> </div> There is also a ...

phpjqueryhtmlajax

Inner Content Attribute Reveals the Markup within a Text

Hello, I am in the process of developing a simple CMS that generates blogs. The user is required to enter the blog content themselves, and I am allowing them to do so using the TinyMCE editor. I save this content in a database where the data type for the ...

htmlasp.netvb.netcontent-management-systeminnerhtml

jQuery's capability to select multiple elements simultaneously appears to be malfunctioning

I am dynamically creating div elements with unique ids and adding span elements with specific CSS properties. $(".main").append("<div class=largeBox id=" + counter + "</div>"); $(".largeBox").append("<span class=mainTitle></span>"); ...

javascriptjquerycss