I would like to align left the text of the buttons on a Twitter Bootstrap Button Group using class text-left.
But, when I put the class in a or div tags (as the first class or the last class) the alignment doesn't change and is always center.
The left align works only if I put a style="text-align: left; on the a tag.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group-vertical btn-group-lg" role="group">
<a class="btn btn-default btn-lg" role="button" href="page1.html">Short Text</a>
<a class="btn btn-default btn-lg" role="button" href="page2.html">Long link text</a>
</div>
That's because bootstrap's CSS as by default text-align:center on .btn class, so by inserting the text-left class on the same element, won't affect due to having the same specificity.
Create a custom CSS for that.
.btn-group-lg .btn {
text-align: left
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group-vertical btn-group-lg" role="group">
<a class="btn btn-default btn-lg" role="button" href="page1.html">Short Text</a>
<a class="btn btn-default btn-lg" role="button" href="page2.html">Long link text</a>
</div>
Related
I put a dropdown button beside an H1 tag and I want the dropdown button moved up just a bit because they don't look aligned right now.
I'm using Bootstrap 5.1.3
<div class="ps-4 pt-4 pe-4" id="profile">
<div class="dropdown">
<h1 class="d-inline-block display-1">Cheese</h1>
<button class="d-inline-block ms-2 btn btn-outline-dark btn-sm dropdown-toggle" type="button" id="authorControlsDropdownButton" data-bs-toggle="dropdown" aria-exanded="false"></button>
</div>
</div>
You can use Bootstrap's flexbox class and attributes to align items
https://getbootstrap.com/docs/5.0/utilities/flex/
In this case, I just did center but you can use whatever attribute that gives you the positioning you're looking for.
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<div class="ps-4 pt-4 pe-4" id="profile">
<div class="d-flex flex-row align-items-center dropdown">
<h1 class="d-inline-block display-1">Cheese</h1>
<button class="d-inline-block ms-2 btn btn-outline-dark btn-sm dropdown-toggle" type="button" id="authorControlsDropdownButton" data-bs-toggle="dropdown" aria-exanded="false"></button>
</div>
</div>
I have a button group but the middle button is a link so it should b a tag (i can change its button and use js to navigate but I prefer not to )
here is the code
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="btn-group nospiner">
<button type="button" class="btn btn-warning yekan create-wallet"><i class="mdi mdi-arrow-down-bold"></i> down</button>
center
<button type="button" class="btn btn-warning yekan ">up <i class="mdi mdi-arrow-up-bold"></i> </button>
</div>
here is the result
as you can see the middle btn has a border and gradient, how can I change it so it would look like buttons? i've tried adding border:none to all .btn and button group it didn't work
Simply remove type=button from the a
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="btn-group nospiner" >
<button type="button" class="btn btn-warning yekan create-wallet"><i class="mdi mdi-arrow-down-bold"></i> down</button>
<a href="link.php" class="btn btn-warning yekan pjax" > center</a>
<button type="button" class="btn btn-warning yekan " >up <i class="mdi mdi-arrow-up-bold"></i> </button>
</div>
I'm trying to implement a system and I need buttons inside linked group list. The problem is when I click on the button it opens the link of the linked item.
The code bellow is what I have on my system.
edit:
I need the full item to be clickable; excluding the buttons (Not using link just on the text).
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<a class="list-group-item list-group-item-info" href="https://www.fumep.edu.br/eep/" target="_blank">
EEP
<span class="pull-right">
<div class="btn-group" role="group" aria-label="...">
<span class="btn btn-xs btn-warning" >
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</span>
<span class="btn btn-xs btn-danger" >
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</span>
</div>
</span>
</a>
You can use CSS like this..
.list-group-item>.pull-right{
cursor: default;
}
Add onclick="return false;" to the btn-group.
Demo
If you want the full item clickable except buttons, you can try this with jQuery
$('.btn-group .btn').click(function(
e.preventDefault();
});
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'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