Utilizing Bootstrap 3: Achieving Varied Font Sizes within a Row with Bottom Alignment

Just starting out with Bootstrap and looking to create a layout with two columns of text in the same row, where the first column has a larger font size than the second. However, I'm running into an issue where the text in the second column is positioned higher than the first one. My goal is to have both columns aligned at the bottom.

For reference, take a look at the current alignment issue I am experiencing: "Atlanta" is vertically misaligned compared to the name "John Doe."

Answer №1

update

<div class="container"> 
     <div class="row" style="border-bottom: 1px solid red;">
        <div class="col-xs-2" style="font-size:35px;">John Doe</div>
        <div class="col-xs-2" style=""><span style="font-size:35px;"></span>Atlanta</div>
      </div>
</div>  

--

I'm unsure if your inquiry relates to Bootstrap (which allows divs to float), so you might want to check out this resource as well: How to align content of a div to the bottom?

Consider adding padding:

<div class="container"> 
     <div class="row" style="border-bottom: 1px solid red;">
        <div class="col-xs-2" style="font-size:35px;">John Doe</div>
        <div class="col-xs-2" style="padding-top:21px;">Atlanta</div>
      </div>
</div>

Answer №2

Here are two methods that come to mind:

First Option: Avoid using columns, utilize "display-inline" instead

.inline { display: inline-block !important; }

Depending on the theme you're using, you might also require

.align-bottom { vertical-align: bottom !important }

There could possibly be a bootstrap class designed for this purpose. I located the following information:

Bootstrap Version 2.3.2

<ul class="inline">
  <li>...</li>
</ul>

Bootstrap Version 3

<ul class="list-inline">
  <li>...</li>
</ul>

DEMO: http://www.bootply.com/nba6HcSDll

Second Option: In case you need to use columns, explore this solution

Check out this demonstration showcasing equal height columns:

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

Searching for a way to smoothly scroll horizontally from right to left using the mouse wheel?

I am looking to display 3 out of my collection of over 6 articles, with the ability for the user to scroll from right to left when using the mouse wheel. Additionally, I want to hide the scrollbar for a cleaner look. Can anyone assist me with this? I hav ...

JavaScript: The functionality of calling functions through buttons ceases to function once the page is updated without reloading

I am trying to create a program that consists of one HTML page, where I can dynamically update and populate it with different elements using JavaScript. The main feature of the program is a button that remains constant in every version and displays a mod ...

Issues with Bootstrap offsetting columns within a fluid row

I am currently working on a fluid design layout, where I need to place form group elements inside the row-fluid with one specific condition - they must be aligned to the right side. <div class="row-fluid" style="background-color: #332619; color: #fff ! ...

Adjust the color of the sidebar's list items when scrolling

How can I change the background color of left sticky sidebars li on scrolling? When scrolling through BMW, BMW's background color in the sidebar should turn green. Please refer to the code snippet provided below. The background color of the li ...

Having issues getting Toggle Switches to function properly in Asp.Net Webforms

I am in need of a toggle switch that can be toggled on or off depending on the user's preference. Here is a CSS code snippet that I have come across in various examples: .switch { position: relative; display: inline-block; width: 60px; hei ...

Adjust scrollbar thumb size using CSS

I am looking to customize my scrollbar with a larger thumb size compared to the track. While I can adjust the color and other properties easily, I am struggling to change the sizes of the thumb and track separately. .custom_scrollbar::-webkit-scrollbar { ...

A slender gap of white space delicately separates the transformed parent from its offspring

When trying to align a parent div with a child div that has the same background-color as the parent's border-color, I am encountering an issue. Despite my efforts, there seems to be a thin line of whitespace separating the two divs. It is worth notin ...

"Maximizing Space: A Guide to Setting BootStrap Navbar on the Right Side of the Page with Dropdown Width

Take a look at the image below. There is a navbar toggle button on the upper right corner of the page. When I expand it, the dropdown items occupy the entire width of the page, causing an issue where clicking anywhere within the red box triggers the dropdo ...

Use jQuery to change the background color when clicked

Below is the HTML code with UL and LI elements: <UL> <LI><span id='select1'>Text</span></LI> <LI><span id='select2'>Text</span></LI> <LI><span id='select3'>Tex ...

How can I make the navbar in Angular stay fixed in place?

After using the ng generate @angular/material:material-nav --name=home command to create a navbar, I am trying to make it fixed at the top while scrolling. I attempted using position: fixed; on my mat-sidenav-content but it didn't work. Does anyone ha ...

"Implement a CSS hover effect that targets the child elements within a div, rather than

Looking to experiment with a new product card layout and encountering an issue with the box shadow effect. When hovering over the product card, the hover function only affects the child elements of the div Product-Card hov instead of the actual div itself. ...

Upgrade the arrow accordion in bootstrap by incorporating images instead

I have implemented a Bootstrap accordion with a toggle arrow. Here is an example: http://jsfiddle.net/zessx/r6eaw/12/ My question is, if I want to change the arrow with an image, what do I need to edit? Or how can I implement it? This is the image I want ...

Using JavaScript to dynamically load Cascading Style Sheets based on the current

I am trying to dynamically load different CSS files based on the current date (season). I attempted to tweak an image script that I found on Stack Overflow, but it didn't yield the desired result. Could someone please guide me on where I might be ma ...

The Navbar's Toggle Icon Causes Automatic Window Resize

I implemented a mobile navigation bar using React and JS that slides in from the left when clicked. However, I encountered two issues: whenever I click on a menu button in the navbar or when my ad carousel moves, the window resizes for some reason. Additio ...

What are some effective ways to ensure the footer stays at the bottom of the page

I managed to successfully position the footer at the bottom of the page, but I noticed that when I resize the screen to fit a phone, especially when there is scrolling on the page, the footer moves up! <footer className="footerContainer"> &l ...

Creating a Full Page Background Image That Fits Perfectly Without Resizing or Cropping

Can someone help me achieve the same effect as the website linked below, where the background image fades instead of being a slideshow? The image should be 100% in width and height without any cropping. I have managed to set this up with the codes provided ...

Press the "Reveal More" button to expand the content to its full size

I am currently working on coding a "read more" section using a button. I have looked at some existing solutions, but none of them are to my liking. My plan is to create a div that includes all the relevant content. My goal is to have a div at the bottom w ...

Tips for creating a scrollable sidebar while ensuring that the deeply nested child pop-up element does not adhere to the scrollable properties

In my project, I am using Vue 3 along with Tailwind CSS and Headless UI. The challenge I am facing is making the sidebar navigation scrollable while ensuring that the pop-up menu appears outside the sidebar. As the number of menu items in the sidebar will ...

Decrease the height of a div element from the top with the use of jQuery

My goal is to manipulate the height of the div #target when a specific event is triggered, either by reducing/increasing its height from the top or by hiding/showing its content. However, I'm struggling to find a solution to achieve this. The current ...

Animated CSS sidemenu (utilized as a filtering panel for a table)

Hi there, I'm having some trouble with CSS Animation. I recently started developing websites and am using Bootstrap 4 along with Animate.css for animations. My goal is to have an icon button expand sideways to reveal a div containing select elements f ...