Aligning a title and a subheading in a horizontal manner

I want to align my h3 headings with my h5, using Bootstrap, so they are on the same line.

UPDATE: I aim to leverage existing Bootstrap functionality and avoid modifying CSS unless absolutely necessary.

Here is a screenshot illustrating what I mean: https://i.sstatic.net/Clixd.png

For example, "First Name" should be aligned with "Address 1", "Last Name" with "Address 2", and so on.

Below is the code snippet I currently have:

<div class="row ">
  <div class="col-md-4 ">
      <h3>First Name</h3>
      <h3>Last Name</h3>
      <h3>Week.</h3>
      <h3>Code.</h3>
  </div>
  <div class="col-md-4 ">
      <h5>Address 1</h5>
      <h5>Address 2</h5>
      <h5>Address 3</h5>
      <h5>Country</h5>
  </div>
</div>
htmlcsstwitter-bootstraptwitter-bootstrap-4

Answer №1

Using headers in this way is not ideal as it can lead to semantic incorrectness and may not be favored by search engines.

Instead, I recommend utilizing a table for displaying tabular data. You can apply different CSS styles to td:first-child and td:nth-child(2) to achieve varying font sizes.

.x {
  width: 100%;
}
.x td {
  padding: 10px;
  font-family: sans-serif;
  font-weight: light;
}
.x td:first-child {
  font-size: 24px;
  width: 60%;
}
.x td:nth-child(2) {
  font-size: 16px;
  width: 40%;
}
<table class="x">
  <tr>
    <td>First Name</td>
    <td>Address 1</td>
  </tr>
  <tr>
    <td>Last Name</td>
    <td>Address 2</td>
  </tr>
  <tr>
    <td>Week.</td>
    <td>Address 3</td>
  </tr>
  <tr>
    <td>Code.</td>
    <td>Country</td>
  </tr>
</table>

Answer №2

It's best to avoid adjusting the heights of h3/h5 and instead use multiple rows for better alignment. For example, if one of the texts wraps due to its length, your layout will be thrown off. This issue can be prevented by using multiple rows like so:

<div class="row">
  <div class="col-md-4">
      <h3>First Name</h3>
  </div>
  <div class="col-md-4">
      <h5>Address 1</h5>
  </div>
</div>
<div class="row">
  <div class="col-md-4">
      <h3>Last Name</h3>
  </div>
  <div class="col-md-4">
      <h5>Address 2</h5>
  </div>
</div>
<div class="row">
  <div class="col-md-4">
      <h3>Week.</h3>
  </div>
  <div class="col-md-4">
      <h5>Address 3</h5>
  </div>
</div>
<div class="row">
  <div class="col-md-4">
      <h3>Code.</h3>
  </div>
  <div class="col-md-4">
      <h5>Country</h5>
  </div>
</div>

In addition, I echo the sentiments of others in advising against using h3/h5 tags altogether. Headers should indicate relationships between different sections of text, where <h5> is a sub-subsection within a chapter denoted by the <h3> tag.

Answer №3

How to align line height, margins, and padding for h3 and h5 using CSS styling

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

Comparing hardware-accelerated CSS3 animations, transitions, and jQuery animate for mobile devices

While developing my app using PhoneGap and jQuery, I encountered a dilemma regarding animations. Initially, I relied on what I knew best - jQuery animate - to create smooth movements. However, discussions about hardware acceleration caught my attention. ...

cssjquery-animatecss-transitions

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

Decrease the distance between hyperlinks

