I'm using Bootstrap 3 to make a button:
<a class="btn btn-primary btn-lg" href="#">
<span class="glyphicon glyphicon-shopping-cart" style="font-size: xx-large"></span>
Buy Now<br/>
<span class="small">Instant and secure</span><br/>
</a>
The glyph is, as I intend, large. But I want the two lines of text to both push to the left to make room for the glyph.
What I get currently is this:
What I'm aiming for is this:
How can I do this?
You could use pull-left in the icon, and change the btn to text-align:left:
CSS
.btn-lg {
text-align:left;
width:190px;
}
HTML
<a class="btn btn-primary btn-lg" href="#">
<span class="glyphicon glyphicon-shopping-cart pull-left" style="font-size:xx-large;margin:5px;"></span>
Buy Now<br>
<small>Instant and secure</small>
</a>
Demo: http://bootply.com/86858
Related
How to make links and buttons be aligned in list using bootstrap?
I need to make them aligned left with reasonable padding.
Can I do it without CSS and my own classes?
<div class="btn-group">
<button type="button" class="btn btn-default btn-icon dropdown-toggle" data-toggle="dropdown">
menu
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li>
<a class="btn btn-link text-left" href="">
Edit
</a>
</li>
<li class="divider"></li>
<li>
<form action="" method="POST" >
<button type="submit" class="btn btn-link">
Delete
</button>
</form>
</li>
</ul>
</div>
https://jsfiddle.net/63gn7has/
You can overwrite the below CSS class of bootstrap and try this
.dropdown-menu>li>a {
text-align: left!important;
padding: 10px!important;
}
Behold the following image of a .page-header I currently have:
As you can see, I'd like to have the page header in the center and buttons aligned to the left and right.
This works because both buttons have the same size. Now, if I increase the size of the left button, look what happens:
You see? The header isn't aligned to the center anymore, it's pushed to the right by the left button. Which is undesirable in my case. I would like to have the header centered, no matter what the size of the buttons are. If the buttons are too big, it would be even okay if they overlap the header.
Here is a code sample and a jsfiddle:
<div class="container">
<div class="page-header">
<a class="btn btn-primary pull-left" role="button" href="#">
<span class="glyphicon glyphicon-plus"></span>
</a>
<a class="btn btn-success pull-right" role="button" href="#">
<span class="glyphicon glyphicon-plus"></span>
</a>
<h3 class="text-center">Header</h3>
</div>
<div class="alert alert-danger" role="alert">No results</div>
</div>
You just need to use positions to make them consistent with the size.
.page-header .pull-left {position: absolute; left: 15px;}
.page-header .pull-right {position: absolute; right: 15px;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="page-header">
<a class="btn btn-primary pull-left" role="button" href="#">
<span class="glyphicon glyphicon-plus"></span>
</a>
<a class="btn btn-success pull-right" role="button" href="#">
<span class="glyphicon glyphicon-plus"></span>
</a>
<h3 class="text-center">Header</h3>
</div>
<div class="page-header">
<a class="btn btn-primary pull-left" role="button" href="#">
<span class="glyphicon glyphicon-plus"></span> text pushes to right
</a>
<a class="btn btn-success pull-right" role="button" href="#">
<span class="glyphicon glyphicon-plus"></span>
</a>
<h3 class="text-center">Header</h3>
</div>
<div class="alert alert-danger" role="alert">No results</div>
</div>
Preview
This is one way, but obviously, this has issues with sizing. When the width is very less, there might be overlaps.
I have 2 bootstrap ul's and one is beautified and the other one is not, my problem is why the first ul is not rendering correctly is is not beautified , what is wrong ? How you can see in fiddle example in second ul which is the same with first ul nut beautified te spaces are added correctly...
Same html but not beautified
<ul id="handlers-list" class="list-group">
<li id="GET___asdasd" class="list-group-item"><span>/asdasd</span><span class="label label-primary">GET</span><span class="label label-primary">html</span><span style="display:none;">asdasdasd</span><button id="hnd-show-ct" type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target=".bs-example-modal-sm"><span class="glyphicon glyphicon-open" aria-hidden="true"></span></button><button type="button" class="btn btn-info btn-sm"><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span></button><button type="button" class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span></button></li>
</ul>
Same HTML but beautified is render correctly
<ul id="handlers-list" class="list-group">
<li id="GET___asdasd" class="list-group-item">
<span>/asdasd</span>
<span class="label label-primary">GET</span>
<span class="label label-primary">html</span>
<span style="display:none;">asdasdasd</span>
<button id="hnd-show-ct" type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target=".bs-example-modal-sm">
<span class="glyphicon glyphicon-open" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-info btn-sm">
<span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-warning btn-sm">
<span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span></button></li>
</ul>
Here is a small js example:
White-spaces between inline elements are transformed into one space. The reasoning is that inline elements might be interspersed with regular inner text of the parent element. So give space or enter the span in new line to get expected result
Try like this:
<li id="GET___asdasd" class="list-group-item"><span>/asdasd</span> <span class="label label-primary">GET</span><span class="label label-primary">html</span> <span style="display:none;">asdasdasd</span>
<button id="hnd-show-ct" type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target=".bs-example-modal-sm"><span class="glyphicon glyphicon-open" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-info btn-sm"><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
</button>
</li>
could be due to your code structure. if you structure the top one like the bottom one then it should work
http://i.imgur.com/3v4M7Lw.png
heres a screen shot of what i changed
Continuous html markup like in the first example removes the space between elements.
The second example has spaces in the markup which leads to proper aligned buttons.
Demo JS Fiddle:
I can't implement the href into the buttons.
It will work if I put it this way :
<a href="/">
<button type="button" class="btn btn-default btn-custom">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
<br />
<span class="btntext glyphicon-class">PP bậc thang</span>
</button>
</a>
But this will result in this mess :
Is there any simple way I can fix this? Thanks alot!
Apply the btn class to the a instead.
<a href="/" class="btn btn-default" ...
Also take a look at the docs.
I updated your fiddle for the buttons to work properly:http://jsfiddle.net/ettmujvg/9/
<a href="#" class="btn btn-default btn-custom">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
<br />
<span class="btntext glyphicon-class">PP bậc thang</span>
</a>
I would like to make the globe glyphicon bigger so that it covers up a large portion of the page (it's a vector image). It's not in a button or anything; it's just alone. Is there a way to do this?
<div class = "jumbotron">
<span class="glyphicon glyphicon-globe"></span>
</div>
Increase the font-size of glyphicon to increase all icons size.
.glyphicon {
font-size: 50px;
}
To target only one icon,
.glyphicon.glyphicon-globe {
font-size: 75px;
}
Fontawesome has a perfect solution to this.
I implemented the same. just on your main .css file add this
.gi-2x{font-size: 2em;}
.gi-3x{font-size: 3em;}
.gi-4x{font-size: 4em;}
.gi-5x{font-size: 5em;}
In your example you just have to do this.
<div class = "jumbotron">
<span class="glyphicon glyphicon-globe gi-5x"></span>
</div>
If you are using bootstrap and font-awesome then it is easy, no need to write a single line of new code, just add fa-Nx, as big you want, See the demo
<span class="glyphicon glyphicon-globe"></span>
<span class="glyphicon glyphicon-globe fa-lg"></span>
<span class="glyphicon glyphicon-globe fa-2x"></span>
<span class="glyphicon glyphicon-globe fa-3x"></span>
<span class="glyphicon glyphicon-globe fa-4x"></span>
<span class="glyphicon glyphicon-globe fa-5x"></span>
Yes, and basically you can also use inline style:
<span style="font-size: 15px" class="glyphicon glyphicon-cog"></span>
try to use heading, no need extra css
<h1 class="glyphicon glyphicon-plus"></h1>
For ex ..
add class:
btn-lg - LARGE
btn-sm - SMALL
btn-xs - Very small
<button type=button class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button>
<button type=button class="btn btn-default">
<span class="glyphicon glyphicon-star" aria-hidden=true></span>Star
</button>
<button type=button class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button>
<button type=button class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button>
Ref link Bootstrap : Glyphicons Bootstrap
I've used bootstrap header classes ("h1", "h2", etc.) for this. This way you get all the style benefits without using the actual tags. Here is an example:
<div class="h3"><span class="glyphicon glyphicon-tags" aria-hidden="true"></span></div>