How can I make an inline h1 with a span that is aligned to the end?

I am attempting to create the most basic react app possible and I want to design a header using Bootstrap 4. The header will have two parts: the first part on the left side and the second part on the right side. Currently, my code looks like this:

 <div className='container justify-content-center'>
    <h1>Todo App <span className='d-flex justify-content-end text-secondary'> today tasks:</span></h1>
</div>

After implementing the code, the output looks like this:

Todo App
          today tasks:

However, I would like the result to look like this (without a new line):

Todo App     today tasks:
htmlcssbootstrap-4

Answer №1

I just want to build something similar to this:

<div className='header-container d-flex'>
    <h1>My App </h1>
    <span className="text-primary">current tasks: </span>
</div>

and define the following CSS style:

.header-container {
    align-items: flex-start;
}

Answer №2

It seems like you may be searching for the class justify-content-between.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container row justify-content-between align-items-baseline">
  <h1>Title</h1>
  <span> part</span>
</div>

Answer №3

Here is the code snippet you can use:

<div class="d-flex align-items-center">
    <h1>Daily Tasks</h1>
    <span class="ml-auto text-muted">tasks for today:</span>
</div>

Answer №4

To achieve this layout, you will need to create a nested flex container. The parent flex container can be styled using the .row class, while the child flex items should use the .col class. The second child item will act as another flex container and can be styled using .col.d-flex.justify-content-end. Additionally, I included the .h1 class to ensure that the text is rendered in the same style as an <h1> tag.

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

<div class="container">
  <div class="row">
    <h1 class="col">Todo App</h1>
    <div class='col d-flex justify-content-end'>
      <span class='h1 text-secondary'>today tasks:</span>
    </div>
  </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

Display 'Div 1' and hide 'Div 2' when clicked, then reveal 'Div 2' and hide 'Div 1' when a different button is clicked

I need help figuring out how to make two separate buttons work. One button should display 'Div 1' and hide 'Div 2', while the other button should show 'Div 2' and hide 'Div 1' when clicked. My knowledge of jquery an ...

javascriptjqueryhtmlcss

Next.js is causing me some trouble by adding an unnecessary top margin in my index.js file

I started a new project using next.js by running the command: yarn create next-app However, I noticed that all heading and paragraph tags in my code have default top margins in next.js. index.js import React, { Component } from "react"; import ...

javascriptcssreactjsnext.jsjsx

Incorporate Thymeleaf's HTML using the powerful JavaScript framework, jQuery

I am facing an issue where the Thymeleaf rendered HTML code is not being displayed by the Browser when I try to insert it using JavaScript. $('<span [[$ th:text#{some.property.key}]] id="counter" class="UI-modern"> </ ...

javascripthtmljquerythymeleaf

Challenges with CSS div styling (border and image issues)

I won't bore you with the details, but I'm trying to overlay image links on top of a background image in specific positions. Despite my best efforts, the images are not changing no matter how much I tweak their parameters. Here is the HTML code: ...

htmlcssimage

What is the best method to position a modal in the exact center of the screen?

Is there a way to position the modal at the center of the screen? I have tried implementing this HTML and JavaScript code. Interestingly, it works fine in Chrome console but fails when I try to refresh the page. $('.modal').css('top', ...

javascriptjqueryhtmlcsstwitter-bootstrap

Anyone able to solve this mysterious CSS alignment problem?

I have a search bar with two image buttons on a webpage I designed using ASP.NET. When I view the page in Internet Explorer 8, Google Chrome or Opera, I noticed that the textbox and image buttons are not aligned properly. The buttons seem to be positioned ...

asp.nethtmlcss

Mentioning VARs found on additional pages

I'm currently designing a website. At the moment, I have set up the site to prompt users for their name on the landing page and store it in a string variable. var username = ""; Once users enter their name and click "Enter Site," they are directed ...

javascriptjqueryhtml

Creating a modal form with jQuery in ASP.NET

I'm fairly new to ASP.NET development and have been able to work on simple tasks so far. However, I now have a more complex requirement that I'm struggling with. My goal is to create a modal form that pops up when a button is clicked in order to ...

javascriptjqueryasp.nethtml

The navigation bar text spills over the designated area

I'm facing an issue in the front end where the navbar does not adjust on narrow screens, causing text to overflow. Although it works fine on wide monitors and mobile screens, iPads in portrait view have the last section of the navbar extend outside of ...

htmlcssnavbar

The functionality of the jQuery .click method appears to be malfunctioning within the Bootstrap

It seems like my JQuery.click event is not functioning as expected when paired with the corresponding button. Any ideas on what might be causing this issue? Here's the HTML CODE snippet: <button id="jan7" type="button" class="btn btn-dark btn-sm"& ...

javascriptjqueryhtmlcssbootstrap-4

Using ASP.NET MVC to generate dynamic CSS styles

I am seeking a solution that will allow me to achieve the following objectives: Retrieve dynamically generated CSS from an action method Select a CSS file based on request parameters or cookies Utilize a tool for combining and compressing (minifying) CS ...

c#.netasp.net-mvccss

Generate code in Yii2 using the active form

This is the code I am using in Yii2: <?= $form->field($model, 'username')->label(false); ?> <?= $form->field($model, 'password')->label(false); ?> It produces the following output: <div class="form-group fi ...

phphtmlformsyii

Achieving left text alignment in CSS for an excerpt using the Ultimate Posts Widget on Wordpress

I've been trying to align the text in the excerpt of a widget called "To-Do List" on the left sidebar. I attempted to set the text-align property to left for the excerpt text, targeting the p tag within the .widget_ultimate_posts, .uw posts using CSS ...

htmlcsswordpress

SQL inputs with information that updates automatically / autofill SQL input boxes

Is it feasible to create a webpage that can connect to an SQL database, retrieve information from a table, and display it in a text box based on the input provided in another text box? Essentially, I am looking for a way to enable autofill functionality. I ...

phpjavascriptmysqlhtmlsql

Initiate a new line within a flex item

<Popper id={"simplePopper"} open={this.context.loading} style={{display: "flex", alignItems: "center", justifyContent: "center", backgroundColor: 'red',opacity:'0.5',width:'100%',he ...

cssmaterial-ui

transferring data from a web page to a php script seamlessly without navigating away

I've already spent a significant amount of time searching on Stack Overflow and Google, but I haven't found a solution that works for me. My issue is that I have an HTML form and I need to send the data to PHP without redirecting or leaving the ...

javascriptphpjqueryhtmlajax

What is the process for making the default text in a text box appear grayed out?

Hey there! I have this cool idea for a text box. Basically, it starts off with default text but when you hover your mouse over it, the text disappears and you can start typing as usual: If you want to see how it looks like, you can check out this link: N ...

javascriptcss

I am having trouble getting Vue.js to function properly within HTML when using Django. Can someone please lend me a

The code run Here is the HTML document: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Register</title> <!--javascript extensions--> <script src=' ...

javascripthtmldjangovue.js

Unusual shift in the modal's behavior occurs when the parent component's style.transform is applied

I have encountered an unusual issue with a modal's appearance and functionality. The modal is designed to enlarge images sent in a chat, with the chat upload preview div serving as the parent element and the modal as the child element. This strange be ...

javascriptcssreactjscss-transforms

Adjust the alignment of text within the <select> tag to the right in Safari browser

Is there a way to align text right in a select option tag? <select style="direction:rtl;text-align:right"> <option value="" selected="">همه</option> <option value="1">راهبر سيستم</option> <option v ...

htmlcsssafari