How to align others elements with 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">
<span class="glyphicon glyphicon-open"></span>
<span class="glyphicon glyphicon-print"></span>
<span class="glyphicon glyphicon-edit"></span>
</div>
</div>
This how looks like, I want to text and icon would be inline.
EDIT:
Now text are inline with buttons but icon aren't.
<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>
Please try this:
.glyphicon {
position: relative;
top: -1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
line-height: 1;
vertical-align: middle;
}
Try this.Adding a span to your label solves most of the problem by aligning label and glyphicon. I guess this is what you wanted.
<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">
<span class="glyphicon glyphicon-open"></span>
<span class="glyphicon glyphicon-print"></span>
<span class="glyphicon glyphicon-edit"></span>
</div>
</div>
I have also created a jsfiddle.
Related
There are three content blocks and I'd like to enable/disable them with the Bootstrap's data-* "tools". The control elements should be checkboxes. When a content block is displayed, its checkbox should be checked.
summary
The problem is, that the checkbox inside links are not working as expected (starting to change the state only after the second click), after adding the Bootstrap behavior to the wrapping a tags.
The code is here.
long version
So first of all I created the content blocks and the controls without functionality (and gave them some styles):
<div class="col-xs-12" id="select-panel">
<div class="col-lg-12" id="filter-bar">
<div>
<a href="#containerFoo">
<label class="btn btn-primary" id="filterFoo">
<input type="checkbox" checked autocomplete="off">
<span class="text-label">foo</span>
<span class="glyphicon glyphicon-question-sign"></span>
</label>
</a>
<a href="#containerBar">
<label class="btn btn-primary" id="filterBar">
<input type="checkbox" checked autocomplete="off">
<span class="text-label">bar</span>
<span class="glyphicon glyphicon-ok-sign"></span>
</label>
</a>
<a href="#containerBuz">
<label class="btn btn-primary" id="filterBuz">
<input type="checkbox" checked autocomplete="off">
<span class="text-label">buz</span>
<span class="glyphicon glyphicon-remove-sign"></span>
</label>
</a>
</div>
</div>
</div>
<div> </div>
<div class="panel panel-default in" id="containerFoo">foo</div>
<div class="panel panel-default in" id="containerBar">bar</div>
<div class="panel panel-default in" id="containerBuz">buz</div>
The checkboxes are behaving as expected. Now the actual functionality needs to be added. The the A tags were extended as follows:
...
<a href="#containerFoo" data-toggle="collapse" aria-expanded="true" aria-controls="containerFoo">
...
</a>
<a href="#containerBar" data-toggle="collapse" aria-expanded="true" aria-controls="containerBar">
...
</a>
<a href="#containerBuz" data-toggle="collapse" aria-expanded="true" aria-controls="containerBuz">
...
</a>
...
Now the toggling is working. But the checkboxes are always checked. Well, after it I also extended the DIV wrapper around the control checkboxes:
<div class="btn-group" data-toggle="buttons">
Now the checkboxes are behaving ever stranger. On the first click the checkbox remains on (checked). An from the second click on the same checkbox the behavior becomes normal: the state gets changed on every click.
Is it a bug or am I doing something wrong?
How to get checkboxes inside links working correctly, when Bootstrap toggling is used?
I would keep the link and drop the form elements.
the checkbox can be drawn from a pseudo holding a checkmark or not.
here is the basic idea : https://jsfiddle.net/jsL3dx1w/7/
#filter-bar {
margin: 0;
padding: 0;
white-space: nowrap;
text-align: right;
}
#filter-bar * {
box-sizing: border-box;
}
#filter-bar a,
#filter-bar a:hover {
text-decoration: none;
}
a[data-toggle]:before {
display:inline-block;
content:'\2713';
border:solid 1px white;
box-shadow:inset 0 0 2px black, 0 0 1px black;
line-height:0.6em;
color:darkblue;
width:0.8em;height:0.8em;
}
a[data-toggle].collapsed:before {content:''}
#filter-bar {
outline: none;
border: 0;
color: #ffffff;
}
#filter-bar span{
margin: 5px 5px 0 5px;
outline: 0;
}
#filter-bar .btn:active,
#filter-bar .btn.active {
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
#containerFoo,
#filter-bar #filterFoo {
background: #f5a623;
}
#containerBar,
#filter-bar #filterBar {
background: #50c14e;
}
#containerBuz,
#filter-bar #filterBuz {
background: #d21f31;
}
.clear {
float: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<link href="https://cdn.rawgit.com/twbs/bootstrap/v3.3.7/dist/css/bootstrap.css" rel="stylesheet"/>
<div class="col-xs-12" id="select-panel">
<div class="col-lg-12" id="filter-bar">
<div class="btn-group" data-toggle="buttons">
<a href="#containerFoo" data-toggle="collapse" aria-expanded="true" aria-controls="containerFoo"class="btn btn-primary" id="filterFoo">
<span class="text-label">foo</span>
<span class="glyphicon glyphicon-question-sign"></span>
</a>
<a href="#containerBar" data-toggle="collapse" aria-expanded="true" aria-controls="containerBar" class="btn btn-primary" id="filterBar">
<span class="text-label">bar</span>
<span class="glyphicon glyphicon-ok-sign"></span>
</a>
<a href="#containerBuz" data-toggle="collapse" aria-expanded="true" aria-controls="containerBuz" class="btn btn-primary" id="filterBuz">
<span class="text-label">buz</span>
<span class="glyphicon glyphicon-remove-sign"></span>
</a>
</div>
</div>
</div>
<div> </div>
<div class="panel panel-default in" id="containerFoo">
foo
</div>
<div class="panel panel-default in" id="containerBar">
bar
</div>
<div class="panel panel-default in" id="containerBuz">
buz
</div>
automatix wrote
I took your solution and edited it a bit. The principle is still the same, but implemented with glyphicons: http://jsfiddle.net/automatix/jsL3dx1w/41 .
I have a comment icon that I want to display the number of comments and the word "Comments" next to it.
But the word "Comments" should be displayed under the number and not next to it.
Similar to this
So far the text is being displayed next to each other.
DEMO https://jsfiddle.net/halnex/d5sft5pt/9/
HTML
<div class="post-meta-alt">
<div class="social-share-top">
<span class="social-share-top-text">Share</span>
<a class="btn btn-social-icon btn-facebook">
<span class="fa fa-facebook"></span>
</a>
<a class="btn btn-social-icon btn-twitter">
<span class="fa fa-twitter"></span>
</a>
<a class="btn btn-social-icon btn-google">
<span class="fa fa-google"></span>
</a>
<a class="btn btn-social-icon btn-pinterest">
<span class="fa fa-pinterest"></span>
</a>
</div>
<div class="comments-top">
<a class="btn btn-social-icon btn-pinterest">
<span class="fa fa-comment"></span>
</a>
<p>78</p>
<p>Comments</p>
</div>
<div class="author-top">
author name
</div>
</div>
CSS
.post-meta-alt {
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
padding: 20px 0;
margin-top: 20px;
margin-bottom: 20px;
display: flex;
}
.post-meta-alt span.social-share-top-text {
text-transform: uppercase;
margin-right: 10px;
}
.post-meta-alt .comments-top,
.post-meta-alt .author-top {
display: inline-flex;
margin-left: 20px;
}
PS: Is this the correct way of doing it with Bootstrap? Using Flexbox or is there a better conventional way of achieving this?
You need to wrap the paragraphs in a div:
<div class="coment">
<p>78</p>
<p>Comments</p>
</div>
And add style to organize them
.coment p {
margin: 3px;
line-height: 1;
}
See jsfiddle
I have two glyphicons that I want to be right next to each other, but they have some space in between them, and I can't seem to get rid of it.
Here is how it looks:
Here is my code:
<div class="form-group" id="authForm">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
<label id="authLabel" for="trash" style="visibility: hidden;">Trash</label>
</div> <!-- end form-group -->
<div class="form-group" id="authForm">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
<label id="authLabel" for="trash" style="visibility: hidden;">Trash</label>
</div> <!-- end form-group -->
css:
.glyphicon {
font-size: 25px;
vertical-align: middle;
}
#authForm {
display:inline-block;
width:150px;
}
Decrease or remove the width from #authForm.
.glyphicon {
font-size: 25px;
vertical-align: middle;
}
#authForm {
display:inline-block;
width:30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group" id="authForm">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
<label id="authLabel" for="trash" style="visibility: hidden;">Trash</label>
</div> <!-- end form-group -->
<div class="form-group" id="authForm">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
<label id="authLabel" for="trash" style="visibility: hidden;">Trash</label>
</div> <!-- end form-group -->
Simply Use span, form-group is required for html form elements.
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
I am trying to align some font element vertically in a list.
I tried a bunch of thing such as playing with the vertical-align property and setting the same font-size / line-height.
I saw an interesting answer here however it seems that the base line of the label is vertically align with the icon and not the whole text itself.
ul {
list-style : none
}
.list-item__content {
padding: 10px;
border: 1px solid black;
}
.icon {
font-size: 14px;
line-height: 14px;
vertical-align: middle;
}
.label {
//vertical-align: middle;
font-size: 14px;
line-height: 14px;
}
<link href="https://file.myfontastic.com/tYAxi8yq9HQugtnVmUJTNm/icons.css" rel="stylesheet">
<ul class="list">
<li class="list-item">
<div class="list-item__content">
<span class="icon icon-bell"></span>
<span class="label">
aaaaaa
</span>
</div>
</li>
<li class="list-item">
<div class="list-item__content">
<span class="icon icon-bookmark"></span>
<span class="label">
bbbbbb
</span>
</div>
</li>
<li class="list-item">
<div class="list-item__content">
<span class="icon icon-briefcase"></span>
<span class="label">
cccccc
</span>
</div>
</li>
</ul>
Here is my clean playground, it is kind of tough because I don't want to use flexbox for compatibility issue, and I can't afford to play with the padding/margin/line-height for each element because I need a generic solution.
Looking forward to any tips or tricks you have!
Try setting the properties directly on the pseudo :before element (which the icon uses).
.icon:before, .label {
vertical-align: middle;
font-size: 14px;
line-height: 1;
}
Updated jsfiddle
ul {
list-style : none
}
.list-item__content {
padding: 10px;
border: 1px solid black;
}
.icon:before, .label {
vertical-align: middle;
font-size: 14px;
line-height: 1;
}
<link href="https://file.myfontastic.com/tYAxi8yq9HQugtnVmUJTNm/icons.css" rel="stylesheet">
<ul class="list">
<li class="list-item">
<div class="list-item__content">
<span class="icon icon-bell"></span>
<span class="label">
aaaaaa
</span>
</div>
</li>
<li class="list-item">
<div class="list-item__content">
<span class="icon icon-bookmark"></span>
<span class="label">
bbbbbb
</span>
</div>
</li>
<li class="list-item">
<div class="list-item__content">
<span class="icon icon-briefcase"></span>
<span class="label">
cccccc
</span>
</div>
</li>
</ul>
I have tried a lot things but not able to get desired format.
HTML:
<div class="usertype">
<div class="type1">
<span class="type-heading">type1 is here</span>
<span class="type-description">10 types have joined</span>
<span class="type-description">35 type will.</span>
</div>
<div class="type2">
<span class="type-heading">type2 is here</span>
<span class="type-description">10 types are there</span>
<span class="type-description">35 type will.</span>
</div>
<div class="type1">
<span class="type-heading">type23 is good</span>
<span class="type-description">50 types are there</span>
<span class="type-description">50 types are there</span>
<span class="type-description">for 2 months</span>
</div>
<div class="type2">
<span class="type-heading">Type4 at last</span>
<span class="type-description">50 types are there</span>
<span class="type-description">makes their first $20</span>
<span class="type-description">50 types are there</span>
<span class="type-description">35 type will.</span>
</div>
</div>
CSS:
div.usertype {
margin-top: 1em;
}
div.type1 {
float: left;
margin-left: 2em;
}
span.type-heading {
font-size: 14px;
color: #f7f7f7;
}
span.type-description {
font-size: 14px;
color:#959595;
display: block;
}
Output:
What I want:
Decrease the vertical distance between spans with class type-description. I tried using line-height and padding-bottom but could not move it. May be some parent div has display:block.
All type description aligned to left which are now center. If I use it float: left, it ruins the format completely.
Please help.
<div class="usertype">
<div class="type1">
<span class="type-heading">type1 is here</span>
<span class="type-description">10 types have joined</span>
<span class="type-description">35 type will.</span>
</div>
<div class="type2">
<span class="type-heading">type2 is here</span>
<span class="type-description">10 types are there</span>
<span class="type-description">35 type will.</span>
</div>
<div class="type1">
<span class="type-heading">type23 is good</span>
<span class="type-description">50 types are there</span>
<span class="type-description">50 types are there</span>
<span class="type-description">for 2 months</span>
</div>
<div class="type2">
<span class="type-heading">Type4 at last</span>
<span class="type-description">50 types are there</span>
<span class="type-description">makes their first $20</span>
<span class="type-description">50 types are there</span>
<span class="type-description">35 type will.</span>
</div>
</div>
<style>
div.usertype {
margin-top: 1em;
}
div.type1 {
float: left;
margin-left: 2em;
}
div.type2 {
float: left;
margin-left: 2em;
}
span.type-heading {
font-size: 14px;
color: #f7f7f7;
}
span.type-description {
font-size: 14px;
color:#959595;
display: block;
line-height:15px;
}
</style>