Bootstrap grid config - css

i cant find the correct config to this config in bootstrap 3 ...
i have this input field but i cant put the image in that position
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input size="16" class="form-control" type="text" name="nombre" required placeholder="Tu nombre completo">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input size="16" class="form-control" type="email" name="correo" required placeholder="Tu email">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="input-group-btn">
<button type="button" class="btn btn-success" id="agregar"><span class="glyphicon glyphicon-plus"></span> Agregar usuario sugerido</button>
</div>
</div>
</div>

Try this:
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="input-group-btn">
<button type="button" class="btn btn-success" id="agregar">
<span class="glyphicon glyphicon-plus"></span> Agregar usuario sugerido</button>
</div>
</div>
<div class="row">
<div class="input-group-btn">
<button type="button" class="btn btn-success" id="agregar">
<span class="glyphicon glyphicon-plus"></span> Agregar usuario sugerido</button>
</div>
</div>
</div>
<div class="col-sm-6">
Image here
</div>
</div>
</div>
</div>
You should have another look at the grid docu. Nesting is an solid option furthermore you do not need to use col-sm-6 combined with col-md-6 only use the smaller one if the values are the same.

You are making it a little too complicated, see my codepen. When working with Bootstrap think big to small. It helps you develop a layout and then work your way down to smaller things.
Hope this helps! :)
http://codepen.io/sequential/pen/egxbbK
<div class="row">
<div class="col-sm-6 tier1">
<div class="smBox"></div>
<div class="smBox"></div>
</div>
<div class="col-sm-6 tier1">
<div class="lgBox"></div>
</div>
</div>

Related

I need help ordering columns in bootstrap 4

This is my first post on stackoverflow, so forgive me if I make mistakes.
Would like to reverse these 2 columns in bootstrap and it doesn't work. Tried with order-2 but no luck.
<div class="flexbox">
<div class="container list">
<div class="row">
<h1>Customers</h1>
</div>
<div class="row">
<div class="col-sm-3 order-2">
<div class="list-group" id="supplier-list">
</div>
</div>
<div class="col-sm-6 order-">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon">Name</div>
</div>
<input type="text" id="supplier-name" class="form-control" aria-label="Input group example">
</div>
<br>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon">CUI</div>
</div>
<input type="text" id="supplier-cui" class="form-control" aria-label="Input group example">
</div>
<br>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon">ID</div>
</div>
<input type="text" id="supplier-id" class="form-control" aria-label="Input group example">
</div>
<br>
<button type="button" id="suppliers-update" class="btn btn-success">Update</button>
<button type="button" id="suppliers-delete" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>

Bootstrap searchbox pull-right

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.

Align Bootstrap form input fields across multiple rows inside a modal

Specifically, the problems are:
The first row wraps to a second line
The input fields do not line up vertically
It might be possible to use a table, but that might break responsiveness on mobile devices. Is there a clean/elegant way to align these input fields?
https://codepen.io/dtgq/pen/rwQRoK
For posterity, a copy of the HTML on the codepen:
<div class="modal fade" id="fjFilterModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Filter</h5>
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group row">
<label class="col-form-label col-md-2">Cost</label>
<div class=col-md-10>
<div class="form-inline">
<div class="form-group mx-2">
<div class=input-group>
<span class=input-group-addon>$</span>
<input class=form-control name="max_cost-gte" type=number placeholder="Minimum" step=1 min=0>
<span class=input-group-addon>.00</span>
</div>
</div>
to
<div class="form-group mx-2">
<div class=input-group>
<span class=input-group-addon>$</span>
<input class=form-control name="min_cost-lte" type=number placeholder="Maximum" step=1 min=0>
<span class=input-group-addon>.00</span>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-form-label col-md-2">Start date</label>
<div class=col-md-10>
<div class="form-inline">
<div class="form-group mx-2">
<input class="form-control" type="date" name="min_date-gte">
</div>
to
<div class="form-group mx-2">
<input class="form-control" type="date" name="min_date-lte">
</div>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-form-label col-md-2">Available units</label>
<div class=col-md-10>
<div class="form-inline">
<div class="form-group mx-2">
<div class=input-group>
<input class=form-control name="sum_vacant-gte" type=number min=0 placeholder="Minimum">
<span class=input-group-addon>units</span>
</div>
</div>
to
<div class="form-group mx-2">
<div class=input-group>
<input class=form-control name="sum_vacant-lte" type=number min=0 placeholder="Maximum">
<span class=input-group-addon>units</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn" data-toggle="modal" data-target="#fjFilterModal">
Filter
</button>