I understand that this question has been asked numerous times before, but as a beginner in HTML, I still require some assistance. Given the code provided below, how can I decrease the spacing between the links in each column? Code: a { color: white; ...

htmlcsstwitter-bootstrap-3

Ways to adjust text color after clicking on an element

Just a heads up, I didn't write all of the web-page code so I'm not exactly sure what pdiv is. But I want to see if I can fix this small issue [making text color change when clicked on to show which section you're reading]. This particular ...

javascriptjqueryhtmlcss

Ensuring the validity of a signed cookie in Node using Express

I'm currently working on incorporating signed cookies in Node's express module. I've reviewed the documentation, but I'm struggling to understand how to properly verify them. My understanding is that verification must occur on the serve ...

javascripthtmlnode.jscookiesexpress

Issue with Angular 13 Bootstrap5 Navbar's functionality

Angular 13 is my framework of choice, and I recently integrated Bootstrap 5 into my project using the command below: ng add @ng-bootstrap/ng-bootstrap As for the index.js file content, it looks like this: <!doctype html> <html lang="en" ...

javascripthtmlnavbarbootstrap-5angular13

Is it possible to adjust the range of a range slider based on the selection of a radio button or other input method?

I have a query and I’m hopeful you can assist: function UpdateTemperature() { var selectedGrade = $( "input[name='radios']:checked" ).val(); $( ".c_f" ).text(selectedGrade); var value1 = $("#tempMin").val(); var value2 = $("#tempM ...

javascriptjqueryhtmlcssmaterialize

Angular Material's Expansion Panel Alignment

I am currently facing an issue with aligning the icon to the left side of the expansion panel and centering the title. I've tried using CSS with text-align but it's not working as expected. Any advice or suggestions would be greatly appreciated, ...

cssangularangular-materialangular13

Tips for relocating a CSS button

I have designed two buttons using css and I am looking to align them below the title "forecast customer activity". Due to extensive styling in css, the code might appear lengthy. Requesting assistance with a solution after reviewing the following code snip ...

javascripthtmlcss

The property 'innerHTML' cannot be assigned to null, as stated in Vue

I am dealing with two components that allow for editing JSON objects. Additionally, I have a button that toggles between these two components. Below is the HTML code snippet: <v-btn @click="switchConfigClicked">Switch config</v-btn> <h4 cla ...

javascripthtmlvue.jsvuejs2

Is there a way to extract the HTMLElement[] type from the DOM?

In my TypeScript project, I am trying to gather all the top-level elements of a page using the code snippet below: const getHTMLElement() : HTMLElement[] { const doc = document.body.children; const list : HTMLElement[] = []; for (let c of Array.f ...

htmltypescriptdom

Tips for creating text that wraps around an image in an editor

On my webpage, I am using an editor called Cleditor jquery plugin. The default setting allows me to insert images, but the text does not wrap around it. I attempted using vertical-align:top, but it did not resolve the issue: What CSS property should I ap ...

jquerycsseditorword-wrap

retrieving a date from a different source and displaying it in a date

Is there a way to ensure that the date format in an input of type date always follows the dd/MM/yyyy Brazilian pattern, regardless of the computer or browser specifications? <div class="input-group input-group text-center in ...

javascripthtmlangular

Remove a Row from a Table by Clicking a Button with Ajax

I currently have an HTML table with 4 columns: SKU Group, Group_ID, Edit button, and Delete button. My focus at the moment is on implementing the delete functionality. I want it so that when the delete button is clicked, a confirmation box appears. If "OK" ...

javascriptphphtmlajaxsql-delete

Issues with PHP and mySQL search functionality

<?php $username = "root"; $password = ""; $hostname = "localhost"; $db_handle = mysql_connect($hostname, $username, $password) or die ("Could not connect to the database"); $selected= mysql_select_db("login", $db_handle); ...

phphtmlmysqlsearchsearch-engine

Adjust the size of a div element dynamically to maintain the aspect ratio of a background image while keeping the

Utilizing the slick slider from http://kenwheeler.github.io/slick/ to display images of varying sizes, including both portrait and landscape pictures. These images are displayed as background-image properties of the div. By default, the slider has a fixed ...

javascriptcssslideraspect-ratioslick.js

Exploring the benefits of using Div and semantic elements in web

After spending more than two months learning HTML, I still find myself uncertain about the most practical coding approach. Despite knowing that it's important not to overthink it, I often wonder if I should stick with simplicity or add extra elements ...

htmlcss

Failure occurred when attempting to link and display on the page container

I have created a simple app using jQuery Mobile. At some point in the app, I include the following code: <a href="test_es.html" data-role="button">Start!</a> This code snippet loads a new HTML file that contains several jQuery Mobile page ...

javascriptjqueryhtmljquery-mobile

Customize Material-Table: Adjusting Detail Panel Icon Rotation upon Row Expansion

I've made a modification to the layout of the detail panel icon (mui ChevronLeft) so that it now appears on the right side of the table by using the options={{detailPanelColumnAlignment: "right"}} property. TableIcons : DetailPanel: for ...

cssreactjsmaterial-uimaterial-table

Guide to centering a list on a webpage using Bootstrap 3

Looking to create a centered list using the latest version of Bootstrap 3. Any tips? The desired list should be positioned in the middle of the page. ___________________________________________ | | | ...

htmlcsstwitter-bootstrap