My html code looks like this (using Bootstrap):
<div class="row">
<div class="col-md-4 col-md-offset-1" style="width: 37.5%">
<span class="dualselect">
<select class="form-control input-default select-inline" style="width: 100%" multiple="multiple">
</select>
</span>
</div>
<div class="col-md-1" align="center">
<div class="dualselect">
<div class="ds_arrow">
<button class="btn btn-inverse">
<i class="fa fa-chevron-right"></i>
</button>
<br/>
<button class="btn btn-inverse">
<i class="fa fa-chevron-left"></i>
</button>
</div>
</div>
</div>
<div class="col-md-4" style="width: 37.5%">
<span class="dualselect">
<select class="form-control input-default select-inline" style="width: 100%" multiple="multiple">
</select>
</span>
</div>
</div>
This works perfectly fine in IE or Firefox. In Chrome the buttons with arrows are not perfectly aligned:
The problem seems to be with align="center". When removed, the buttons are aligned in all the browsers but I want them centered. How do I do that properly?
I'm a little surprised all browsers aren't showing the same result that Chrome does. The problem is the white space in your code. Remove it around the buttons code so it looks like this:
<button class="btn btn-inverse">
<i class="fa fa-chevron-right"></i>
</button><br/><button class="btn btn-inverse">
<i class="fa fa-chevron-left"></i>
</button>
bootply example
An alternative would be to put each <button> in it's own separate <div>, and then eliminate the <br/>, thereby allowing you to keep whitespace for code aesthetics.
You can also go other way:
Make your "row" class with attribute "position: relative", then in your "col-md-1" class set attribute "position:absolute, left: 50%, margin-left: -yourwidth in px" and you will get centered your "col-md-1".
But keep in mind that you will need also to edit your other "col-md-4"
Related
In this codepen what's animated is a div, https://codepen.io/kevinmcullen/pen/PVmwVz?editors=1100&fbclid=IwAR0IY6EsrDj-lMs_U11ys6npbqsKd1KB5guTkMG6xCAA0GEW9_jlTwMF0Yc
<div class="wrapper">
<div class="border"></div>
<div class="main-element"></div>
</div>
</body>
in my code it looks like this
Is there even a chance of making animated border like this on a button?
https://codepen.io/paulshepherd/pen/YzqyYZw
<ul>
<li>
<button class="programming active1">Programming
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container" style="display: block;" >
I've also tried to use this code but I have a problem with converting it to css.
In this example a tag is used as a button
https://codepen.io/ARS/pen/vEwEPP
<span>button</span>
Background:The website I am working on there are several different filters that people can use in order to show only the data they need; basic stuff. To make things look nice since I am not css inclined, I am using bootstrap to make things look clean.
Problem: I can't seem to get the buttons to line up with the right side of the fields. I can make them pull to the very edge of the field set, I can make push/pull them to the general area they should be in, but I can't get them to line up nicely and stay that way regardless of how you rearrange the size of the page window.
JSFiddle: https://jsfiddle.net/v3cugpx1/1/
<div class="form-group col-md-12">
<div class="input-group-btn">
<div class="pull-right">
<a class="btn btn-info" href="#" title="Clear"><i class="glyphicon glyphicon-arrow-left"></i> Clear</a>
<button class="btn btn-primary" title="Filter" type="submit"><i class="glyphicon glyphicon-search"></i> Filter</button>
</div>
</div>
</div>
Any help would be greatly appreciated.
Cheers!
It's important to match the nesting of columns because of the gutters in the grid, which the other answers remark upon. If you start with the other two answers, it's easy enough to modify them to add the margin between the buttons you're looking for:
<div class="form-group col-md-12">
<div class="col-md-12">
<div class="btn-toolbar col-md-12">
<a class="btn btn-info pull-right" href="#" title="Clear"><i class="glyphicon glyphicon-arrow-left"></i> Clear</a>
<button class="btn btn-primary pull-right" title="Filter" type="submit"><i class="glyphicon glyphicon-search"></i> Filter</button>
</div>
</div>
</div>
The only really real addition is the btn-toolbar class to the inner-most div. And for posterity here's the Fiddle.
Don't use .input-group instead use col-sm-* classes to give extra padding multiple times, so that you can match the padding available on all other form elements. And then arrange the buttons inside of it, like:
<div class="form-group col-md-12"> <!-- Extra Padding (15px) -->
<div class="col-xs-12"> <!-- Extra Padding (15px) -->
<div class="col-xs-12"> <!-- Extra Padding (15px) -->
<a class="btn btn-info" href="#" title="Clear"><i class="glyphicon glyphicon-arrow-left pull-left"></i> Clear</a>
<button class="btn btn-primary pull-right" title="Filter" type="submit"><i class="glyphicon glyphicon-search"></i> Filter</button>
</div>
</div>
</div>
Have a look at the updated Fiddle.
Hope this helps!
You are using wrapper cols for the inputs. I included one "col-md-12" before the button's "form-group" and another one after it. This way your code stay consistent and you achieve what you want.
<div class="col-md-12"> <----
<div class="form-group col-md-12">
<div class="col-md-12"> <----
<div class="input-group-btn">
Updated Fiddle
I have something like this:
<div class="form-group col-sm-6">
<div id="total">$50,20</div>
<button class="btn btn-theme" data-role="button" id="purchase"><i class="fa fa-envelope-o"></i>Send</button>
</div>
I want the total to be to the left of the button, but it appears over the button. I already tried making the column bigger but it stays there so the problem is not on the size.
You want it on the left? like this?
then,
<div class="form-group col-sm-6">
<div class="col-xs-1">
<label id="total">$50,20</label>
</div>
<div class="col-xs-1">
<button class="btn btn-theme" data-role="button" id="purchase"><i class="fa fa-envelope-o"></i>Send</button>
</div>
</div>
i would do it like this
<div class="form-group col-sm-12">
<div class=" col-sm-6" id="total">$50,20</div>
<div class=" col-sm-6">
<button class="btn btn-theme" data-role="button" id="purchase"><i class="fa fa-envelope-o"></i>Send</button>
</div>
div is by default a block element and that means that it takes up the whole available space.
Try to add this css rules:
#total {
display: inline-block;
float: left;
}
Alternatively, you could make the amount a span element like
<span id="total">$50,20</span>
I am attempting to center the search bar in my navbar. I am using bootstrap, I tried text-center on the md-4 but it had no effect.
Here is a link to my code.
http://bootsnipp.com/snippets/50b38
Bootstrap uses a grid of 12 columns. Your code had the first column be 8 and the 2nd one be 4. This would mean that your first column would be 2/3 of the page. By making it col-md-4, it allows your middle div to be center.
<div class="row top-header">
<div class="container">
<div class="col-md-4">
<img src="https://placeholdit.imgix.net/~text?txtsize=30&txt=320%C3%97240&w=235&h=126" alt="logo image" />
</div>
<div class="col-md-4">
<div id="search-center">
<div class="input-group">
<input type="text" class="form-control input-lg" placeholder="Search" />
<span class="input-group-btn">
<button class="btn btn-info btn-lg" type="button">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</div>
</div>
</div>
</div>
Here is an updated source:
http://bootsnipp.com/user/snippets/E7WgX
over your code in css tag, i put that and seems ork
.top-header {
background-color: #D9D9D9;
text-align:center;
}
Expect it help you
On this page: (link removed)
I'm starting to build a tumblr theme, and I have decided to build it using bootstrap. If you click the little I info button in the left corner, a div comes down with a user picture and description. The user picture and description appear as I want them to, but they are off center. I'd like them to be centered. I've tried < center >, using a fluid width container, etc with no avail. I also checked and bootstrap.css and the bootstrap.min.js are properly linked to the page.
Any help with this would be GREAT!
My code:
<div class="container-fluid" id="foo" style="z-index:5; display:none; height:auto;">
<center>
<div class="container-fluid" style="height:auto;">
<div class="row">
<div class="col-md-2" style=" margin-top:1%;"><img class="avatar-style-circle" src="{PortraitURL-128}" /><br/><h3>{AuthorName}</h3></div>
<div class="col-xs-12 col-md-8" style="background-color:blue; margin-top:3%;"><p style="text-align:justify;">{Description}<br/></p></div></div></div>
<div class="container-fluid" style="height:auto; margin-bottom:2%;">
<center>
<div class="container-fluid">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
<br/>
<div class="btn-group" role="group" aria-label="..."> Ask
Archive
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" style="z-index:5; margin-left:13%;">
<li>Dropdown link</li>
<li>Dropdown link</li>
</ul>
</div><!-- /.col-lg-6 --></center>
</div>
</div>
</div>
</div>
<div class="site-wrapper">
{block:ifShowInfoButton}
<i class="fa fa-info-circle fa-3x" style="position:absolute; margin-left:0.4%; margin-top:0.4%; color:{color:Info Button Color};"></i>
{/block:ifShowInfoButton}
Change the col on the picture from md-2 to md-4.
Or change the col on the text from md-8 to md-10 (better)!
It works on a 12 grid system and currently it is only using 10 columns out of 12, which is why it appears to align to the left :)
You can also use offset.
papakia's answer is correct however you could also add an empty column in front of your image column that is col-md-2 this will sometimes help not throw off the scale of other items if they are already tuned to your liking.