What is the best way to center an <h1> element and align a <p> element to the right within a single div?

My goal is to create a div using Bootstrap 4 that contains an <h1> aligned in the center, with a <p> tag aligned to the right. You can see exactly what I'm aiming for here: https://i.sstatic.net/dhgqX.jpg

I am looking for a solution using Bootstrap 4 classes or flexbox, without relying on floats. Here's the code I've developed so far:

<div class="row">
    <div class="col-sm-12 p-20">
        <h1 class="heading-font px36-font d-inline-block">.Hay<span class="skyblue">ford</span></h1>
        <p class="d-inline-block special-font b-900"><i class="fa fa-phone"></i> +92-336-54-14-994</p>
    </div>
</div>
htmlcssbootstrap-4

Answer №1

h1 {
  text-align: center;
}
p {
  text-align: right;
}
<div class="row">
  <div class="col-sm-12 p-20">
    <h1 class="heading-font px36-font d-inline-block">.Hay<span class="skyblue">ford</span></h1>
    <p class="d-inline-block special-font b-900"><i class="fa fa-phone"></i> +92-336-54-14-994</p>
  </div>
</div>

Answer №2

This code snippet demonstrates how to split a main div into two sub divs

<div class="row">
            <div class="col-sm-12 p-20">
                <div style="width: 80%; float:left">
                <center><h1 class="heading-font px36-font d-inline-block">.Ocean<span class="navy-blue">View</span></h1></center>
                </div>
                <div style="width: 20%; float:right">
                <p class="d-inline-block special-font b-900"><i class="fa fa-envelope"></i> info@oceanview.com</p></div>
            </div>
        </div>

Answer №3

To align the h1 text at the center, you may want to include a class named "text-center". Make the parent div with the class "p-20" positioned relatively. Next, Set the position of the p tag as absolute and adjust it using right: 5px; and top: 5px;.

I hope this solution is helpful for you. Feel free to vote if you found it useful.

Thanks a lot..!!

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

Chat box custom scrollbar always positioned at the bottom

I have a personalized chat box where I included overflow-y for scrolling functionality. However, every time I input a message in the text box, it displays at the top of the scrollbar window. Is there a way to automatically show the most recent message I ...

javascripthtmlcss

The filter on the mobile version is not displaying correctly

When I select a category in the input filter, only items with the same category are displayed when clicked. However, when I click on "Others" on the desktop version, only rows with that category are shown, but on mobile after resizing and filtering, nothin ...

javascripthtmljquerycss

I have noticed that the baseline of a Span element has shifted after updating my Chrome browser to a version that begins with

Once I updated to chrome Version 108.0.5359.94 (Official Build) (64-bit) from 107.0.5304.87 (Official Build) (64-bit), the behavior of the span element changed drastically. It shifted its baseline when multiple spans were stacked on top of each other. Exp ...

javascripthtmlcssgoogle-chrome

Leveraging the browser's built-in validation error messages in Angular for HTML forms

Is there a way to incorporate browser's native HTML validation error messages into Angular applications? https://i.sstatic.net/J0em4.png What I am looking for is the ability to leverage the built-in error messages when working with reactive forms li ...

htmlangularvalidationconstraint-validation-api

"Is there a way to dynamically add an input value as a class to the currently selected element using jQuery

Hey everyone, I'm currently working on some jQuery code to change the class of an icon by selecting a radio input with the corresponding class value. However, I'm encountering an issue where the class value is being added to all other icons as we ...

javascripthtmljquery

The functionality of jQuery's toggleClass is not functioning properly when clicking on a different thumbnail

My objective: I want to display a set of thumbnails. When a thumbnail is clicked, I want to toggle the hiddenElement class and show a large image inside a hidden div. If anywhere in the DOM is clicked, it should hide the current image or allow the user t ...

javascriptjqueryhtmlcss

What is the reason for initializing I with the length of the response?

