I have added 3 glpyhs inside my h3 tag and have applied a style to it however every glyph I add they seem to be moving upwards so they are not in line with each other like this (check link for picture)
This is how I have added the glyphs within the panel.
<div class="col-md-4 column">
<div class="panel panel-default" draggable="true">
<div class="panel-heading panel-backcolour">
<h3 class="panel-title">Panel title<span class="glyphicon glyphicon-trash panel-icons" /><span class="glyphicon glyphicon-trash panel-icons" />
<span class="glyphicon glyphicon-trash panel-icons" /></h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
and this is the custom css that I am applying to the panel.
.panel-icons{
float: right;
cursor:pointer;
}
You missed to close your span tags.
Also I should point out, span is not a self closing tag, as you have tried to make use of it.
.panel-icons {
float: right;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-4 column">
<div class="panel panel-default" draggable="true">
<div class="panel-heading panel-backcolour">
<h3 class="panel-title">Panel title
<span class="glyphicon glyphicon-trash panel-icons"></span>
<span class="glyphicon glyphicon-trash panel-icons"></span>
<span class="glyphicon glyphicon-trash panel-icons"></span>
</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
Correct your markup to have the span properly close like so:
<span class="glyphicon glyphicon-trash panel-icons"></span>
<span class="glyphicon glyphicon-trash panel-icons"></span>
<span class="glyphicon glyphicon-trash panel-icons"></span>
As your code is now, it thinks that each glyphicon is within the previous glyphicon and you haven't properly closed your span tag.
See this codepen link for a working example.
Related
I'm working on a project using Bootstrap 4. I have a row that consists of three columns. My code looks like this:
<div class="row">
<div class="col-md-4 center-block">
<div>
<i class="glyphicon glyphicon-time center-text"></i><br />
<h3>On Time</h3>
<h4>Just for you</h4>
</div>
</div>
<div class="col-md-4 center-block">
<i class="glyphicon glyphicon-star center-text"></i><br />
<h3>Excellent Service</h3>
<h4>When you need it</h4>
</div>
<div class="col-md-4 center-block">
<i class="glyphicon glyphicon-heart center-text"></i><br />
<h3>We want to be your favorite</h3>
<h4>Why not?</h4>
</div>
</div>
I need to center the content within each column. However, all of the content is left-aligned and I do not know why. As the code shows, I'm using the center-block and center-text classes. Yet, they do not seem to be working. What am I doing wrong?
You need to use text-center instead of center-block.
There is no default Bootstrap class such as center-text and the class needs to be used for the parent container, not along with any child element.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-4 text-center">
<div>
<i class="glyphicon glyphicon-time"></i><br />
<h3>On Time</h3>
<h4>Just for you</h4>
</div>
</div>
<div class="col-md-4 text-center">
<i class="glyphicon glyphicon-star"></i><br />
<h3>Excellent Service</h3>
<h4>When you need it</h4>
</div>
<div class="col-md-4 text-center">
<i class="glyphicon glyphicon-heart"></i><br />
<h3>We want to be your favorite</h3>
<h4>Why not?</h4>
</div>
</div>
I have a simple button on which i am trying to add a glyphicon in order to get a fashion one.
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-8">
<div class="container-fluid">
<div class="form-group">
<button class="btn btn-primary form-control">
Test
<span class="pull-right">
<span class="glyphicon glyphicon-edit">
</span>
</span>
</button>
</div>
</div>
</div>
</div>
While it's working perfectly on chrome and safari, the glyphicon is badly positionned on mozilla. Is there a well known-issue or am I doing something wrong with the bootstrap css ?
Here is the plunker if you want to see exactly what I am trying to get ( on chrome ) , and what is wrong (on mozilla).
Please try below code you have to add one inline property white-space: inherit ! important; to button
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-8">
<div class="container-fluid">
<div class="form-group">
<button class="btn btn-primary form-control" style="white-space: inherit ! important;">
Test
<span class="pull-right">
<span class="glyphicon glyphicon-edit">
</span>
</span>
</button>
</div>
</div>
</div>
</div>
I would like to know if its possible to move that bar a bit under, the bar is wrapped with a <p> tag.
<div class="span9 well">
<div class="row-fluid">
<div class="row-fluid">
<div class="span2">
<img src="dummy_image.jpg" class="img-polaroid">
</div>
<div class="span7">
<h2>Title</h2>
<p>Texttttttttttttttttt.</p>
<p >
<span class="label label-info">Genre</span>
<span class="label label-warning">
<i class="icon-star"></i>
...<!-- stars -->
</span>
<span class="label label-success">Yes</span> / <span class="label label-important">No</span>
</p>
</div>
</div>
</div>
screen shot of the actual block i wanna change:
You can always name your <p> tag like so:
<p class="bar">
<span class="label label-info">Genre</span>
<span class="label label-warning">
<i class="icon-star"></i>
...<!-- stars -->
</span>
<span class="label label-success">Yes</span> / <span class="label label-important">No</span>
</p>
then use .bar {margin-top: 20px;} in your css code, it's not bad behaviour
Use position:absolute
.row-fluid{position:relative; width:450px; background:red; overflow:auto}
.span2{display:inline; float:left}
.span7{display:inline; }
.row-fluid > p{position:absolute; bottom:0; left:170px}
DEMO
I've managed to place a button group at the far side of a header (H1/H2/H3). However, I don't know how to make the button float vertically in the middle. It just stays at the top. I tried using margin-top but since it's a fixed value it won't be dynamically placed in the middle.
Here's the screenshot:
Here's the code:
<div class="container">
<section>
<div class="page-header">
<h1 class="pull-left">
The header
</h1>
<div class="pull-right">
<div class="btn-group">
<button class="btn btn-primary">
Actions
</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li>
Action
</li>
<li>
Another Action
</li>
</ul>
</div>
</div>
<div class="clearfix"></div>
</div>
Contents
</section>
</div>
jsFiddle: http://jsfiddle.net/aurorius/PKrUC/
This how to get a button lined up with the header in Bootstrap 3.2, 3.3 without any additional CSS in case anyone is coming here from Google.
Option 1
http://jsfiddle.net/ypaL5nko/
<div class='page-header'>
<div class='btn-toolbar pull-right'>
<div class='btn-group'>
<button type='button' class='btn btn-primary'>Button Text</button>
</div>
</div>
<h2>Header Text</h2>
</div>
The button group is optional if you're only using a single button.
Option 2
http://jsfiddle.net/sLdnae3q/
<h1>
<span>Header Text</span>
<button class='btn btn-primary pull-right'>Button Text</button>
</h1>
<hr/>
Try this css code
.btn-group.my-class{
bottom: 15px;
position: relative;
top: 15px;
}
Dynamic header on H1/H2/H3 and may be H4
Demo: http://jsfiddle.net/PKrUC/2/
Using a float disables te display:inline-block; property, making it float to the top.
Just add the bootstrap class text-right to the container to keep the vertical align intact.
I have a button generated by backbone.js and jQuery.tmpl() and width of the button is variant. I want to put it in a span6 div. Code is shown below:
<div class="row">
<div class="span6">
<button class="btn primary large">
BLABLABLA
</button>
</div>
<div class="span10">
...
</div>
</div>
I don't know how to make the button centered in the div.
Im no CSS guru but this does the trick for me (centers the button within the span6):
<div class="row">
<div class="span6" style="text-align:center">
<button class="btn primary large">
BLABLABLA
</button>
</div>
</div>
More info on centering can be found here.
A bit late but you can use the pagination-centered class from bootstrap
<div class="span6 pagination-centered">
<button class="btn primary large">
BLABLABLA
</button>
</div>
What about <a> tags?
If you have an <a> tag button, then the other approaches won't work, as a.btn has a float: left attribute in the bootstrap source.
<div style="text-align: center;">
Button text
</div>
This can be undone 2 ways.
Solution 1
Add a custom less file and import bootstrap.
bootstrap-custom.less
#import "bootstrap.less";
a.btn {
float: none !important;
}
And then compile your custom less file, or simply specify it in another CSS file:
styles.css
a.btn {
float: none !important;
}
Solution 2
Simply do it inline using style="float: none;":
<div style="text-align: center;">
Button text
</div>
Other Solution
<div class="row-fluid pagination-centered">
Button
</div>
<div class="clearfix"></div>
I had this same issue, I wrapped the in
<a class="btn btn-primary" href="#" role="button">Text Here</a>
Became
<div class="text-center">
<a class="btn btn-primary" href="#" role="button">Text Here</a>
</div>