Aligning a Bootstrap button beneath text that is centered on the page

I want to include a button below some text in the contact section. The text reads "get in touch" at the center of the page, but when I add a button it appears under the text and aligned to the left. I need it to be centered on the page beneath the text.

<section class="contact" id="contact">
<div class="container">
  <div class="row">
    <div class="col-md-6 p-lg-6 mx-auto my-5">
      <h1 class="text-capitalize text-center about-banner">
        get <strong class="text-center about-banner-two">in touch</strong>
      </h1>
      <a href="#" class="btn btn-lg btn-secondary text-uppercase">contact</a>
    </div>
  </div>
</div>
htmlcssbootstrap-4

Answer №1

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e1c11110a0d0a0c1f0e3e4b504e534e531c1b0a1f4d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">


<!----------------- HERE IS THE NEW CLASS  ↓↓↓↓↓↓↓ -->
<div class="col-md-6 p-lg-6 mx-auto my-5 text-center custom-class">
  <h1 class="text-capitalize text-center about-banner">
    get <strong class="text-center about-banner-two">in touch</strong>
  </h1>
  <a href="#" class="btn btn-lg btn-secondary text-uppercase">contact</a>
</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

Using PHP variables in HTML frameset URL for dynamic content passing

Looking for help to pass a PHP variable through a frameset URL. I've been trying different techniques without success so far. Can anyone provide some guidance? Here is an example of my code and what I have attempted: <?php $var = 2+3 ?> < ...

phphtmlhtml-frames

Are your line breaks disappearing when transmitting data?

Encountering a perplexing issue that has left me stumped despite my best efforts to find a solution. I currently have an Array of type String housing various data, some of which requires proper formatting in a Modal window. For example, one of the String ...

htmltypescriptionic-frameworkionic3modal-dialog

Tips for aligning headers and columns in the same row within an HTML document

Is there a way to keep Table Headers and columns aligned in HTML without wrapping to the next line? Please assist, thank you! ...

htmlcssbootstrap-4

Ways to adjust the text size in jqGrid?

The current theme is ui-lightness. How can I adjust the font size within the grid? Your suggestions are appreciated. Many thanks. ...

javascriptjquerycssjquery-uijqgrid

The width of the table remains consistent

I have created a division that includes two tables stacked on top of each other. However, I am facing an issue where the width of the second table remains fixed and does not change even when I try to increase it. Here is the code snippet below: functio ...

javascriptjqueryhtmlcss

Automatically trigger a PHP reload/refresh based on user input

My website has a form that populates a table with data. Currently, after the user submits the data, they have to manually refresh the page in order to see the new data displayed. Is there a way to automatically refresh the table every time the user hits ...

phphtml

What is the process for utilizing an external HTML file to transmit information through Mailgun?

I am currently using mail-gun to send emails. However, instead of simply adding the HTML tags in the HTML field, I would like to create a separate HTML file and add it there. Can anyone guide me on how to achieve this? (I am working with Node.js and the ...

htmlnode.jsemailmailgun

Upload information into database without the need to refresh the webpage

Which programming language or tool would you recommend for efficiently loading data from a webpage into a database without requiring a page refresh? ...

asp.netajaxdjangohtmlcss

Troubleshooting Problem in Angular 4: ngIf Error

In a component template, I have included both a search icon and a search bar. Below is the HTML snippet: <div class="fixed-action-btn horizontal click-to-toggle search" id="search"> <span class="menu-label"></span> <a class="btn-f ...

htmlangularonclickmaterializeangular4-forms

What is the best way to make a flexbox stretch to fill the entire screen

Can someone guide me on how to ensure my flexbox expands to fill the entire screen? I am working on a website and I want to eliminate any empty spaces from it. >> https://i.sstatic.net/uAooe.png I have attempted setting margin and padding to zero b ...

htmlcssflexbox

Transitioning the font in CSS does not appear to be functioning properly when

I am currently utilizing a CSS setup like this: .container { display: flex; align-items: center; } p { font-size: 10px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-trans ...

cssflexbox

Resetting the check status in html can be accomplished by using the checked

I am currently working on a popup feature in HTML <div id="term_flags" class="term_flags"> <div class="modal-users-content flagsContent"> <div class="modal-users-header"> <span class="close" ng-clic ...

htmlangularjs

What is the best technique for vertically aligning text within two divs placed side by side?

Thank you for taking the time to read this. I have a piece of code similar to the one below. While using line-height works when there is only one line of text, it becomes problematic when the comments section contains multiple lines. I am wondering what w ...

htmlcss

All elements on my webpage are enhanced with a CSS filter

I have a button centered on my page, but the CSS filter I applied to the HTML tag is also affecting the button. How can I prevent this from happening? HTML <body> <div class="button"> <a href="#">START EXPERIENCE</a> ...

htmlcss

The element is not displaying the correct width percentage value

When I try to style an element in HTML using Sass, setting the width using percentages doesn't seem to work. I wonder if this issue is related to me using "content-max" to set the parent element's width and height? Here is a simplified version ...

htmlcsssass

Does IE 9 support endless local storage capacity?

I recently updated my HTML5 persistent storage (localStorage) capacity testing to address a memory exception issue in the previous version. I even created a jsFiddle showcasing it: http://jsfiddle.net/rxTkZ/4/ The testing code involves a loop: var val ...

javascripthtmlinternet-explorer-9local-storage

Suboptimal placement of second submenu in Navbar

This question is inspired by a discussion on Stack Overflow that you can read here. Everything seems to be working fine, except when the 2nd level item is not at the top. In the example provided, the item with the 2nd level menu is the first item. If you m ...

csstwitter-bootstrapsubmenu

Logging client side errors to the server with AngularJS exclusively

Hey there, I'm a beginner in angularjs and I am trying to figure out how to create a client-side error/exception logger (.log/.js) file that sends data to the server using only angularjs. I prefer not to use jquery for this particular task. Any assis ...

angularjshtmlcss

The issue persists with IE8 reverting to Quirks mode despite having the DOCTYPE specified

Whenever I try to load my site in IE8, it keeps reverting back to Quirks Mode and the page looks all distorted. I can manually switch it to IE8 document mode via developer tools and it works fine, but I'm puzzled as to why it keeps switching back to Q ...

htmlcssinternet-explorer-8quirks-modeie8-browser-mode

What methods does Google use to display its search results on the search engine results page?

Upon first observation, I realized that the search results were not present in the HTML received from the server. To investigate further, I turned to Dev Tools and examined the additional files downloaded by my browser. I discovered that there was only on ...

javascripthtmlajaxgoogle-chrome-devtoolsgoogle-search