Match the text within a span with the .btn class

I am currently dealing with the .card displayed below and struggling to get the text "You liked this." to align correctly with the Like and Comment .btn-links under the hr element.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card mx-auto mt-5" style="width:500px">
    <div class="card-body">
      <hr>
      <div>
        <button class="btn btn-link">Like</button>
        <span class="text-muted" style="">You liked this.</span>
        <button class="btn btn-link float-right">3  Comments</button>
      </div>
  </div>
</div>

I have exhaustively attempted various methods such as adjusting display properties, margins, padding, and font-height to no avail. I am seeking advice on how to achieve proper alignment in this scenario.

I could potentially resolve it using floats or flexbox, but I find them to be excessive solutions. Any help offered would be greatly appreciated. Thanks.

cssbootstrap-4

Answer №1

Don't forget to include the vertical alignment by adding the Bootstrap class align-middle to your span element.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card mx-auto mt-5" style="width:500px">
    <div class="card-body">
      <hr>
      <div>
        <button class="btn btn-link">Like</button>
        <span class="text-muted align-middle">You liked this.</span>
        <button class="btn btn-link float-right">3  Comments</button>
      </div>
  </div>
</div>

Answer №2

Feel free to utilize this snippet

        body {
            margin: 0;
            padding: 0;
        }
        .btn-link {
            font-weight: 400;
            color: #007bff;
            text-decoration: none;
            margin-top: -4px;
        }
    <div class="card mx-auto mt-5" style="width:500px">
        <div class="card-body">
            <hr>
            <div>
                <button class="btn btn-link">Like</button>
                <span class="text-muted" style="">You liked this.</span>
                <button class="btn btn-link float-right">3  Comments</button>
            </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

Arranging Columns in Bootstrap 4.0

I am attempting to create a layout using Bootstrap 4 that consists of two larger columns on the left and four smaller columns grouped together on the right, with the height of the four columns not exceeding the height of the two larger columns. However, I ...

htmlcssflexboxbootstrap-4multiple-columns

Various SVG paths make up segments

I have created an intricate SVG file containing 35 different paths resembling train tracks. My next step is to break down these paths into 16 segments, allowing another SVG path (train) to smoothly traverse along them. The ultimate goal is to grant users ...

javascripthtmlcsswebsvg

Verify whether the division contains any elements and does not include specific elements

I previously opened a similar thread, but with the condition that the div does not contain a second element within it. So my previous question was as follows: I have some code that looks like this: <p class="elementWrap"> <label>Phone</l ...

javascriptjqueryhtmlcss

Can we dynamically adjust font size based on the width of a div using CSS?

My div is set to 70% width and I have a specific goal in mind: To fill that div with text To adjust the font size so that it takes up the entire width of the div https://i.stack.imgur.com/goVuj.png Would it be possible to achieve this using only CSS? B ...

htmlcssfontsresponsive-designfont-size

Use PHP code to echo a clear division after every third result in MySQL

I am currently displaying results in descending order from a MySQL table using a while loop. I have already set up a pagination system that displays 9 records per page. However, I am facing an issue when trying to implement a CSS break every 3 records in ...

phpmysqlcss

Adding space and arranging the cards in a horizontal layout using Bootstrap

I'm working on a code and an HTML page with Bootstrap enabled. The current setup simply displays three bootstrap cards with images vertically on the page. Now, I would like to: a) Add a margin from the left-hand side. b) Display the cards horizontal ...

htmllayoutbootstrap-4marginbootstrap-cards

What steps do I need to take in order to integrate my unique landing page design into Wordpress

