I want to have a searchbox on the right next to another container with pull-left:
<div>
<div class="pull-left"><span>SOME TEXT</span></div>
<div class="pull-right">
<div class="row">
<div class="col-xs-6 col-md-4">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" id="txtSearch">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
Bootply link:
LINK
It does not work the intended way.
If you are using the grid, you don't need the pull-right class.
As for your example, some text is given col-*-8 and your search bar is given col-*-4 it will place your search in the right.
<div class="container">
<div class="row">
<div class="col-*-8">
Some Text
</div>
<div class="col-*-4">
BUTTON
</div>
</div>
</div>
This Documentation and this video are really informative and you can anytime check the Bootstrap Official Grid Documentation.
Here is the Solution.
Related
I'm making a very simple form for an Electron app I am making to experiment with the software, however, I am stuck on the most basic of things... the interface design.
I'm using Bootstrap 4 for my interface and am trying to centre the form vertically, however, I am getting mix results using various suggestions made on other's questions on the same topic. They either do not work or squeeze all my content onto a single line and generally mess the current layout up.
Any suggestions on how I can vertically align the items in the container below?
<!-- Search Field -->
<div class="container">
<div class="row justify-content-center">
<div class="col-sm-auto">
<h1 class="text-white">Shorten M' URL!</h1>
</div>
</div>
<div class="row justify-content-center">
<div class="col-sm-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter URL...">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Shorten!</button>
</span>
</div>
</div>
</div>
</div>
Are you looking for this?:
.vh-100 {
height: 100vh;
}
<div class="container vh-100 bg-dark">
<div class="row vh-100 justify-content-center align-items-center">
<div class="col-6 text-center">
<h1 class="text-white">Shorten M' URL!</h1>
<br>
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter URL...">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Shorten!</button>
</span>
</div>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
Basically you have to have the container to fit the screen height. Once there, you can align it's items vertically.
I must be missing something really simple here:
<div class="row">
<div class="col-lg-12">
<a href="/add" class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add User
</a>
</div>
</div>
<div class="row">
<div class="col-lg-12" ng-show="users.busy">
<div class="spinner-loader center-block"></div>
</div>
</div>
I've used the bootstrap classes, including center-block. Yet it always looks like this:
Why isn't the spinner icon in the centre of the page?
There is a work around to your problem by changing some HTML as follows
<div class="row">
<div class="col-lg-12 text-center" ng-show="users.busy">
<span class="spinner-loader">Loading</span>
</div>
</div>
instead of <div> for spinner I took a <span> which will be centered horizontally because of text-center class to parent <div>.
You can try this:
<div class="row">
<div class="col-lg-12">
<a href="/add" class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add User
</a>
</div>
</div>
<center>
<div class="row">
<div class="col-lg-12" ng-show="users.busy">
<div class="spinner-loader"></div>
</div>
</div>
</center>
Instead of using center-block, add text-center class
I ve been using the bootstrap col-md-offset css to center my divs. For example:
<div class=container>
<div class=row>
<div class=form-horizontal>
<div class="col-md-offset-4 col-md-4">
<div class="your div">
</div>
</div>
</div>
</div>
Your div will be responsive, thus as you resize the window the div will remain in the center of the window.
The button that's next to a column containing a select element appears to have some extra margins on it. On my actual site it seems to be extra positive margin, while on CodePen it appears to be negative.
I suspect they are the same problem though with the markup though. Here's the CodePen demo: http://codepen.io/anon/pen/gabZMo?editors=100
<div class="row">
<div class="form-horizontal col-md-6">
<div class="form-group">
<div class="col-sm-8">
<select class="form-control">...</select>
</div>
<button class="btn btn-default col-sm-4">New Event</button>
</div>
<button class="btn btn-primary btn-block">Free Quote</button>
</div>
</div>
I've looked through the Bootstrap docs and this should be the correct markup. I've also tried wrapping the button in its own column, but that didn't change anything.
You have 3 options to resolve the problem,
Put the <button class="btn btn-primary btn-block">Free Quote</button> inside <div class="form-group"></div>
Reason the button is pushing left of right because col-sm-4 selector has left and right padding 15px which is getting overwritten by btn-default selector padding: 6px 12px;
So add custom selector custom-margin and define custom CSS
1 HTML
<div class="row">
<div class="form-horizontal col-md-6">
<div class="form-group">
<div class="col-sm-8">
<select class="form-control">...</select>
</div>
<button class="btn btn-default col-sm-4 custom-margin">New Event</button>
</div>
<div class="form-group">
<button class="btn btn-primary btn-block">Free Quote</button>
</div>
</div>
</div>
Fiddle 1
2 HTML
<div class="row">
<div class="form-horizontal col-md-6">
<div class="form-group">
<div class="col-sm-8">
<select class="form-control">...</select>
</div>
<button class="btn btn-default col-sm-4 custom-margin">New Event</button>
<button class="btn btn-primary btn-block">Free Quote</button>
</div>
</div>
</div>
Fiddle 2
Or Do it right way
3 HTML
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-8">
<div class="form-group">
<select class="form-control">...</select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<button class="btn btn-default btn-block">New Event</button>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<button class="btn btn-primary btn-block">Free Quote</button>
</div>
</div>
</div>
</div>
</div>
</div>
Fiddle 3
You don't want to use col-sm-4 directly on the button. Put btn-block on the button and stick it in a col-sm-4 div, like so:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="form-horizontal col-md-6">
<div class="form-group">
<div class="col-xs-8">
<select class="form-control">
<option value="1">Test Event</option>
<option value="7">Test Event 2: The Re-testening</option>
</select>
</div>
<div class="col-xs-4">
<button class="btn btn-default btn-block">New Event</button>
</div>
</div>
<button class="btn btn-primary btn-block">Free Quote</button>
</div>
</div>
I am trying to horizontally center two radio buttons (in a group) on my page. This is what I have so far. It is not exactly center. It is a bit to the left. Pull right makes it go too far to the right. I added center-block and text-center but they did not help at all.
Can anyone help?
<div class="row">
<div class="col-sm-5"> </div>
<div class="col-sm-2">
<div class="btn-group center-block text-center" data-toggle="buttons">
<label class="btn btn-default center-block"><input type="radio">All</label>
<label class="btn btn-default active center-block"><input type="radio">Filtered</label>
</div>
</div>
<div class="col-sm-5"> </div>
</div>
You need to have text-center in the parent div, not the div being centered.
<div class="row">
<div class="col-sm-offset-5 col-sm-2 text-center">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default center-block"><input type="radio">All</label>
<label class="btn btn-default active center-block"><input type="radio">Filtered</label>
</div>
</div>
</div>
Also, you should use col-sm-offset-5 instead of <div class="col-sm-5"> </div>.
Bootply Demo
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>