I am attempting to generate a table using an AJAX JSON response, but the for loop sets i to the maximum value right away. $.ajax(settings).done(function (response) { console.log(response); var i = ""; td = document.createElement('td'); t ...

javascriptjqueryhtmljsonajax

Extracting information from a webpage with Selenium

I've successfully navigated to a point where I can access this particular website After entering a vehicle registration number, clicking continue, confirming it's the correct vehicle and proceeding to the next page. Now I'm trying to find ...

pythonhtmlselenium

Running a CSS keyframes animation can be achieved by removing the class associated with it

Is there a way to reverse the CSS animation when a class is removed? I'm trying to achieve this on my simple example here: https://codepen.io/MichaelRydl/pen/MWPvxex - How can I make the animation play in reverse when clicking the button that removes ...

javascripthtmlcss

Having issues changing the color of fontawesome icons

I am struggling to change the color of a fontawesome icon when it is clicked. <a id="thumbsup">@Html.FontAwesome(FontAwesomeIconSet.ThumbsUp, FontAwesomeStyles.Large2x)</a> My goal is to have the icon start off as gray, turn blue when clicke ...

jquerycssfont-awesome

Tips for sorting through various elements or items

How can I improve my filtering function to select multiple items simultaneously, such as fruits and animals, or even 3+ items? Currently, it only allows selecting one item at a time. I attempted using , but it had bugs that displayed the text incorrectly. ...

javascripthtmlcss

Is it better to use $("#myElement").length or !$("myElement") for checking the existence of the DOM element?

Is it necessary to use the length property when checking if a specific DOM element exists or not? I have seen suggestions from other posts recommending the use of the length property for this purpose, and it seems to work as expected. However, I have also ...

javascriptjqueryhtmldom

Issues with Bootstrap slider functionality : Unable to initiate slider as it is not being recognized as

I'm having an issue with my Bootstrap slider not functioning properly. Despite ensuring that all CSS and JS files are loading correctly in my HTML, I keep receiving an error in the console stating: slider is not a function. I have even downloaded the ...

javascriptjquerycsstwitter-bootstrap

AngularJS integration with Bootstrap Confirmation jQuery plugin

I am currently struggling to implement the Bootstrap-Confirmation plugin with AngularJS. Despite following instructions from this YouTube tutorial, I cannot seem to get the directive to function correctly. A related query on Stack Overflow references a di ...

jqueryhtmlangularjsangularjs-directivejquery-plugins

"Navigate to a webpage by interacting with a text hyperlink - Harnessing the

The link I'm trying to click isn't being recognized at all. When inspecting with developer tools in Chrome, the link appears in the following structure: <main <div <ifreame #document <html <body ...

c#htmlseleniumselenium-webdrivercss-selectors

Align text in the middle of an image

I need some help with formatting my web page. I want to move the content of the red rectangle into the green rectangle, like in the image below: https://i.stack.imgur.com/sAved.jpg The goal is to center the text with the picture. I've tried using di ...

css

It is not possible to invoke a function within the AJAX success method

When trying to display an error message in my notify (toast) div using jQuery in Ajax success, I am encountering difficulties. Despite decoding the response from the URL properly, only .show() and .hide() functions seem to work. Although I have used conso ...

javascripthtmljqueryajax

Tips for ensuring that lengthy text remains within the confines of a table td by implementing CSS styling

What is the best way to ensure that 10,000 characters will fit inside a <td> without overflowing? I've experimented with various solutions such as: word-wrap: break-word overflow-wrap white-space: initial ...and several others, but nothing s ...

htmlcsshtml-tablecss-tablesword-wrap

What could be the reason for the malfunction of jQuery's show() function?

Using jQuery, I have implemented a functionality to hide a div using the hide() method. However, upon clicking a link, the div is supposed to show but unexpectedly disappears after appearing briefly. HTML Code Snippet <div id="introContent"> & ...

javascriptjqueryhtmlcss

Restore font-weight if a different list item is chosen

I previously inquired about setting the font-weight to bold on a text element when selected. Thanks to @Eric, this has been successfully implemented! However, I am facing an issue where clicking on one text makes it bold, and then clicking on another text ...

javascripthtmlcss