Tips for organizing content on a webpage by placing heading and paragraph tags side by

I am struggling to align heading and paragraph tags side by side in an inline format. Here is my attempt using bootstrap 4:

<div class="col-md-1 text-left">
    <span class="d-inline">
        <h2>
            {{ event.formattedDate.slice(9, -15) }}
        </h2>
    </span>
    <span class="d-inline">
        <p>{{ event.formattedDate.slice(5, -17) }}</p>
        <p>{{ event.formattedDate.slice(0, 3) }}</p>
    </span>
</div>

However, my output looks like this instead: https://i.sstatic.net/GDgs5.png

Can anyone advise on how to achieve the desired layout?

htmlcssbootstrap-4

Answer №1

Avoid nesting block elements (such as <h2> and <p>) inside inline elements like <span>. Learn more about this here.

Instead, consider using a flex container as shown below:

.box {
  /* Use flex properties */
  display: flex;
  align-items: center;
  background-color: black;
  color: white;
  width: fit-content;
  padding: 16px;
}

h2 {
  font-size: 64px;
}

p {
  font-size: 24px;
}

h2, p {
  margin: 0;
}

.box div {
  margin-right: 16px;
}
<div class="box">
    <div>
        <h2>
            08
        </h2>
    </div>
    <span>
        <p>Aug</p>
        <p>Sat</p>
    </span>
</div>

Enjoy creating something awesome!

Answer №2

Do you think this solution will suit your needs?

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex">
    <h1>8</h1>
    <div class="row ml-2">
    <span class="col-12">month</span>
    <span class="col-12">day</span>
    </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

The template in AngularJS route fails to display

I am currently facing an issue with loading multiple pages using AngularJS $routeProvider and two controllers. Whenever I click on a link from the first partial to go to the second one, the second partial fails to render properly, displaying only template ...

javascripthtmlangularjsangularjs-routing

I am looking to include a popover within my modal using Bootstrap version 3.0.2

Hey there, I'm having an issue where the popover that should be inside the modal is actually appearing outside of it in the top left corner, not visible within the modal itself. Below is my index code: <button type="button" id="example" class="bt ...

javascriptjquerycsstwitter-bootstrap

Modify the collapse orientation in Bootstrap

I would like the button to expand from the bottom when clicked and collapse back down, instead of behaving like a dropdown. <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_ ...

javascriptcssbootstrap-5

Tips for moving or aligning a search box when clicked or focused

I need some help with designing a search box similar to the layout on Google's homepage. I want it to be centered, but when clicked on, I would like it to float to the top left corner of the screen. I have been able to modify the size of the search bo ...

jquerycsshtml

When reducing the page size, the Bootstrap columns are colliding with

While resizing the screen, I noticed that these images are overlapping each other. I haven't made any changes to the css for container-fluid or row. <div class="container-fluid bg-grey"> <div class="row center"> <div class= ...

htmlcsstwitter-bootstrap

All pictures aligned with overflow

The first container is working fine, displaying 2 images vertically, but when there are 6 images, it overflows. The problem lies with container 2, where I want to create a horizontal list of images with overflow (only horizontal). This is the current sta ...

css

Responsive Bootstrap navbar menu expansion issue at certain breakpoints

Just beginning my HTML/CSS journey and currently experimenting with Bootstrap, specifically the navbar component. I've made some adjustments to text alignment and added a logo. However, I encountered an issue when the screen size is reduced to trigge ...

htmlcssnavbarbootstrap-5

Creating an overlapping HTML/CSS div within a parent div

After successfully building numerous websites and fixing various issues along the way, I now find myself stuck on a particular problem. Despite my experience, I can't seem to figure it out this time. The issue lies within a wrapper div that contains ...

csshtmloverflowoverlap

Displaying website backgrounds in a digital signage system on a full screen

My pharmacy is using a Raspberry Pi and Screenly-OSE for our Digital Signage solution. We showcase various ads along with the overnights using a simple Sinatra application to serve overnights. Everything works great, but there's a pesky white space th ...

csssinatra

Aligning vertical pills to the right using Bootstrap framework

Here is the relevant code snippet that I am working with: <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <scrip ...

htmlcsstwitter-bootstrapright-align

Is there a way to deactivate a full HTML page during an event, similar to when using a JavaScript alert?

I'm currently working on a JSP/HTML web page where I need to disable or "gray out" the entire page when a button is clicked. This will prevent the user from accessing any other elements on the page until it's disabled. Any ideas on how to achiev ...

jquerycss

Does the placeholder property exist in versions of IE8 or lower?

Although the real html5 placeholder feature may not work in IE10 and below, would the actual tag property still be accessible? To implement my custom placeholders, I utilize the script below: if(core.isInput(el)) { el.initValue = str; el.txtColor ...

javascripthtmlcross-browser

Managing various choices in a Select menu using a single submit button

My method of using mysql to insert data into dropdown menus is not working as expected. Each dropdown menu has a unique name assigned from the database query $stmt. The content for each dropdown menu is retrieved through another query, $stmt2. My goal i ...

phphtmlmysql

What is the process for submitting a form from a different webpage?

I am working on a website with two pages. Each page has a header with navigation tabs to move between page 1 and page 2. When a tab is clicked, I want the selected page to re-POST to the server for a quick refresh before displaying. There is a form on e ...

javascriptjqueryhtmlforms

Dealing with JS and Spring issues

I created a simple script that retrieves longitude and latitude values and populates an input form. Here is the HTML: <p id="demo">Click the button to get your coordinates:</p> <button onclick="getLocation()">Try It</button> <sc ...

javajavascripthtmlspring

Display information retrieved from database query in HTML

As someone who is new to PHP, I am determined to learn and improve my programming skills through it. Currently, I have incorporated the following PHP code into my webpage to fetch data from my database: <?php //code missing to retrieve my ...

phphtml

Changing navigation position while scrolling to a different anchor using fullpage.js

Currently, I have a lengthy scrolling webpage that utilizes fullpage.js. The navigation is fixed in position over the page and each active slide is highlighted by its corresponding link. My goal is to have the link move to the top position when it's ...

jquerycssbootstrap-4fullpage.jsslick.js

Guide to aligning a div element along the right edge of the webpage

I'm struggling to align this div all the way to the right side of the screen. Below is the HTML: <html> <head> title></title> <link rel="stylesheet" type="text/css" href="../css/style.css"/> </head> <h1&g ...

htmlcss

The scrolling feature in Fancybox modals is malfunctioning

Hey everyone, I'm having some trouble with the fancybox modals on this website: . The modals seem to be acting up - sometimes scrollbars show up, but you can't scroll using the mousewheel or trackpad. I've tried tinkering with the fancybox j ...

javascriptjquerycsswordpressfancybox

Issue with scrollTop functionality not functioning properly in sidebar navigation / division

I am currently working on a web page that features a fixed scrollable sidebar menu styled with Bootstrap on the left side, while the main content is displayed on the right side. <div class="wrapper"> <nav id="sidebar"> <ul id="main ...

javascriptbootstrap-4sidebarscrolltopscrollable