Currently, I am involved in a project that utilizes Node.js on Docker. As part of this project, I have developed a landing page using Bootstrap. In the future stages of the project, our team plans to incorporate Wordpress as a content management system ( ...

node.jswordpressbootstrap-4twitter-bootstrap-3

Display a modal when clicking on a bootstrap glyph icon

I tried following a tutorial on how to create a Bootstrap modal at https://www.w3schools.com/bootstrap/bootstrap_modal.asp However, I would like to use a glyph icon in the code snippet like this: <span class="glyphicon glyphicon-pencil" class="btn btn ...

csstwitter-bootstrap

ReactJS is having trouble with inline animation styles

After successfully implementing a timer using CSS with animation, everything was working as expected. However, I encountered an issue when trying to convert it into JSX inline styles in React. The animation stopped working as smoothly as before due to the ...

cssreactjsanimationjsx

Tips on maintaining the Parent menu in a hovered state when the mouse is over the child menu within a Dropdown Menu

I have been working on creating a dropdown menu that functions correctly. However, I am facing an issue where the top menu, when hovered, turns white, but as soon as I move down to the submenus, the top menu reverts back to its original color. Is there a ...

phpjavascriptjquerycss

What steps should I take to resolve the issue of a Laravel table extending beyond the

I recently created a table in Laravel Blade with Bootstrap, but I'm facing an issue where the table exceeds the screen width. Normally, my tables are auto-centered, but that's not the case here. Since I'm new to Laravel, I'd appreciate ...

laravelbootstrap-4

How can I emphasize only a portion of a word in ReactJS and Material UI?

I am attempting to replicate this design: https://i.stack.imgur.com/H8gKF.png So far, this is what I have been able to achieve: https://i.stack.imgur.com/TJXXb.png My project utilizes Material UI and ReactJS. Below is a snippet of the code: bodyTitle: { ...

cssreactjsmaterial-ui

Is there a way to resolve the issue of this div sticking to the top of the

I am currently working on building a portfolio website. One issue I'm facing is that my first div (for the "About Me" section) appears below my second div on the webpage. My goal is to have the first div displayed in full screen on both mobile and des ...

htmlcss

Please indicate the quantity of items to be displayed in a panel equipped with a scrollbar

Take a look at the current picture: https://i.sstatic.net/11T4tm.png The issue is figuring out how to reduce its size and then implementing a scrollbar to navigate through the other elements. I am working with Bootstrap, and below is my code snippet: ...

htmlcssbootstrap-4

Dynamic CSS Class Implementation with KnockoutJS

Greetings, I am seeking assistance as I am new to KnockoutJS. I am working with a class named green-bar that I need to activate when two particular states are true. Unfortunately, the solution I came up with below is not functioning correctly, and I'm ...

javascriptcsshtmlmvvmknockout.js

What is the best way to ensure the div stays in sync with scrolling?

Trying to synchronize two divs while scrolling. Essentially, I have a page scroll and want to fix the second div when it reaches the top. Please refer to the gif icon attached for clarification. You can view my progress so far here. The current issue in ...

jqueryhtmlcssparallax

Issue with multiple data-toggle not functioning properly in Bootstrap 4

Here is a link to the page I am referring to: Below is the code snippet found on that page: <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a class="btn btn-primary btn-sm" href="#" role="b ...

bootstrap-modaltwitter-bootstrap-4bootstrap-4

Creating a Pinterest-inspired CSS layout from scratch without using any additional plugins

If you want to check out my code on jsfiddle and learn how to create a style similar to Pinterest without using plugins, click on the link below. Within the code, there is a square Node.js diagram that I would like to position down the left side. http://j ...

jquerycsslayout

The dropdown in the Material UI GridList appears excessively wide

Currently, I'm attempting to design a grid-shaped drop-down menu in Material UI. Most of the dropdowns available in the documentation are either a single column or a single row. I tried utilizing a menu component that includes a GridList, which almost ...

cssreactjsmaterial-ui

Enhance the appearance of a button in Rails by incorporating custom styles or images

I am currently working with Rails and I am curious if there are any simple ways to enhance the appearance of the button_to control. Is it possible to style the <%= submit_tag 'Log in' %> or <%= button_to "Show Me", {:controller => ...

ruby-on-railscssstylesheet