This question already has answers here:
Center a column using Twitter Bootstrap 3
(34 answers)
Closed 6 years ago.
I have the following code:
<div class="row">
<div class="col-xs-12" id="buttonList">
<ul class="list-inline">
<li><button id="homeBtn" type="button" class="smallMarginB headerButton active btn btn-sm btn-primary">Home</button></li>
<li><button id="aboutBtn" type="button" class="smallMarginB headerButton btn btn-sm btn-primary">About</button></li>
<li><button id="servicesBtn" type="button" class="smallMarginB headerButton btn btn-sm btn-primary">Services</button></li>
<li><button id="transBtn" type="button" class="smallMarginB headerButton btn btn-sm btn-primary">Transformations</button></li>
<li><button id="testBtn" type="button" class="smallMarginB headerButton btn btn-sm btn-primary">Testimonials</button></li>
<li><button id="contactBtn" type="button" class="smallMarginB headerButton btn btn-sm btn-primary">Contact</button></li>
<li><button id="faqBtn" type="button" class="smallMarginB headerButton btn btn-sm btn-primary">FAQ</button></li>
</ul>
</div>
</div>
It simply shows buttons in a single column. I want it to be centered no matter the users resolution. I have tried using offesets but for odd resolutions it doesn't work (ex. resolution is 1366px). I have also tried adding col-centered and margin: auto with no success.
Try adding class="text-center" to div col element:
<div class="col-xs-12 text-center" id="buttonList">
You can try:
margin-left:auto; margin-right:auto for horizontal alignment;
margin-top:auto; margin-bottom:auto, for vertical alignment
or
margin:auto for both.
Related
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 basically have a button group with one button that is sometimes disabled ("Corpus delicti"). In the case it is disabled I want to show the user an explanation via a popover.
Since disabled elements require wrapper elements I wrapped a div around the button - what messed the styling up.
So I followed Bootstrap's hint "to specify the option container: 'body'" but styling is still messed up.
This is the markup, find it also in this fiddle:
https://jsfiddle.net/7ben7zmg/
<div class="btn-group" role="group">
<button onclick="console.log('huh')" type="button" class="btn btn-default">Log-Datei</button>
<div class="btn-group" role="group">
<div data-container="body" data-toggle="popover" data-placement="right" data-content="Lorem ipsum..." data-trigger="hover" data-html="true">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled=""></button>
</div>
Corpus delicti <span class="caret"></span>
<ul class="dropdown-menu">
<li>deutsch</li>
<li>englisch</li>
</ul>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Infoseite <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>deutsch</li>
<li>englisch</li>
</ul>
</div>
<button type="button" class="btn btn-default">TCP-Dump</button><button type="button" class="btn btn-default">Diesen Kunden deaktivieren</button>
</div>
Have no clue what I can do. Please help.
Apply data-toggle:popover in the btn-group instead of wrapping in other div..
Wrapping to another div will disturb your layout..
Updated Fiddle
I am trying to align a button and li in a same line as the button.
Here's the fiddle
<button type="submit" class="btn btn-gray btn-sm">Log In</button>
<ul>
<li style="list-style-type:none;">
<a class="btn btn-gray btn-sm" href="/password/recover">Forgot Password?
</a>
</li>
</ul>
You can do this two ways, display: inline-block; or float: left; in this case I did the display property. Notice I also added two mockup classes for clarity, you can change them to whatever
here is the fiddle
.btn__align {
display: inline-block;
}
.ul__element {
display: inline-block;
}
add class pull-left to button
<button type="submit" class="btn btn-gray btn-sm pull-left">Log In</button>
<ul>
<li style="list-style-type:none;"><a class="btn btn-gray btn-sm" href="/password/recover">Forgot Password?</a></li>
you can do it through div or tables
https://jsfiddle.net/j538zkwh/5/
<table >
<td>
<td>
<button type="submit" class="btn btn-gray btn-sm">Log In</button> <a class="btn btn-gray btn-sm" href="/password/recover">Forgot Password? </a>
</td>
</tr>
</table>
try to add pull-left class at button will solve issue also find code posted below...
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<button type="submit" class="btn btn-gray btn-sm pull-left" >Log In</button>
<ul>
<li style="list-style-type:none;">
<a class="btn btn-gray btn-sm" href="/password/recover">Forgot Password?
</a>
</li>
</ul>
Simple method is Add this to your css Code
display:inline-block;
Thanks for taking the time.
I implemented css bootstrap and got a nice fixed menu on top of my one page scrolling website. Just to make sure users instinctively see the navigation, I copied the menu below the header as well. Works well on every browser I have but IE 10.
Here's the code:
<div class="text-center">
<button type="button" class="btn btn-default btn-info">
123123
</button>
<button type="button" class="btn btn-default btn-warning">
13132123
</button>
<button type="button" class="btn btn-default btn-danger">
12313123
</button>
<button type="button" class="btn btn-default btn-success">
ЗА 132123123
</button>
<button type="button" class="btn btn-default btn-info">
12312313
</button>
<button type="button" class="btn btn-default btn-warning">
123123123
</button>
</div>
The div's are named like this:
<div class="news-holder cf" id="news">
They are closed and everything. I am completely new to web design so I don't know what's happening. It's bizarre.
As stated by #recursive a link should not be in a button.
Further more if this is a menu you most certainly should not be using button and avoid inline styles.
also check that you have div's on page with the id of news, articles etc.
if you need further assistance please supply more of your code.
try this.
<nav>
<ul class="text-center">
<li class="btn btn-default btn-info">
123123
</li>
<li class="btn btn-default btn-warning">
13132123
</li>
<li class="btn btn-default btn-danger">
12313123
</li>
<li class="btn btn-default btn-success">
ЗА 132123123
</li>
<li class="btn btn-default btn-info">
12312313
</li>
<li class="btn btn-default btn-warning">
123123123
</li>
</ul>
</nav>
<a> elements are not allowed inside of <button> elements.
http://www.w3.org/TR/html5/forms.html#the-button-element
there must be no interactive content descendant.
That's likely to be related to the problem. Since anchors have been well supported for decades.
I'm trying to get a Bootstrap btn-group to work, with a few fixed elements and a btn in the middle that grows to fill out the entire thing.
JSFiddle of what I'm trying to do: http://jsfiddle.net/DTcHh/2988/
Basically the idea is I'm trying to get the 3 and 4 buttons to stick to the right, while the "Text here" element fills out the rest of the space. Menu sticks to the left.
I've tried putting btn-group-justified on the element I want to expand out but that makes it take up the entire width of the screen, whereas I want everything to be on one line.
HTML:
<div class="btn-group" role="group" aria-label="First group" style="width:100%; margin-right:-300px">
<div class="btn-group dropup" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Menu <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Edit Lead</li>
<li>Transfer Call</li>
</ul>
</div>
<div class="btn-group" role="group" aria-label="First group" style="width: 100%; margin-right:-320px">
<span class="btn btn-default" style="width:100%;">
Some text here
</span>
</div>
<button type="button" class="btn btn-default">3</button>
<button type="button" class="btn btn-default">4</button>
</div>
Any idea how I can achieve this?
Solved it.
Needed to set table-layout:auto on the parent group and add width:1% to the fixed size elements, width:100% to the expandable elements and add the class btn-group-justify to the parent group. Looks perfect now!
Fiddle: http://jsfiddle.net/DTcHh/2996/
try this
<div class="btn-group btn-group-justified" role="group" aria-label="First group" style="table-layout:auto">
<div class="btn-group dropup" role="group">
<a type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Menu
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>Edit Lead</li>
<li>Transfer Call</li>
</ul>
</div>
<span class="btn btn-default" style="width: 100%;">Hey there</span>
<a type="button" class="btn btn-default">3</a>
<a type="button" class="btn btn-default">4</a>
</div>