For some reason bootstrap's CSS manages to hide some (but not all) of my hrs at certain widths.
If you go to This fiddle and expand the output pane to be wide enough, you'll notice that the hrs between "attachment", "add attachment", and "Department" all vanish. Why?
How can I get them to show up at any width?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="body-content">
<form action="/Reports/Edit/5" method="post" novalidate="novalidate"> <div class="form-horizontal">
<h4>Report</h4>
<hr>
<div class="form-group">
<label class="control-label col-md-2" for="ShortageFilledDate">Date Shortage Filled</label>
<div class="col-md-10">
<input name="ShortageFilledDate" class="form-control text-box single-line" id="ShortageFilledDate" type="datetime" value="" data-val="true" data-val-date="The field Date Shortage Filled must be a date.">
<span class="field-validation-valid text-danger" data-valmsg-replace="true" data-valmsg-for="ShortageFilledDate"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="ReplanClosedDate">Date Replan Closed</label>
<div class="col-md-10">
<input name="ReplanClosedDate" class="form-control text-box single-line" id="ReplanClosedDate" type="datetime" value="" data-val="true" data-val-date="The field Date Replan Closed must be a date.">
<span class="field-validation-valid text-danger" data-valmsg-replace="true" data-valmsg-for="ReplanClosedDate"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input class="btn btn-default" type="submit" value="Save">
</div>
</div>
</div>
</form>
<hr>
<div class="col-md-2">attachment:</div><div class="col-md-10">logo.png</div>
<hr>
<form action="/Reports/AddAttachment" enctype="multipart/form-data" method="post"><input name="reportId" id="reportId" type="hidden" value="5"> <div class="form-group">
<label class="control-label col-md-2" for="Add_Attachment">Add Attachment</label>
<div class="col-md-10">
<input name="upload" id="attachment" type="file">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input class="btn btn-default" type="submit" value="Upload Attachment">
</div>
</div>
</form>
<hr>
<form action="/Reports/SendToDepartment" method="post"><input name="ReportId" id="ReportId" type="hidden" value="5"> <div class="form-group">
<label class="control-label col-md-2" for="Department">Department</label>
<div class="col-md-10">
<select name="Department" class="form-control" id="Department"><option value="">Select Next Department Location</option>
<option value="0">Production</option>
<option value="1">DMRClerk</option>
<option value="2">QualityEngineer</option>
<option value="3">Stockroom</option>
<option value="4">Purchasing</option>
<option value="5">Shipping</option>
<option value="6">Archive</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Comments">Comments</label>
<div class="col-md-10">
<textarea name="Comments" id="Comments" rows="3" cols="200"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input class="btn btn-default" type="submit" value="Send to Department">
</div>
</div>
</form>
<div>
Back to List
</div>
<hr>
<footer>
<p class="text-center">© 2016</p>
</footer>
</div>
</body>
It is because when not in smaller views (xs) the classes uses float:left
so the hr is being used after those classes, therefore must cleared before.
you can use bootstrap class clearfix for that
.body-content hr {
border-color: red
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="body-content">
<form action="/Reports/Edit/5" method="post" novalidate="novalidate">
<div class="form-horizontal">
<h4>Report</h4>
<hr>
<div class="form-group">
<label class="control-label col-md-2" for="ShortageFilledDate">Date Shortage Filled</label>
<div class="col-md-10">
<input name="ShortageFilledDate" class="form-control text-box single-line" id="ShortageFilledDate" type="datetime" value="" data-val="true" data-val-date="The field Date Shortage Filled must be a date.">
<span class="field-validation-valid text-danger" data-valmsg-replace="true" data-valmsg-for="ShortageFilledDate"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="ReplanClosedDate">Date Replan Closed</label>
<div class="col-md-10">
<input name="ReplanClosedDate" class="form-control text-box single-line" id="ReplanClosedDate" type="datetime" value="" data-val="true" data-val-date="The field Date Replan Closed must be a date.">
<span class="field-validation-valid text-danger" data-valmsg-replace="true" data-valmsg-for="ReplanClosedDate"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input class="btn btn-default" type="submit" value="Save">
</div>
</div>
</div>
</form>
<hr>
<div class="col-md-2">attachment:</div>
<div class="col-md-10">logo.png
</div>
<div class="clearfix"></div>
<hr>
<form action="/Reports/AddAttachment" enctype="multipart/form-data" method="post">
<input name="reportId" id="reportId" type="hidden" value="5">
<div class="form-group">
<label class="control-label col-md-2" for="Add_Attachment">Add Attachment</label>
<div class="col-md-10">
<input name="upload" id="attachment" type="file">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input class="btn btn-default" type="submit" value="Upload Attachment">
</div>
</div>
</form>
<div class="clearfix"></div>
<hr>
<form action="/Reports/SendToDepartment" method="post">
<input name="ReportId" id="ReportId" type="hidden" value="5">
<div class="form-group">
<label class="control-label col-md-2" for="Department">Department</label>
<div class="col-md-10">
<select name="Department" class="form-control" id="Department">
<option value="">Select Next Department Location</option>
<option value="0">Production</option>
<option value="1">DMRClerk</option>
<option value="2">QualityEngineer</option>
<option value="3">Stockroom</option>
<option value="4">Purchasing</option>
<option value="5">Shipping</option>
<option value="6">Archive</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Comments">Comments</label>
<div class="col-md-10">
<textarea name="Comments" id="Comments" rows="3" cols="200"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input class="btn btn-default" type="submit" value="Send to Department">
</div>
</div>
</form>
<div>
Back to List
</div>
<hr>
<footer>
<p class="text-center">© 2016</p>
</footer>
</div>
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="Scripts/bootstrap.js"></script>
</body>
This is just another pitfall of the bootstrap framework(one of the reasons why I kinda hate using bootstrap).
When bootstrap is included in an application, the styles in bootstrap.css voluntarily/involuntarily overrides your HTML elements. This is exactly what happened to your <hr> tags. As you can see in a browser debugger your HRs now will have the following piece of code coming from bootstrap.css line 1140.
//coming from bootstrap.css line:1140
hr {
margin-top: 20px;
margin-bottom: 20px;
border: 0; //this is causing the issue
border-top: 1px solid #eee;
}
//coming from bootstrap.css line:1140
The border: 0 is causing the issue in this case, Nonetheless I would suggest not using <hr> & start using properties like border-bottom or so to get the separator effect.
Related
this button is affecting everything that is in the same line with it, how do i make it fixed without having it affect the things on the same line with it. the fields are affected by the save button. if the save button is is the same line as the form field, it affects the form field
<div class="row">
<div class="col-md-4">
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<input type="hidden" asp-for="EmployeeCode" value="#EmpCode" />
</div>
<div class="form-group">
<label asp-for="IndustryId" class="control-label"></label>
<select asp-for="IndustryId" class="form-control" asp-items="ViewBag.IndustryId"></select>
</div>
<div class="form-group">
<label asp-for="SubIndustryId" class="control-label"></label>
<select asp-for="SubIndustryId" class="form-control" asp-items="ViewBag.SubIndustryId">
<option selected> - None - </option>
</select>
</div>
<div class="form-group">
<label asp-for="YearsExp" class="control-label"></label>
<input asp-for="YearsExp" class="form-control" />
<span asp-validation-for="YearsExp" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Proficiency" class="control-label"></label>
<input asp-for="Proficiency" class="form-control" />
<span asp-validation-for="Proficiency" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="BusinessArea" class="control-label"></label>
<input asp-for="BusinessArea" class="form-control" />
<span asp-validation-for="BusinessArea" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Feature" class="control-label"></label>
<input asp-for="Feature" class="form-control" />
<span asp-validation-for="Feature" class="text-danger"></span>
</div>
<div class="fixed-bottom">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="text-right" style="margin-bottom:20px;">
<input type="submit" value="Save Changes" class="btn btn-primary" />
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="fixed-bottom">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="text-right" style="margin-bottom:20px;">
<input type="submit" value="Save Changes" class="btn btn-primary" />
</div>
</div>
</div>
</div>
</div>
I've created a preview here: https://www.bootply.com/eItE7SJoQb
Maybe if you were to place the 'things on the same line' that you don't want it to affect..?
This might be something simple that I am missing but I cant get though this. I am using bootstrap 3 in my application. In my form I have some controls like dropdowns, textbox, labels etc. See example as below:
<div class="modal-body">
<form role="form" name="form" class="form-body">
<div class="form-group">
//form label here
<div class="m-grid-col-sm-5">
//form element here
</div>
</div>
</form>
<div>
Above is just a example. The issue is when I run my app, I can see is the label is always above the control. What I want is the label on the left and the form control (dropdown,textbox etc) on the right.
You can see I created a sample jsfiddle at:
https://jsfiddle.net/aman1981/xprh2tno/8/
Please ignore the modal class as the issue is not I am having is not at the modal but other forms within my app as well.
I have tried adjusting and using different class but looks like its not adjusting well.
You need to refer the Horizontal Form section in the documentation here: http://bootstrapdocs.com/v3.0.3/docs/css/#forms
HTML:
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
Demo: https://jsfiddle.net/xprh2tno/12/
You Can try this Code here
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="name" class="col-xs-2 control-label">Name</label>
<div class="col-xs-10">
<input type="text" class="form-control" id="name" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-xs-2 control-label">Email</label>
<div class="col-xs-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="sex" class="col-xs-2 control-label">Sex</label>
<div class="col-xs-10">
<select name="sex" class="auto-width setup-inline form-control input-medium" required>
<option value="">---Please select---</option>
<option value="m">Male</option>
<option value="f">Female</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10 text-right">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
I'm using bootstrap from getbootstrap.com. I want to have a space between the SAVE and CLEAR button. I also want them to align center to be proportioned on the textboxes. How can I achieve that?
<div class="form-group">
<label for="trucktype" class="col-sm-2">Truck Type</label>
<div class="col-sm-4">
<select id="trucktype" name="trucktype" class="form-control" tabindex="2">
<option value="volvo">Service Wheels</option>
<option value="saab">Boom Truck</option>
<option value="mercedes">Crane Truck</option>
<option value="audi">Pole Trailer Truck</option>
</select>
</div>
</div>
<div class="form-group">
<label for="truckloadcapacity" class="col-sm-2">Truck load capacity</label>
<div class="col-sm-4"><input type="text" name="truckloadcapacity" id="truckloadcapacity" class="form-control" tabindex="3"></div>
</div>
<div class="form-group">
<label for="truckdesc" class="col-sm-2">Truck Description:</label>
<div class="col-sm-4"><textarea class="form-control" rows="3" id="truckdesc" tabindex="4"></textarea></div>
</div>
<div class="form-group">
<label for="truckphoto" class="col-sm-2">Truck Photo</label>
<div class="col-sm-4"><input type="file" name="file" id="truckphoto" class="form-control" tabindex="5"></div>
</div>
<!-- BUTTONS start -->
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<input class="btn-primary btn-lg col-sm-4" type="submit" value="Save">
<input type="reset" class="btn-default btn-lg col-sm-4" name="clear" value="Clear">
</div>
</div>
</div>
<!-- BUTTONS end -->
</form>
may be you are looking for this class="text-center" will do a trick, and some CSS for spacing
.btn-spacing
{
margin-right: 5px;
margin-bottom: 5px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="form-group">
<label for="trucktype" class="col-sm-2">Truck Type</label>
<div class="col-sm-4">
<select id="trucktype" name="trucktype" class="form-control" tabindex="2">
<option value="volvo">Service Wheels</option>
<option value="saab">Boom Truck</option>
<option value="mercedes">Crane Truck</option>
<option value="audi">Pole Trailer Truck</option>
</select>
</div>
</div>
<div class="form-group">
<label for="truckloadcapacity" class="col-sm-2">Truck load capacity</label>
<div class="col-sm-4"><input type="text" name="truckloadcapacity" id="truckloadcapacity" class="form-control" tabindex="3"></div>
</div>
<div class="form-group">
<label for="truckdesc" class="col-sm-2">Truck Description:</label>
<div class="col-sm-4"><textarea class="form-control" rows="3" id="truckdesc" tabindex="4"></textarea></div>
</div>
<div class="form-group">
<label for="truckphoto" class="col-sm-2">Truck Photo</label>
<div class="col-sm-4"><input type="file" name="file" id="truckphoto" class="form-control" tabindex="5"></div>
</div>
<!-- BUTTONS start -->
<div class="row">
<div class="col-sm-4">
<div class="form-group btn-block text-center">
<input class="btn-primary btn-lg col-sm-4 btn-spacing " type="submit" value="Save">
<input type="reset" class="btn-default btn-lg btn-spacing col-sm-4" name="clear" value="Clear">
</div>
</div>
</div>
<!-- BUTTONS end -->
For the last form-group class rename it to form-group1 and in the CSS put this. .form-group {text-align:center;}. Also, if you want space between those two buttons, do this. .btn-primary btn-lg col-sm-4 {margin:10px;}
here is an example. jsFiddle
To add space between clear and submit button you can add below CSS.
.form-group .btn-primary {
margin-right:10px;
}
I want to align the labels and as well as text-fields in this way:
But the output I get from my code is this:
And my code is:
<span class="questions">Your Date of birth: </span>
<input type="date" placeholder="DOB"/><br>
<span class="questions">Which Country You Are In:</span>
<select>
<option selected disabled>Select Country</option>
<option>India</option>
</select><br>
<span class="questions">In which University You Are In:</span>
<select>
<option selected disabled>Select University</option>
<option>AKTU</option>
</select><br>
<span class="questions">In which College You Are In:</span>
<select>
<option selected disabled>Select Your College</option>
<option>Raj kumar Goel Institute of Technology, Ghaziabad (RKGIT)</option>
</select><br>
<span class="questions">Your Mobile Number: </span>
<input type="tel" placeholder="Mobile Number"/><br>
<button class="btn">Proceed to Feeds.</button>
What should I add to CSS so that I get the required output or can I add before the <span> tag to adjust as the output required. Can anyone help me in this.
Try this:
.questions{
width:50%;
text-align:right;
display:inline-block;
}
input{width:150px;}
select{width:150px;}
<span class="questions">Your Date of birth: </span>
<input type="date" placeholder="DOB"/><br>
<span class="questions">Which Country You Are In:</span>
<select>
<option selected disabled>Select Country</option>
<option>India</option>
</select><br>
<span class="questions">In which University You Are In:</span>
<select>
<option selected disabled>Select University</option>
<option>AKTU</option>
</select><br>
<span class="questions">In which College You Are In:</span>
<select>
<option selected disabled>Select Your College</option>
<option>Raj kumar Goel Institute of Technology, Ghaziabad (RKGIT)</option>
</select><br>
<span class="questions">Your Mobile Number: </span>
<input type="tel" placeholder="Mobile Number"/><br>
<div align="center"> <button class="btn">Proceed to Feeds.</button><div>
Use form-horizontal class in form tag
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
Watch this in fullpage
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$( function() {
$( "#datepicker" ).datepicker({
beforeShow: function(){
$("#abc").css('line-height', '14em')
},
});
} );
function chngecss(){
$("#abc").css('line-height', 'unset');
$('#datepicker').Close();
}
</script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h2>Horizontal form</h2>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-2" for="dob">Your Date Of Birth :</label>
<div class="col-sm-5" id="abc">
<input class="form-control" type="text" id="datepicker" onblur="chngecss();" class="ui-datepicker" placeholder="DOB"/><br>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="country">In Which Country You Are In :</label>
<div class="col-sm-5">
<select class="form-control">
<option selected disabled>Select Your College</option>
<option>Raj kumar Goel Institute of Technology, Ghaziabad (RKGIT)</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="mobno">Your Mobile Number :</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="mobno" placeholder="Enter Mobile Number">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-5">
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-5">
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-5">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-5">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
Solved: JSfiddle
here is what I wanted, sample:
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-xs-2 control-label">Name</label>
<div class="col-xs-4">
<input type="text" class="form-control col-sm-10" name="name" placeholder="name" />
</div>
</div>
<div class="form-group">
<label for="birthday" class="col-xs-2 control-label">Birthday</label>
<div class="col-xs-10">
<div class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="year" />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="month" />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="day" />
</div>
<div class="form-group">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="name" class="col-xs-2 control-label">Name</label>
<div class="col-xs-4">
<input type="text" class="form-control col-sm-10" name="name" placeholder="name" />
</div>
</div>
</form>
.css:
.form-inline .form-group {
margin-left: 0;
margin-right: 0;
}
END
UPDATE:
I see where my problem is but i have form-horizontal that I want and if i change it to form-inline everything else is messed up please have a look at the updated jsfiddle
How do I make it inline in one row without spacing as shown in the screen shot:
<form class="navbar-form form-horizontal" role="search" style="padding:0" _lpchecked="1">
<div class="form-group col-md-12">
<label class="col-sm-3 control-label">Location</label>
<div class="col-md-3">
<input class="form-control ng-pristine ng-valid" id="src1" placeholder="Search" type="text">
</div>
<div class="col-md-3">
<input class="form-control ng-pristine ng-valid" id="srch2" placeholder="State" type="text">
</div>
<div class="col-md-3">
<input class="form-control ng-pristine ng-valid" id="srch3" placeholder="City" type="text">
</div>
<div class="col-md-2">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
as you can see spacing between the input:
JSFiddle
Use form-inline instead of form-horizontal:
<form class="navbar-form form-inline" role="search" style="padding:0" _lpchecked="1">
<div class="form-group">
<label class="control-label">Location</label>
<input class="form-control ng-pristine ng-valid" id="src1" placeholder="Search" type="text">
</div>
<div class="form-group">
<input class="form-control ng-pristine ng-valid" id="srch2" placeholder="State" type="text">
</div>
<div class="form-group">
<input class="form-control ng-pristine ng-valid" id="srch3" placeholder="City" type="text">
</div>
<div class="form-group">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
bootply
Simple calculation: col-sm-3 * 4 + col-sm-2 == col-sm-14 Which is not good. You should make sure that the total will not exceed 12 cols for each row.
Suggestion - change the first col-sm-3 to col-sm-1