Having trouble with button alignment in the header with Bootstrap 3?

Using Bootstrap 3 and looking to adjust the alignment of a star icon with the title in my HTML page. Here is the current setup:

<p class="pull-right visible-xs">
            <h3><center>2000 Cadillac Eldorado Esc (Prospect heights) $3500 
              <button type="button" class="btn bookmark" id="1799" > 
                <span class="
                  glyphicon glyphicon-star-empty "></span>
              </button>
              </center>
            </h3>
          </p>

Below is the accompanying CSS:

button.bookmark {
  border:none;
  background: none;
  padding: 0;
 }

 .btn.bookmark .glyphicon {
  line-height: inherit;
  vertical-align: middle;
}
htmlcsstwitter-bootstrap-3

Answer №1

Regarding your previous inquiry, my solution is tailored for when the icon is positioned next to a .btn. The goal is for them to align flawlessly, as if they were both .btns.

In this particular scenario, you can skip using the .btn class and instead adjust the vertical alignment directly on the button element.

<button type="button" class="bookmark" id="2210">

button.bookmark {
  border:none;
  background: none;
  padding: 0;
  vertical-align: middle;
}

See Demo

Answer №2

I suspect that the line-height in your CSS is causing the issue. It seems to be inheriting a smaller attribute, which could be why there is too much space above it. If you can provide a link, I can examine it with Firebug. If not, try adjusting that property. You may also find helpful information about this Here

I hope this solution works for you. Please let me know if it resolves the problem.

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

What is the best way to convert this html code into php?

I’m trying to figure out how to incorporate all of this into my loop, but I’m not sure if it can be broken up. However, PHP needs to interpret it as HTML. $movieDetails = <header class="masthead" role="banner"> <div class="logo-con ...

phphtmlvariables

Place the div absolutely on top of the Flash content

Can a <div /> be absolutely positioned over a Flash banner without including wmode="transparent" in the banner? I am trying to display a lightbox above my ads, but I cannot make changes to the banners since they are provided by a third party. Edit: ...

javascriptcssflashinternet-explorerxhtml

Aligning text vertically within an HTML <a> tag block

Calling all CSS experts! I'm struggling with aligning text to the bottom of a block element with a fixed width and height that contains a background image and a title. I've tried using display: table-cell; and vertical-align: bottom; without succ ...

htmlcsstagsvertical-alignment

The animation loop completes and restarts from the initial keyframe

I have a CSS animation that I want to play through once and then stop at the final keyframe. However, currently it keeps returning to the initial keyframe and stopping there instead of reaching the end. The animation involves a title heading that gradually ...

csswordpresscss-animationselementorwebkit-animation

The align-self-center property in Twitter Bootstrap Flex does not properly center elements vertically

I recently started working with twitter bootstrap 4.4.1 and flex to create a unique layout for my project. My main goal is to have a navbar at the top and the content displayed in the middle of the screen, as shown in the image here: https://i.sstatic.net ...

htmlcsstwitter-bootstrapbootstrap-4flexbox

Leverage the power of jQuery to fetch data from a PHP script connected to a MySQL database

It might be a bit confusing, so let me clarify. I'm working on a form where users input a ticket and it gets assigned to a technician based on the service they offer. I have 3 text fields: username, email, and description of the problem. The next fie ...

javascriptphpjqueryhtmlmysql

Is there a way to keep my footer fixed to the bottom of the page in Google Chrome?

I recently made some updates to my aging website by adding a footer menu. However, I encountered an issue with the placement of the footer on Google Chrome. It appears too high, overlapping certain elements of the site. I attempted to resolve this problem ...

htmlcssgoogle-chrome

Exploring the anatomy of the img src tag

Using jQuery, I have successfully implemented code to display an image when clicked by storing the image source into a variable like this: var imgSrc = $(event.target).attr('src'); I then use this variable to add the image to a div and show it o ...

jqueryhtmlcss

Manipulate the SQL Table output in PHP before displaying it

I am facing a beginner's problem. I have the following code to access a SQL Table, and before printing it out (which works), I want to check if the "Zustand" in the table is 0 or 1. The function should then change the printout to show "good" for 1 and ...

phpmysqlsqlhtml

"Strategies for using Selenium in Python to simulate clicks without relying on class, id, or name attributes

I am currently attempting to locate the "X" button and click on it, but I am struggling to find a way to do so. Below is the HTML code for the element: <div style="cursor: pointer; float:right; border-radius: 3px; background-color: red; font-size: ...

javascriptpythonhtmlselenium

Applying hover effect to material-ui IconButton component

As stated in the React Material-UI documentation, I have access to a prop called hoveredStyle: http://www.material-ui.com/#/components/icon-button I intend to utilize the IconButton for two specific purposes: Make use of its tooltip prop for improved ac ...

javascriptcssreactjsmaterial-ui

What steps should I follow to have my edit form component extract values from HTML in Angular?

I created a detailed listing page that includes a picture URL, title, phone number, description, and price. When the user clicks on the Edit button, it redirects them to a page with input forms for each of these fields. The form automatically populates the ...

javascripthtmlangular

adjusting array based on screen size fluctuations

Imagine having two arrays of images named landscape_images[] and portrait_images[]. One is for the landscape view and the other for the portrait view. When the screen width is in landscape mode, the wide resolution images will be displayed on the body. C ...

javascripthtmlcssreactjs

Embed a website in an iframe and modify a portion of the URL within the embedded page

Welcome to my first question here! I am looking for a solution that will allow me to load a webpage inside an iframe while modifying parts of the URLs in any links on the page with different text. For example, let's say we load a website like "myweb ...

javascriptjqueryhtmliframevbscript

Generating dynamic links in HTML

I've been stuck on this problem for a while now. What I'm trying to do is create a Django website that pulls in Twitch livestreams and displays them on different pages. It's a project I'm working on to learn how to use APIs in web appli ...

htmldjangoobject

Automatic Opening and Closing of Bootstrap Modal

function toggleModals(hideModal, showModal) { console.log(hideModal); console.log(showModal); $(hideModal).modal('hide').on('hidden.bs.modal',function () { $(showModal).modal('show' ...

jquerytwitter-bootstrap-3bootstrap-modal

What is the best way to style the current element being targeted in React?

In my React application, I am trying to dynamically adjust the height of a textarea element based on its content. I want to achieve this by utilizing an 'onchange' listener to trigger a resize function. While I have successfully implemented the ...

javascriptcssreactjsajax

Change the position of a div by clicking on different content menu buttons to make it go up

I have implemented move up and move down buttons in my context menu for multiple div drops. However, I am facing an issue with moving the div down after clicking the move down button. Here is the code snippet that I am currently using: $(".propertyClass" ...

javascriptjqueryhtml

Use JavaScript to add a div element to the page ten times every time the button is clicked

Here is the code I have written: $(document).ready(function () { $('<button class="btn more">View More</button>') .appendTo(".listing-item-container") .click(function() { $(this).closest(". ...

javascripthtmljquerycss

Revealing a concealed element by sliding it upwards on a single page, then repeating the

Can someone assist me in achieving a specific effect on my website? I have a top banner section with a button at the bottom. When the button is clicked, a form should slide up into view. The form will initially be hidden. I also need the same effect at the ...

jqueryhtmlcsstwitter-bootstrap