Achieving vertical center alignment for the label and btn-group in Bootstrap

Is it possible to align other elements with the Bootstrap btn-group?

<div class="btn-toolbar text-center">
    <div class="pull-left">
        <span class="glyphicon glyphicon-envelope " style="font-size:1.5em;"></span>
        <label>Title</label>
    </div>
    <div class="btn-group btn-group-sm pull-right">
        <a href="#" title="Open" class="btn btn-default clear-filter"><span class="glyphicon glyphicon-open"></span></a>
        <a href="#" title="Print" class="btn btn-default clear-filter"><span class="glyphicon glyphicon-print"></span></a>
        <a href="#" title="Edit" class="btn btn-default clear-filter"><span class="glyphicon glyphicon-edit"></span></a>
    </div>
</div>

This is how it currently looks, I am looking for a way to make the text and icon appear inline.

https://i.stack.imgur.com/QIM88.jpg

UPDATE:

The text is now inline with the buttons but the icons are not aligned properly.

<div class="pull-left">
    <span class="glyphicon glyphicon-envelope " style="line-height: 30px; font-size: 1.5em; vertical-align: middle;"></span>
    <label style="line-height:30px;">Title</label>
</div>

https://i.stack.imgur.com/jI1qQ.png

htmlcsstwitter-bootstrap

Answer №1

Here's a suggestion for you to consider:

.icon {
  position: relative;
  top: -1px;
  display: inline-block;
  font-family: 'Custom Icons';
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  vertical-align: middle;
}

Answer №2

For a quick fix, try adding a span to your label which should align it better with the glyphicon. It seems like this solution might be what you're looking for.

<div class="btn-toolbar text-center">
    <div class="pull-left">
        <span class="glyphicon glyphicon-envelope " style="line-height: 30px; font-size: 1.5em; vertical-align: middle;"></span>
        <span style="line-height: 30px; font-size: 1.5em; vertical-align: middle;"><label>Title</label></span>
    </div>
    <div class="btn-group btn-group-sm pull-right">
        <a href="#" title="Open" class="btn btn-default clear-filter"><span class="glyphicon glyphicon-open"></span></a>
        <a href="#" title="Print" class="btn btn-default clear-filter"><span class="glyphicon glyphicon-print"></span></a>
        <a href="#" title="Edit" class="btn btn-default clear-filter"><span class="glyphicon glyphicon-edit"></span></a>
    </div>
</div>

You can also view the jsfiddle here.

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

"Upon clicking the submit button, no action is triggered and no _POST values are being received

When a user clicks on my submit button, nothing seems to happen. The HTML code for the button is as follows: <td colspan="3"> <div align="center"> <input name="Decline" id="Decline" value="Decline" type="submit"> ...

phphtmlpostinputsubmit

Submitting quiz responses through a PHP based form

I am currently facing an issue with integrating forms and a quiz on my website. Individually, both work fine but when combined, they do not function as expected. Specifically, the quiz itself operates correctly, however, it fails to send the results via P ...

phphtmlarraysforms

Arranging pictures in both vertical and horizontal alignment (CSS)

I've been attempting various methods to solve this issue, but none have proven successful. My goal is quite simple: align images both horizontally and vertically in a manner that fills empty spaces with photos. Similar to the layout here: The challe ...

htmlcss

React component state change in reverse

As I work on a simple login form component, I encountered an issue where clicking on the form should make it disappear and only display my JSON data. However, due to my limited experience with React state management, I seem to be achieving the opposite eff ...

javascriptcssreactjsdom

Guide to creating a custom wrapper for a Material UI component with React JS

I am utilizing the Material UI next library for my project and currently working with the List component. Due to the beta version of the library, some parameter names are subject to change. To prevent any future issues, I have decided to create a wrapper a ...

javascriptcssreactjsmaterial-ui

Displaying every nth image in a new row of a CSS grid

I have a react component and I want to arrange 3 photos inline in a row with their names below each photo, and then continue in new rows for the next set of 3 elements and so on... I attempted to use :nth-child(3n+1) but encountered some issues... const P ...

cssreactjscss-selectors

Spacing between Div tags

