I'm trying to make my two columns placed on the right side but when I add float left in my class the second column was ahead from my first column.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" style="margin-top: 3%;">
<div class="row">
<div class="col-md-1 col-xs-12" style="float: right;">
<p>Filter by: </p>
</div>
<div class="col-md-3 col-xs-12" style="float: right;">
<div class="input-group" id="adv-search">
<input type="text" class="form-control" placeholder="Search for hotels" />
<div class="input-group-btn">
<div class="btn-group" role="group">
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a>All Hotels </a></li>
<li class="divider"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
How can I make the first column ahead from the second col? Thanks!
Related
Supposedly a rather simple question, but I would appreciate some tips all the same.
I have the following Bootstrap html:
<div class="col-xs-6 col-md-3">
<div class="form-group">
<input autocomplete="off" autofocus="" class="form-control" name="Quantity" placeholder="Quantity required" type="text" id="quantity">
</div>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" id="touch" type="button" data-toggle="dropdown">grams
<span class="caret"></span></button>
<ul class="dropdown-menu" id="menu">
<li>milligrams</li>
<li>grams</li>
<li>kilograms</li>
</ul>
</div>
</div>
However, currently as shown here: http://www.bootply.com/xlkInfMjJo
the button always seems to sit below the input field. Is there a way to get around this and ensure the button stays in-line with the form field within the same column?
Kind Regards,
Yes, this can be achieved by having additional columns for the button and input field, which needs to be wrapped in a .row
So, you only need to change from:
<div class="col-xs-6 col-md-3">
<div class="form-group">
<input autocomplete="off" autofocus="" class="form-control" name="Quantity" placeholder="Quantity required" type="text" id="quantity">
</div>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" id="touch" type="button" data-toggle="dropdown">grams
<span class="caret"></span></button>
<ul class="dropdown-menu" id="menu">
<li>milligrams</li>
<li>grams</li>
<li>kilograms</li>
</ul>
</div>
</div>
To:
<div class="col-xs-6 col-md-3">
<div class="row">
<div class="form-group col-xs-8">
<input autocomplete="off" autofocus="" class="form-control" name="Quantity" placeholder="Quantity required" type="text" id="quantity">
</div>
<div class="dropdown col-xs-4">
<button class="btn btn-primary dropdown-toggle" id="touch" type="button" data-toggle="dropdown">grams
<span class="caret"></span></button>
<ul class="dropdown-menu" id="menu">
<li>milligrams</li>
<li>grams</li>
<li>kilograms</li>
</ul>
</div>
</div>
</div>
This way, the input field will always take 8 units of the width, whereas the button will take 4 - using the default Bootstrap grid system (12 total units).
Would you want to change this ratio, change the .col-xs-* classes newly inserted to your preferred values.
You can also view these changes in this Bootply snippet: http://www.bootply.com/ufUHQgp9bj
I have been trying a lot of times but still no use i am not able to display my modal in the navbar tabs. When i click on it a blur is triggered. Can someone please help me?
MY Template,
addnewrecord() {
$('#editmodel').modal('show');
}
<div class="col-xs-12">
<div class="row">
<div class="col-xs-12">
<div class="tabbable tabs-left mb-lg">
<ul id="tabs2" class="nav nav-tabs">
<li class="nav-item"><a class="nav-link" href="#tab1" data-toggle="tab">Home</a>
</li>
<li class="nav-item"><a class="nav-link active" [routerLink]="['/app/tables/basic']" data-toggle="tab">Chatter</a>
</li>
</ul>
<div id="tabs2c" class="tab-content bg-info-light">
<div class="tab-pane active">
<div class="page-title">
<div class="btn-group">
<button class="btn btn-sm btn-default" (click)='addnewrecord()'>
New
</button>
</div>
</div>
<div class="modal fade" id="editmodel" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="modal-body">
<form id='form' class="form-horizontal form-label-left parsleyjs" method="post" data-parsley-priority-enabled="false" novalidate="novalidate">
<div class="form-group">
<label for="email">FirstName:</label>
<input type="text" [(ngModel)]='student.accountname' name='accountname' class="form-control" id="email" placeholder="Enter Firstname" required='required'>
</div>
<button type="submit" class="btn btn-primary" (click)='insertdata(student,student._id)'>{{buttonname}}</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" (click)='resetform()'>Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Please try this code,
$('#editmodel').show();
Im having some problems with layout of bootstrap.
I have looked at the link below to find some details about the situation.
How can I get a Bootstrap column to span multiple rows?
However, i couldnt figure out how to fix this issue:
----------What i have----------
Picture current
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- First row, directions -->
<div class="row top-buffer">
<div class="col-md-12">
<br><br><br><br>
</div>
</div>
<div class="row">
<div class="col-md-2">
<a class="btn btn-primary btn-block btn-group-fill-height" href="home.html" role="button"> Home </a>
<br>
<form class="form-inline">
<div class="btn-group btn-group-lg btn-group-justified btn-group-fill-height">
<a class="btn btn-primary" href="results.html" role="button"> < </a>
<a class="btn btn-secondary " role="button"> 1/3 </a>
<a class="btn btn-primary " href="results.html" role="button"> > </a>
</div>
</form>
</div>
<div class="col-md-1">
</div>
<div class="row">
<div class="col-md-4">
<label class="checkbox-inline"><input type="checkbox" value=""></label>
<label class="checkbox-inline"><input type="checkbox" value=""></label>
<label class="checkbox-inline"><input type="checkbox" value=""></label>
<br>
<div class="form-group">
<label for="search">Search</label>
<input type="text" class="form-control" id="search">
</div>
</div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-1"></div>
<div class="col-md-4">
<form class="form-inline">
<div class="btn-group btn-group-lg btn-group-justified btn-group-fill-height">
<a class="btn btn-primary" href="results.html" role="button"> < </a>
<a class="btn btn-secondary " role="button"> 1/3 </a>
<a class="btn btn-primary " href="results.html" role="button"> > </a>
</div>
</form>
</div>
</div>
<div class="col-md-1">
</div>
</div>
</div>
</body>
</html>
----------What i want----------
picture wanted
*Note, the extended box (left) should fill the entire row
You cannot span rows or columns as if them were tabe's. You should change your markup a little
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.row { border: 1px solid #f00;}
[class*="col-"] { border: 1px solid #0f0; }
</style>
<div class="container">
<div class="row top-buffer">
<div class="col-xs-12">
</div>
</div>
<div class="row">
<div class="col-xs-2">
<a class="btn btn-primary btn-block btn-group-fill-height" href="home.html" role="button"> Home </a>
<br>
<form class="form-inline">
<div class="btn-group btn-group-lg btn-group-justified btn-group-fill-height">
<a class="btn btn-primary" href="results.html" role="button"> < </a>
<a class="btn btn-secondary " role="button"> 1/3 </a>
<a class="btn btn-primary " href="results.html" role="button"> > </a>
</div>
</form>
</div>
<div class="col-xs-1">
</div>
<div class="col-xs-4">
<label class="checkbox-inline"><input type="checkbox" value=""></label>
<label class="checkbox-inline"><input type="checkbox" value=""></label>
<label class="checkbox-inline"><input type="checkbox" value=""></label>
<br>
<div class="form-group">
<label for="search">Search</label>
<input type="text" class="form-control" id="search">
</div>
<form class="form-inline">
<div class="btn-group btn-group-lg btn-group-justified btn-group-fill-height">
<a class="btn btn-primary" href="results.html" role="button"> < </a>
<a class="btn btn-secondary " role="button"> 1/3 </a>
<a class="btn btn-primary " href="results.html" role="button"> > </a>
</div>
</form>
</div>
</div>
</div>
I changed the columns from md to xs just to prevent them from going responsive inside the snippet frame.
I'm using bootstrap toggle in my project, it works really nice, but when I'm trying to align the toggle div to the right the text (on the left) and div are not aligning anymore.
I was reading about this issue and found that the clearfix class can help here, and it did solve some of the problems, but it's still not looking like it should.
JSFiddle
<ul class="list-group" style="width:200px">
<li class="list-group-item active">
<h5 class="list-group-item-heading">
<i class="fa fa-cogs"></i>
Settings
</h5>
</li>
<li class="list-group-item">
<h5 class="list-group-item-text clearfix">
Data source
<div class="toggle btn btn-primary" data-toggle="toggle" style="width: 0px; height: 0px;float: right;">
<input class="pull-right" type="checkbox" checked="" data-toggle="toggle">
<div class="toggle-group">
<label class="btn btn-primary toggle-on">On</label>
<label class="btn btn-default active toggle-off">Off</label>
<span class="toggle-handle btn btn-default"></span>
</div>
</div>
</h5>
</li>
</ul>
This is how I wish it will look (never mind the icon please):
You should create an element outside "Data source" and add line-height: 32px; for it :
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-group" style="width:200px">
<li class="list-group-item active">
<h5 class="list-group-item-heading">
<i class="fa fa-cogs"></i>
Settings
</h5>
</li>
<li class="list-group-item">
<h5 class="list-group-item-text clearfix">
<span style="line-height: 32px;">Data source</span>
<div class="toggle btn btn-primary" data-toggle="toggle" style="width: 0px; height: 0px;float: right;">
<input class="pull-right" type="checkbox" checked="" data-toggle="toggle">
<div class="toggle-group">
<label class="btn btn-primary toggle-on">On</label>
<label class="btn btn-default active toggle-off">Off</label>
<span class="toggle-handle btn btn-default"></span>
</div>
</div>
</h5>
</li>
</ul>
How can I get these two divs to align in a row horizontally and keep the form-group intact?
No matter what kind of col-ms-sizing I do the two input groups will not align on the same line and I believe this is only happening because of the form-group class.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="container-fluid" ng-controller="PriceController as formCtrl">
<form class="form-horizontal" role="form" ng-submit="processForm()">
<div class="form-group">
<label for="inputPrice" class="col-sm-1 control-label">Price</label>
<div class="col-sm-5 input-group"> <span class="input-group-addon">$</span>
<input type="text" class="form-control" id="inputPrice" name="inputPrice"> <span class="input-group-addon">.95</span>
</div>
<label for="inputDate" class="col-sm-1 control-label">Date</label>
<div class="col-sm-5 input-group">
<input type="text" class="form-control" id="inputDate" name="inputDate" placeholder="Date">
<div class="input-group input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Date <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>Today
</li>
<li>Tomorrow
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
Make sure you wrap your inputs with a <div class="row"> and then make separate divs for the col-sm-* classes. I replaced col-sm-* with col-xs-* to ensure the snippet would not wrap.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="container-fluid" ng-controller="PriceController as formCtrl">
<form class="form-horizontal" role="form" ng-submit="processForm()">
<div class="form-group">
<div class="row">
<div class="col-xs-1">
<label for="inputPrice" class="control-label">Price</label>
</div>
<div class="col-xs-5">
<div class="input-group"> <span class="input-group-addon">$</span>
<input type="text" class="form-control" id="inputPrice" name="inputPrice"> <span class="input-group-addon">.95</span>
</div>
</div>
<div class="col-xs-1">
<label for="inputDate" class="control-label">Date</label>
</div>
<div class="col-xs-5">
<div class="input-group">
<input type="text" class="form-control" id="inputDate" name="inputDate" placeholder="Date">
<div class="input-group input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Date <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>Today
</li>
<li>Tomorrow
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
You just have to wrap your inputs inside of col elements basically just nested columns. Make sure you are also using the correct sized columns for the correct screen sizes.
http://jsfiddle.net/kwd9cqn9/1/
<div class="container">
<div class="container-fluid">
<form class="form-horizontal">
<div class="form-group">
<div class="col-lg-6 col-sm-6 col-xs-6">
<label for="inputPrice" class="col-sm-1 control-label">Price</label>
<div class="col-lg-12 input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="inputPrice" name="inputPrice" />
<span class="input-group-addon">.95</span>
</div>
</div>
<div class="col-lg-6 col-sm-6 col-xs-6">
<label for="inputDate" class="col-sm-1 control-label">Date</label>
<div class="col-lg-12 input-group">
<input type="text" class="form-control" id="inputDate" name="inputDate" placeholder="Date" />
<div class="input-group input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Date <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>Today</li>
<li>Tomorrow</li>
</ul>
</div>
</div>
</div>
</div>
</form>
</div>