Bootstrap grid system works strangely

This is my code :
<div id="loginbox" class="mainbox col-md-6 col-md-offset-3 ">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">Sign In</div>
<div class="forget">Forgot password?</div>
</div>
<div class="panel-body" >
<div id="login-alert" class="alert alert-danger col-sm-12"></div>
<form id="loginform" class="form-horizontal" role="form">
<!-- id / pw -->
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="login-password" type="password" class="form-control" name="password" placeholder="password">
</div>
<div class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<div class="row">
<a id="btn-login" href="#" class="btn btn-success col-xs-12"> Login</a>
<a id="btn-fblogin" href="#" class="btn btn-primary col-xs-12"><i class="icon-facebook"></i>Login with Facebook</a>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12 control">
<div class="signup">
Don't have an account?
<a href="#" id="signuplink">
Sign Up Here
</a>
</div>
</div>
</div>
</form>
</div> <!-- <div style="padding-top:30px" class="panel-body" > -->
</div>
</div>
The only thing that I changed is <div id="loginbox" class="mainbox col-md-6 col-md-offset-3 ">
And here is before/after :
Before I inserted col-md-6 col-md-offset-3, the blue-shaded box looks balanced.
After I inserted col-md-6 col-md-offset-3, it looks unbalanced.
Why does it happen? I think that grid should work well(login box should be located at center" because it means `3(offset) - 6 - 3(offset)'.
Need your help.
Its because your loginbox does not have 12 columns in total as you specified 6+3(offset) =9
I would suggest this way as I dont like using offset
<div class="col-md-3 "></div>
<div id="loginbox" class="mainbox col-md-6">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">Sign In</div>
<div class="forget">Forgot password?</div>
</div>
<div class="panel-body" >
<div id="login-alert" class="alert alert-danger col-sm-12"></div>
<form id="loginform" class="form-horizontal" role="form">
<!-- id / pw -->
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="login-password" type="password" class="form-control" name="password" placeholder="password">
</div>
<div class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<div class="row">
<a id="btn-login" href="#" class="btn btn-success col-xs-12"> Login</a>
<a id="btn-fblogin" href="#" class="btn btn-primary col-xs-12"><i class="icon-facebook"></i>Login with Facebook</a>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12 control">
<div class="signup">
Don't have an account?
<a href="#" id="signuplink">
Sign Up Here
</a>
</div>
</div>
</div>
</form>
</div> <!-- <div style="padding-top:30px" class="panel-body" > -->
</div>
</div>
<div class="col-md-3 "></div>
Here's my take: giving it a fluid container and a couple extra rows to center things up:
<div class="container-fluid">
<div class="row">
<div class="brown-row col-md-8 col-md-offset-2">
<div class="row">
<div id="loginbox" class="mainbox col-md-6 col-md-offset-3 ">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">Sign In</div>
<div class="forget">Forgot password?</div>
</div>
<div class="panel-body">
<div id="login-alert" class="alert alert-danger col-sm-12"></div>
<form id="loginform" class="form-horizontal" role="form">
<!-- id / pw -->
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="login-password" type="password" class="form-control" name="password" placeholder="password">
</div>
<div class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<div class="row">
<a id="btn-login" href="#" class="btn btn-success col-xs-12"> Login</a>
<a id="btn-fblogin" href="#" class="btn btn-primary col-xs-12"><i class="icon-facebook"></i>Login with Facebook</a>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12 control">
<div class="signup">
Don't have an account?
<a href="#" id="signuplink">
Sign Up Here
</a>
</div>
</div>
</div>
</form>
</div>
<!-- <div style="padding-top:30px" class="panel-body" > -->
</div>
</div>
</div>
</div>
</div>
</div>
and css:
body {
background: #634a16;
}
.brown-row {
background: #9e7623;
}
#loginbox {
margin-top: 50px
}

Bootstrap horizontal form has additional margins

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>

Resources