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;
}

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

Switching the vertical alignment of grid items in Material UI when the page is collapsed

When the page is collapsed, the Left grid item element moves to the top of the page and the Right grid element is positioned below it. I would like to reverse this behavior so that the Right element appears on top and the Left element below when the page ...

Make sure to keep the <div> element nested within the image

I'm working on creating a photo album that displays images in full screen and allows users to navigate using arrows. Check out my progress here: https://jsfiddle.net/q49wzey6/ Here's the HTML code I'm using: <div class="main"> &l ...

Adjusting Size of Picture and Text on Card

I am currently testing out different effects using the materializecss framework. My goal is to adjust the size of the image and content on a card when the user hovers over it, but I'm having trouble figuring it out. .card:hover .card-image { he ...

"Can anyone tell me why my index.html file isn't recognizing the style.css file located in my css directory

In the directory structure below, I have the following files: mywebsite/ ├── css/ │ ├── style.css │ ├── index.html This is my HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

Steps to create a "reset fields" option for specific input fields

Is there a way to create a link that clears the input fields in a specific column? I have managed to style a button to look like a link: <input type="reset" value="clear fields" style=" background:transparent; border: none; color:blue; cursor:pointer"& ...

How can I align the content within two div elements?

I'm facing a bit of a challenge that I can't seem to figure out. Within a div, I have one photo and inside another div, there is also a photo. I was able to resize both images from the parent and child divs successfully. <div style="width:100 ...

Adding a Close Button to a MaterializeCSS Card or Card-Panel

Hey everyone! I'm looking for guidance on how to add a close button (x) to a card or card-panel in MaterializeCSS. While Bootstrap offers an Alert component, unfortunately MaterializeCSS does not have one readily available. Does anyone know of a wor ...

How can I use XPATH and Python Selenium to select the text node that is outside of an <a> element?

Check out the following link: Within this section of code: //*[@id="main-contents"]/div[1]/table[1]/tbody/tr/td, there is a piece of text Mottled Boar slain (10) //*[@id="main-contents"]/div[1]/table[1]/tbody/tr/td/a This part contains only: Mo ...

Learn how to incorporate a newly created page URL into a customized version of django-oscar

Just starting out with django-oscar and trying to set up a new view on the page. I've successfully created two pages using django-oscar dashboard, https://ibb.co/cM9r0v and added new buttons in the templates: Lib/site-packages/oscar/templates/osca ...

Is Safari causing issues with the CSS slider animation?

Currently, I am working on implementing a CSS-only slider (no jQuery) in WordPress using the code from this source: http://codepen.io/dudleystorey/pen/kFoGw An issue I have encountered is that the slider transitions are not functioning correctly in Safari ...

JavaScript/DOM - What sets apart a "CSS Selector" from an attribute?

When it comes to excluding declarative event handlers: <a href='#' onclick=<handler> ... /> Is there a significant difference between an Attribute and a CSS Selector? For example, if I define my own attribute: <a href='#&a ...

Creating a canvas that adjusts proportionally to different screen sizes

Currently, I am developing a pong game using Angular for the frontend, and the game is displayed inside an HTML canvas. Check out the HTML code below: <div style="height: 70%; width: 70%;" align="center"> <canvas id=&q ...

The 'Required' attribute in HTML is malfunctioning

The 'required' attribute is not functioning properly when I try to submit the form. I've searched online for a solution, but none of them have resolved my problem. Take a look at the code snippet below - I've used the required attribute ...

Allowing CSS to break long words but not spaces for better readability

Imagine you have the following paragraph: thisisaverylongwordthatneverbreaks Applying word-wrap:break-word; results in: thisisaverylongwordthat neverbreaks This works well, but what if I try: this is avery long word that has spaces The output becom ...

What are the alternative ways to deploy a React app on Node.js without relying on Express?

Is there a way to achieve serving html files without using Express in Nodejs? I have experience with serving html files through http/https in a typical website without a frontend framework, but when attempting to do the same with index.html from a React ap ...

The ion-item is refusing to be centered on the page

I'm having trouble centering an ion-item and it seems slightly off-center. The standard methods like text-align: center and adjusting padding in ion-content don't seem to be working for me. Can someone please assist? https://i.stack.imgur.com/QZ ...

Iterate over JSON dates in JavaScript

Trying to utilize JavaScript in looping through a JSON file containing time periods (start date/time and end date/time) to determine if the current date/time falls within any of these periods. The provided code doesn't seem to be working as expected. ...

The method to extract data from a <td> element using BeautifulSoup

There is a page I'm working with that contains tables in its source code: <td class="ng-binding">9:20 AM</td>, <td class="ng-binding"><span class="ng-binding" ng-bind-html="objFlight.flight.stat ...

Making the browser refresh the CSS automatically once it has been modified

When updating a CSS file on the server, it's common for many client browsers to continue loading pages using the old cached CSS file for an extended period. After exploring various posts and piecing together different ideas, I have devised what appea ...

Displaying PHP content using JavaScript classes

I have a popup feature implemented in JavaScript and all the necessary scripts added to my HTML page. I am attempting to load a PHP page in the popup when the submit button of my form is clicked. The popup is functioning correctly for buttons like the one ...