Create a row that has a centered heading and a button aligned to the right using Bootstrap 4

I'm currently working with Bootstrap 4 and React. I'm attempting to centralize a h4 heading while also aligning a couple of buttons to the right, all within the same row. The issue I'm facing is that the h4 heading is only centered within the remaining space after the buttons, rather than the entire width.

My goal is to have the h4 heading centered across the entire width, while still keeping the buttons aligned to the right in the same row.

Could someone please advise me on how to achieve this?

<div>
  <div className="float-right">
    <EditButton /> <DeleteButton />
  </div>
  <h4 style={{ textAlign: "center" }}>Application Name</h4>
</div>
cssreactjstwitter-bootstrapbootstrap-4

Answer №1

It seems like you're looking to achieve a layout where the heading is centered on the screen and the buttons are aligned to the right of it. To do this, you can first set the display: inline property for the h4 element to ensure that the buttons follow it inline. Then, apply the text-center class to center everything. Additionally, you can position the buttons to the top right corner using CSS like this:

.buttons {
  top: 0px;
  right: 0px;
}

h4{
  right: 50%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<h4 class="text-center">H4 Title</h4>

<div class="text-center">
  <h4 class="d-inline">H4 Title</h4>
  <button class="btn btn-primary">Button</button>
  <button class="btn btn-primary">Button</button>
  <button class="btn btn-primary">Button</button>
</div>


<div class="text-center mt-5 position-relative">
  <h4 class="w-100 text-center">
    H4 Title
  </h4>
  <div class="position-absolute buttons">
      <button class="btn btn-primary">Button</button>
      <button class="btn btn-primary">Button</button>
      <button class="btn btn-primary">Button</button>
    </div>
</div>

Answer №2

To align text in the center, apply the text-center class. To right align a button, use the text-right class

For full-width layout, utilize the container-fluid class and set m-0 p-0 for margin: 0; & padding: 0 to eliminate any extra space.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="container-fluid p-0 m-0">
  <div class="text-center">
    <h4 class="d-inline">i am H4</h4>
    <button class="d-inline float-right btn btn-info">Demo</button>
  </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

Is there a way to trigger both the link and the div element simultaneously?

Is there a way to make both the button and the link light up simultaneously when hovering over the div element, instead of just the button lighting up first? <div id="b1"; class = b> <a href="test.html">BUY</a> < ...

htmlcssbuttonhover

What could be causing the border-collapse property to be ineffective on my HTML table?

My HTML table has nested tables, but the border collapse property is not working. Despite adding the border-collapse property to both the main table and nested tables, only the outer borders are visible, with no inside borders. <table style="bord ...

htmlcss

The AngularJS page on my website is currently stuck in the mobile version, and strangely, the Google Chrome console is

When browsing our AngularJS website in mobile view on Google Chrome, it gets stuck and becomes unresponsive. The developer console does not show any error messages during this time. To replicate the issue, switch to mobile view, click on the "All top compa ...

javascriptjquerycssangularjsgoogle-chrome

Personalize the appearance of dynamically generated DIV elements

This script generates a random number of squares (ranging from 20 to 40) and adds text to each square. The script then calculates the width of each square so that they all fit in a single row. Here is the code snippet: var quantity = Math.floor(Math.ran ...

javascriptcss

The alignment of the text seem to be malfunctioning

The text-align:center property isn't working as expected. Can someone please assist me in figuring out why it's not functioning correctly? Here is the HTML code snippet: <!DOCTYPE html> <html> <head> <title>Wheat and ...

htmlcss

Arranging blocks within blocks? Placing additional text underneath a block

Looking to append some text at the end of a block called .label. Inside this block, there is a sub-element called .label_title, and below that is a picture/link enclosed in another block. Under the picture/link, I wish to include a short description while ...

cssblock

Creating a Copy to Clipboard feature in React can be achieved by transferring data from an h1 tag to an input field

I'm trying to extract data from an API into an h1 tag in my app. Is there a way for me to easily copy this data and paste it into an input field? Any help would be greatly appreciated. Thanks! ...

javascriptreactjs

Incorporating CSS into an HTML document with Jersey/Grizzly

This is the structure of my project: src/main/java -- main.java src/main/resources -- webapp -- -- css -- -- js -- -- images -- -- pages -- -- -- home.html Currently, my Maven project utilizes Jersey and Grizzly. I am able to call my REST services and lo ...

javahtmlcssmavengrizzly

Having trouble reliably using Regex to highlight text within dangerouslySetInnerHTML in React

To achieve the goal of highlighting text parts (strings) within a dangerouslySetInnerHTML, I attempt to locate the desired text part within the html and enclose it in a "span" element with suitable styling. While the code I am using works flawlessly for ce ...

regexreactjsreplacehighlight

Tips for Styling "Opened" Elements within the <Summary><Details> Web Design in HTML using CSS? (a color coding challenge)

I've dedicated a significant amount of time crafting my ultimate HTML FAQ with detailed summaries styled in CSS. There's one aspect that continues to elude me - achieving the perfect orange background color for expanded topics: My goal is for a ...

htmlcsscss-selectorshtml-tag-detailshtml-tag-summary

Tips for embedding a hyperlink in your HTML website

While I've mastered adding images to my HTML website, there's one thing that still eludes me despite scouring numerous online resources. I recently created a small animation using JavaScript on a different IDE, and I have the link to my output: ...

javascripthtmlcss

Eliminate the gaps between the columns of the table

Is there a way to eliminate the gap between the day, month, and year columns in this table? <form action='goServlet' method='POST'> <table style="width:1000px" style="text-align:center"> <tr style="text-ali ...

htmlcssjsp

Adjust the styling of the anchor tag within the selected div by utilizing jQuery

I am struggling with changing the color of a specific anchor tag when clicked inside a div with class .product_wishlist. Currently, all anchor tags within .pw div are changing colors. Is there a way to apply selected css only to the clicked element? Any he ...

javascriptjqueryhtmlcss

What are the steps to add border styles to the top and bottom rows in a tanstack expandable react table?

In my project, I am utilizing the combination of Material UI and React Table. Recently, I was asked to add an expandable row, and I successfully implemented that feature. Once a user expands the row, we display additional table rows based on the data. If ...

cssreactjsmaterial-uicss-selectorsreact-table

MUI-Datatable: Is there a way to show the total sum of all the values in a column at once

I have a column displaying the Total Amount, and I am looking for a way to show this totalAmount. After conducting some research, it seems like onTableChange is the key. Currently, it effectively displays all of the data using console.log("handleTab ...

javascriptreactjsmaterial-uimui-datatable

Rendering Highcharts React Pie Chart Multiple Times

Here is the code snippet: import React, { useEffect, useRef, useState } from "react"; import * as Highcharts from "highcharts"; import HighchartsReact from "highcharts-react-official"; export const PieChart = (props: any) =&g ...

javascriptreactjshighchartsnext.js

Implementing a Vue.js Scrollable Table

I am currently working on a table that is populated using the vue.js v-for method: <table> <tr><th>Name</th><th>Surname</th></tr> <tr v-for="user in users"><td>@{{user.name}}</td><td>@{ ...

javascriptjqueryhtmlcssvue.js

Sliding Navigation Panel

Currently, I am attempting to implement a sidebar push navigation that mimics the one showcased here. My HTML structure includes content within a center element div. The code snippet is as follows: <div id="mySidenav" class="sidenav"> <a href="j ...

css

The command "npm start" fails to execute on Windows operating systems

After using npx create-react-app to create my application, I encountered an issue where running npm start would do nothing and exit with code 0. When I try to run the npm start command, I receive the following message: C:\projects\novo-curricul ...

node.jsreactjsnpm

Error: Unable to access the 'bitmap' property of an undefined object

Currently in the midst of extracting data from contentful using GraphQL within my Gatsby application. However, I have encountered the following error: Error: TypeError - unable to read bitmap of undefined. Assistance needed. I have successfully accesse ...

reactjsgraphqlgatsbygatsby-image