Struggling with a tricky HTML cross-browser problem. The site was built by multiple people, making it quite messy, but needs to go live as soon as possible! Each of the 4 page layouts on the site are different and handled by separate classes. However, whe ...

csscross-browserspaces

Switching back and forth between two CSS animations using Jquery

I am working on creating a unique pendulum system using 3 balls. After successfully creating the balls and animating them, I am faced with a challenge in making the animation continuous. Here is my code: .circle { width:30px; height:30px; backgrou ...

jqueryhtmlcss

Barba.js Revolutionizes Page Reloading for Initial Links

On my Wordpress site, I am using Barba js v.2 for page transitions. However, I have encountered an issue where I need to click on a link twice in order to successfully change the page and make the transition work. Interestingly, the first time I click on t ...

javascriptphphtmlwordpressbarbajs

Javascript - Conceal a Dynamic Div Depending on its Text

I have a unique table that generates dynamic Divs with ID's that count as they are created in the following format: <div id="dgpCheckDiv10_0"> <input Delete </div> <div id="dgpCheckDiv10_1"> text2 </div> Some of t ...

javascriptjqueryhtml

Is there a way to make divs expand on top of existing content when hovering over them, in order to avoid needing to scroll through overflow content? I am currently working with

I am working with 9 boxes contained within divs, each box includes data that exceeds the size of the box itself (represented by Some Text repeated for demonstration purposes). I am seeking a solution where hovering over any box will cause it to enlarge and ...

javascriptcssangularanimation

React and Material UI: Ensuring Proper Whitespace Handling in Strings

Exploring the use of Typography component from Material UI (https://material-ui.com/api/typography/) The main objective is to maintain the new lines and spaces in a saved string. For instance, if the string contains leading spaces and new lines, it shoul ...

javascripthtmlreactjsmaterial-ui

Ways to modify color while user moves the screen

I'm working with some jQuery code that changes the colors of elements as the user scrolls down, and I want it to revert back to the original color when scrolling back up. However, the script is not behaving as expected... Here is the original working ...

javascriptjqueryhtmlcss

Unable to apply the flex-grow property to a column flex box that has a specified minimum height

I am currently working on designing a website layout that harnesses the power of flexbox to fill the entire page with content, even when the content does not fully occupy the length of the page. My approach involves creating a large flexbox container with ...

htmlcssreactjsflexbox

sticky bootstrap datepicker anchored to the top of the screen

Currently, I am working on a form that includes a date picker using the bootstrap datepicker In this setup, I have hidden the main bootstrap field and added three custom fields. When any of these fields are clicked, the calendar should open next to them. ...

javascripthtmljquerycss

The Web Browser is organizing CSS elements in an alphabetized sequence

map.css({ 'zoom': zoom, 'left': map.width()/(2*zoom) - (point[0]/100)*map.width(), 'top': map.height()/(2*zoom) - (point[1]/100)*map.height() Upon observation, it appears that Chrome adjusts the map zoom first be ...

javascriptjqueryhtmlcssinternet-explorer

Issues have been encountered with the AngularJS Modal functionality when trying to populate data within an ng

Attempting to utilize a bootstrap modal for updating data in a list, the initial modal being used is to add a new item to said list. Successfully created the modal, triggered the ajax call, and returned the data to the main controller via the promise belo ...

angularjstwitter-bootstrap

The process of retrieving keys and values from localStorage in html5

I have stored some important key-value pairs in local storage. Now I need to retrieve both the keys and values, and then display them by appending the values in a list item (li). Currently, my attempt at this looks like: for (var i = 0; i < localStorag ...

javascripthtml

Maximizing CSS opacity for optimal performance in image fading

I'm working on creating a smooth fade in-out effect for the images in my photo gallery by adjusting the CSS opacity value using JavaScript. However, I've noticed that this process is quite sluggish on certain computers, such as my relatively new ...

javascriptcsshtmlcanvas

Creating a vertical triangle pointing to the right as the border of a div element

Currently, I'm working on a mockup that includes the following elements. I am attempting to ensure that the triangular right end of the "Delay Your Payments" div matches the mockup exactly. To achieve this, I aim to use CSS without relying on sliced ...

css