I have a bootstrap input that requires another div to the right of it but it won't seem to align with the code I'm using.
HTML (With bootstrap & fontawesome)
<div class="row">
<div id="mobNum" class="input-group margin-bottom-sm col-xs-6">
<span class="input-group-addon" style="width:20px"><i class="fa fa-phone-square" aria-hidden="true"></i></span><input id="mobile" class="form-control requiredClass" type="text" placeholder="Mobile Number.."/></div>
<div id="showDivMobile" class="showDivClass needData" style="col-xs-6">
<i class="fa fa-asterisk showCSS " aria-hidden="true"></i>vv<br/></div>
</div>
And my fiddle: http://jsfiddle.net/JLjjK/1350/
When using Bootstrap, it is a good practice to put your layout related classes (cols and rows) in separate divs elements; These classes should not be present in other elements like input-groups.
In your case, when you combine input-group with col-xs-6, it overrides the float attribute and breaks your layout, placing the divs on two separate lines.
Try separating them like this:
<div class="row">
<div class="col-xs-6">
<div id="mobNum" class="input-group margin-bottom-sm">...</div>
</div>
<div class="col-xs-6">
<div id="showDivMobile" class="showDivClass needData">...</div>
</div>
</div>
Hope this helps!
<div style="display:flex;">
<div id="mobNum" class="input-group margin-bottom-sm col-xs-6">
<span class="input-group-addon" style="width:20px">
<i class="fa fa-phone-square" aria-hidden="true"></i>
</span>
<input id="mobile" class="form-control requiredClass" type="text" placeholder="Mobile Number.."/>
</div>
<div id="showDivMobile" class="showDivClass needData col-xs-6">
<i class="fa fa-asterisk showCSS " aria-hidden="true"></i>vv<br/>
</div>
</div>
The issue is with this code from bootstrap
<div id="mobNum" class="input-group margin-bottom-sm col-xs-6">
CSS rule for input-group
.input-group[class*=col-] {
float: none; // this is the problem
padding-right: 0;
padding-left: 0;
}
It should be float:left So write a inline style to make it float left and it should be fine.
Also another issue is with style="col-xs-6" it must go in to class
Here is a working fiddle.
Changes done
<div id="mobNum" class="input-group margin-bottom-sm col-xs-6" style="float:left">
and
<div id="showDivMobile" class="showDivClass needData col-xs-6" style="">
Related
i want to make one div right align , but not able keep it in right side in row. how to make the value 172.21 at right side in the row.
screenshot
HTML:
<div class="row">
<div class="col-md-6">
<h4>Status</h4>
<input type="checkbox" disabled checked data-toggle="toggle" data-onstyle="outline-success" data-offstyle="outline-danger">
</div>
<div class="col-md-3">
<h4>Max Demand </h4>
</div>
<div class="col-md-3">
<h4>172.21</h4>
</div>
</div>
If there is text, just "align-right"
If there is block, in BS3:
Add "pull-right" to the element container
In BS4:
"float-right"
E.g. in BS4:
<div class="row">
<div class="col-md-6">
<h4>Status</h4>
<input type="checkbox" disabled checked data-toggle="toggle" data-onstyle="outline-success" data-offstyle="outline-danger">
</div>
<div class="col-md-3">
<h4>Max Demand </h4>
</div>
<div class="col-md-3 float-right">
<h4>172.21</h4>
</div>
</div>
You just need add class in last column like: text-left text-md-right.
I hope below snippet will help you.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css">
<div class="container border">
<div class="row">
<div class="col-md-6">
<h4>Status</h4>
<input type="checkbox" disabled checked data-toggle="toggle" data-onstyle="outline-success" data-offstyle="outline-danger">
</div>
<div class="col-md-3">
<h4>Max Demand </h4>
</div>
<div class="col-md-3 text-left text-md-right">
<h4 class="btn btn-warning">545</h4>
</div>
</div>
</div>
Just for the text, add text-right class after col-md-3
and for the entire column, add pull-right class after col-md-3 if you're using bootstrap-3
and for bootstrap-4 add float-right instead of pull-right class.
I am using Bootstrap 4. I am facing an odd issue. I am adding the html using the jquery. The div has call .col-md-9 d-flex. When the other div's are appened to main div (under parent col-md-9) one it overflows and takes whole page (width) and over ride the other div (col-md-3). The code is given as
<div class="container-fluid">
<div class="row">
<div class="col-md-9 filters-div d-flex"><!-- the dynamic code will append to this div-->
<div class="col-md-2 col-xs-6">
<div class="form-group">
<label>Date and time range:</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="far fa-clock"></i></span>
</div>
<input type="text" id="reservationdate" class="form-control float-right datetimepicker-input" data-toggle="datetimepicker" data-target="#reservationdate">
</div>
<!-- /.input group -->
</div>
<!-- /.form group -->
</div>
</div>
<div class="col-md-3 d-flex">
<div class="my-div">
<a href="javascript:void(0)" data-toggle="modal" data-target="#modal-default">
<i class="fas fa-filter"></i>Add Filters
</a>
Cancel
Submit
</div>
</div>
</div>
</div>
The jquery which produces the dom element is as follows
$(document).delegate(".add-filter","click",function(){
$val=$("#filter-add").val();
$text=$('#filter-add option:selected').text();
$new_text=$text.replace(/ /g, "-");
$html="<div class='col-md-2 col-xs-6 delete-all' id='"+$new_text+"'><div class='form-group'>";
$html+="<label>"+$text+":</label>";
$html+="<div class='input-group'>";
$html+="<input type='text' class='form-control float-right'><div class='input-group-prepend'><span class='input-group-text delete-filter' data-text='"+$text+"' data-value='"+$val+"'><i class='fas fa-trash'></i></span> </div></div>";
$html+="</div></div>";
$(".filters-div").append($html);
$("#filter-add option:selected").remove();
$('#filter-add').prop('selectedIndex',0);
});
Do let me know whats the issue. The example is here
UPDATE:
The screenshot is attached as follows
You can use flex-wrap to your div:
<div class="col-md-9 filters-div d-flex flex-wrap"><!-- the dynamic code will append to this div-->
Instead, if you don't want to wrap you can reduce the max-width of col-md-2:
.col-md-2 {
max-width: 12% !important;
}
Your issue is up to col-md-2: when you have much of them you get the problem.
I need to make this header exactly like the image below. With the text in the center and the 2 images on each side. I've tried everything and the only way I had success was making the hole header into a whole image (not good). By the way, it needs to be responsive to mobile access, as the whole page is (I'm using bootstrap). Here is my whole code (I guess the only important part is the <header> though):
<body>
<header>
<div class="row">
<div class="col-sm-2 col-xs-1"></div>
<div class="col-sm-8 col-xs-10">
<img class="img-responsive logoheader" src="files/Screenshot_1.png" alt=""/>
</div>
<div class="col-sm-2 col-xs-1"></div>
</div>
</header>
<div class="jumbotron">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-xs-1"></div>
<div class="col-sm-6 col-xs-10">
<center>
<h4>INSCRIÇÕES PARA EDUCAÇÃO INFANTIL - 0 ATÉ 5 ANOS</h4>
<h5>DECRETO 122/2017</h5>
</center>
<br>
<div id="dangerindex" class="alert alert-danger" style="display:none;"> </div>
<div id="warningindex" class="alert alert-warning" style="display:none;"> </div>
<form name="main-form" id="main-form" method="post" action="index2.php">
<label> NOME COMPLETO DA CRIANÇA:*</label>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input maxlength="100" onblur="this.value=this.value.toUpperCase()" type=text name="crianca-nome" id="criancaNome" value="" class="form-control" />
</div>
<label> DATA DE NASCIMENTO DA CRIANÇA:*</label>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
<input readonly style="background-color: white !important;" type="text" name="crianca-nascimento" id="crianca-nascimento" class="form-control datepicker">
</div>
<button class="btn btn-primary visible-md visible-lg" style="float:right;" type="button" onclick="ChecaIdade()">Próximo</button>
<button class="btn btn-primary btn-block visible-sm visible-xs" style="float:right;" type="button" onclick="ChecaIdade()">Próximo</button>
</form>
</body>
As you can see, the header is just a screenshot of what I want. How can I make it properly with CSS?
Here is the image (Screenshot_1.png):
And this is how my page looks like right now:
Edited based on comment.
Make your image logos the same dimension (I used 600 × 345px but tweak to your benefit).
Set your row container to flex to vertically center text to the logos.
Make img width:100% in your CSS to keep ratio on viewport resize.
Tweak .headerText font-size to your benefit.
Working Resizable Fiddle
With this setup you can maintain the row on mobile as well, considering it's 3 pictures, it may be too much to stack them vertically.
img {
width: 100%;
}
.headerText {
font-size: 9px;
line-height: 1.4;
display: flex;
flex:1;
align-items: center;
}
.flex {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
}
/* make text smaller on mobile */
#media (max-width: 767px) {
.headerText {
font-size: 9px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<header>
<div class="row flex">
<div class="col-xs-4">
<img class="img-responsive logoheader" src="https://i.imgur.com/wuEStaT.jpg" alt="" />
</div>
<div class="col-xs-4 text-center text-uppercase headerText">
<span>
prefeitura municipal de guaiba<br>
estado do rio grande do sul<br>
gestao 2017/2020<br>
secretaria municipal de educacao
</span>
</div>
<div class="col-xs-4">
<img class="img-responsive logoheader" src="https://i.imgur.com/NInC1cx.jpg" alt="" />
</div>
</div>
</header>
<div class="jumbotron">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-xs-1"></div>
<div class="col-sm-6 col-xs-10">
<center>
<h4>INSCRIÇÕES PARA EDUCAÇÃO INFANTIL - 0 ATÉ 5 ANOS</h4>
<h5>DECRETO 122/2017</h5>
</center>
<br>
<div id="dangerindex" class="alert alert-danger" style="display:none;"> </div>
<div id="warningindex" class="alert alert-warning" style="display:none;"> </div>
<form name="main-form" id="main-form" method="post" action="index2.php">
<label> NOME COMPLETO DA CRIANÇA:*</label>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input maxlength="100" onblur="this.value=this.value.toUpperCase()" type=text name="crianca-nome" id="criancaNome" value="" class="form-control" />
</div>
<label> DATA DE NASCIMENTO DA CRIANÇA:*</label>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
<input readonly style="background-color: white !important;" type="text" name="crianca-nascimento" id="crianca-nascimento" class="form-control datepicker">
</div>
<button class="btn btn-primary visible-md visible-lg" style="float:right;" type="button" onclick="ChecaIdade()">Próximo</button>
<button class="btn btn-primary btn-block visible-sm visible-xs" style="float:right;" type="button" onclick="ChecaIdade()">Próximo</button>
</form>
Step One: Divide your (Screenshot_1.png) image file
Firstly, you are going to need to divide your image (Screenshot_1.png) into 3 parts. In doing so, you will have 3 image files, as follows:
Image 1: Your left Emblem.
Image 2: Your central text.
Image 3: Your right logo.
In dividing your image into 3 parts, you will find that you will be able to ensure that they become responsive to the screen sizes they are displayed on. Both in terms of size and also in that they then 'stack' on top of each other on smaller devices, such as Mobile Phones.
Step Two: Bootstrap Installation:
Head over to Bootstrap and follow their guide on installing Bootstrap to your website. Once you have successfully installed Bootstrap, you will be able to access their CSS Classes, which will allow your website to become responsive.
Additional Resource: Bootstrap Grid Layout
Step Three: Modify your HTML Code:
If you have correctly installed the Bootstrap files, you can then replace your header code, with the below code. Don't forget to replace [Image 1], [Image 2] and [Image 3] with the correct Image SRC.
<header>
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">[Image 1]</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">[Image 2]</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">[Image 3]</div>
</div>
</header>
As a side note, it is worth knowing that each Row is made up of 12 'Columns'. When assigning a Column Number ('col-xs-4' etc), ensure that each row's columns add up to 12. The above should work fine but you would likely need to tinker with the numbers, in order to achieve the right column widths for your website.
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 having a very minor issue but i have been trying to fix it for few hours with no luck at all. I have a simple page that uses bootstrap. Following is the screenshot.
In this screenshot, I had my browser window maximized. As you can see the search bar is centered well and the names of 3 favorite players in the bottom are not. Now when i make the browser window size half of it. This is what i see.
Now the search bar no longer is center and the names of favorite players are centered. This is definitely not responsive as it should be.
Problem
I have identified two issues. One is that the search bar is somehow not releative and the names of the players are not. So I tried various css by making its div to absolute and relative and messed around with padding but no luck.
I am sure i am missing something here and this might be a stupid question but it would help me because i have been stuck on this for long while now.
I have uploaded my code on BOOTPLY
Following is my HTML code:
<div class="container-fluid">
<div class="row bg-success" style="background-color: #f6f5f1;padding-top:100px; padding-bottom:100px;">
<div class="row">
<div class="col-lg-1">
</div>
<div class="col-lg-10">
<div id="searchPage-small-title">NBA</div>
</div>
</div>
<div class="row">
<div class="col-lg-1">
</div>
<div class="col-lg-10">
<div id="searchPage-title">Player Portal</div>
</div>
</div>
<!-- <div class="row">
--> <div class="col-lg-4">
<div class="searchPage-box text-left">
<form role="form" class="form-inline" ng-submit="submit()">
<div class="form-group">
<div class="row">
<div class="col-lg-4">
<input type="text" class="searchPage-input" autocomplete="off" ng-model="selected" placeholder="Search Player" typeahead="sponsor as label(sponsor) for sponsor in sponsorList
| filter:$viewValue | limitTo:12" typeahead-editable="true" typeahead-min-length="2" required="" name="sponsorName">
</div>
<div class="col-md-1">
<!-- using Bootstrap default for button -->
</div>
</div>
</div>
</form>
</div>
</div>
<!-- </div> -->
</div>
<div class="row bg-warning" style="background-color: #eeede7; padding-bottom:100px;">
<div class="row">
<div class="col-lg-1">
</div>
<div class="col-lg-10">
<div id="searchPage-favorites-title" class="row">FAVORITES</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
</div>
<!-- this favorites are hard-coded for now for purposes of demo -->
<div class="col-sm-2 searchPage-favorites-item">
<i class="fa fa-star"></i>
Jordan
</div>
<div class="col-sm-2 searchPage-favorites-item">
<i class="fa fa-star"></i>
Lebron
</div>
<div class="col-sm-2 searchPage-favorites-item">
<i class="fa fa-star"></i>
Curry
</div>
</div>
</div>
</div>
I highly appreciate all suggestions and approaches.
do not copy, learn how it works by looking at this example
This absolute not the correct way but give you a small idea!
Any questions ?? comment away! :)
#searchPage-small-title {
color: rgba(128, 128, 128, 1);
font-size: 16px;
font-family: "Open Sans";
text-align: center;
font-weight: 700;
}
#searchPage-title {
color: rgba(128, 128, 128, 1);
font-size: 50px;
font-family: "Open Sans";
text-align: center;
}
.searchPage-box {
text-align: center;
}
.searchPage-input {
width: 80%;
border-style: solid;
border-radius: 6px;
border-color: rgba(192, 189, 178, 1);
height: 59px;
font-size: 18px;
text-indent: 32px;
}
.fa-star {
color: rgba(220, 118, 28, 1);
}
#searchPage-favorites-title {
color: rgba(128, 128, 128, 1);
font-size: 18px;
font-family: "Open Sans";
text-align: center;
font-weight: 400;
margin-top: 40px;
margin-bottom: 30px;
}
.searchPage-favorites-item {
color: rgba(128, 128, 128, 1);
font-size: 20px;
font-family: "Open Sans";
display: inline-block;
text-align: center;
font-weight: 800;
padding-top: 30px;
height: 115px;
width: 140px;
border: 1px solid #444;
margin: auto 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container-fluid">
<!--row I-->
<div class="row bg-success" style="background-color: #f6f5f1;padding-top:100px; padding-bottom:100px;">
<div class="col-lg-1">
</div>
<div class="col-lg-10">
<div id="searchPage-small-title">NBA</div>
</div>
<div class="col-lg-1">
</div>
</div>
<!--row II-->
<div class="row bg-success" style="background-color: #f6f5f1;padding-top:100px; padding-bottom:100px;">
<div class="col-lg-1">
</div>
<div class="col-lg-10">
<div id="searchPage-title">Player Portal</div>
</div>
<div class="col-lg-1">
</div>
</div>
<!-- row III -->
<div class="row" style="background-color: #eeede7; padding-bottom:100px;">
<div class="col-lg-12">
<div class="searchPage-box">
<form role="form" class="form" ng-submit="submit()">
<div class="form-group">
<input type="text" class="searchPage-input" autocomplete="off" ng-model="selected" placeholder="Search Player" typeahead="sponsor as label(sponsor) for sponsor in sponsorList
| filter:$viewValue | limitTo:12" typeahead-editable="true" typeahead-min-length="2" required="" name="sponsorName">
</div>
</form>
</div>
</div>
</div>
<!-- row IV -->
<div class="row bg-warning" style="background-color: #eeede7; padding-bottom:100px;">
<div class="col-lg-1">
</div>
<div class="col-lg-10">
<div id="searchPage-favorites-title">FAVORITES</div>
</div>
<div class="col-lg-1">
</div>
</div>
<!-- row V -->
<div class="row" style="background-color: #eeede7; padding-bottom:100px; text-align: center;">
<div class="col-lg-4 searchPage-favorites-item">
<i class="fa fa-star">Jordan</i>
</div>
<div class="col-lg-4 searchPage-favorites-item">
<i class="fa fa-star">Lebron</i>
</div>
<div class="col-lg-4 searchPage-favorites-item">
<i class="fa fa-star">Curry</i>
</div>
</div>
</div>
Edit:
The following div have the class col-lg-4 meaning the width if the available space will be 33,333333%. Also the first child of this div has text-left class. If you adjust col-lg-4 to col-lg-12 and the first child with text-left to text-center you will have the desire result.
Edit:
and alter the next css:
.searchPage-box {
/* padding-left: 590px; remove */
width: 100%;
margin-bottom: 60px;
border-radius: 0 0 0 0;
}
(from http://www.bootply.com/zYFA6mqMO1)
<div class="col-lg-4">
<div class="searchPage-box text-left">
<form role="form" class="form-inline" ng-submit="submit()">
<div class="form-group">
<div class="row">
<div class="col-lg-4">
<input type="text" class="searchPage-input" autocomplete="off" ng-model="selected" placeholder="Search Player" typeahead="sponsor as label(sponsor) for sponsor in sponsorList
| filter:$viewValue | limitTo:12" typeahead-editable="true" typeahead-min-length="2" required="" name="sponsorName">
</div>
<div class="col-md-1">
<!-- using Bootstrap default for button -->
</div>
</div>
</div>
</form>
</div>
</div>
Not at my computer now, so I will have to answer more fully in a bit, but one thing that jumps out to me: instead of having empty divs with bootstrap columns, use offsets; for example, col-lg-offset-1.
EDIT: Expanding my answer.
Here is a link to my forked version of your Bootply, showing my changes. The following is a small portion of the bootply:
<div class="row">
<div class="col-xs-10 col-xs-offset-1">
<div id="searchPage-small-title">NBA</div>
</div>
</div>
<div class="row">
<div class="col-xs-10 col-xs-offset-1">
<div id="searchPage-title">Player Portal</div>
</div>
</div>
Yuri's answer does a pretty good job of explaining the issues you're coming up against. If you're going to use Bootstrap, in general, you need to only use Bootstrap's layout classes to set your layout - adding custom positions and other things like that can really mess with the page, as you've seen.
I won't go into a detailed explanation of the changes I made, in the hopes that you can have a look and figure out what makes it work, but I do have some notes:
First, rather than lg, it's better to define at least an xs behavior, and work your way up to bigger screens. By only defining col-lg-x classes for most of your items, you're not defining a responsive layout for viewports below that size.
Second, there were a couple places where you had row classes nested directly inside other row classes. This can also cause issues. The intended method of use is
<div class="row">
<div class="col-xs-x">
<!-- if you need to define another grid inside the above div,
start another row -->
<div class="row">
</div>
</div>
</div>
Third, as I mentioned in my initial response, rather than adding empty divs with column classes (which will be collapsed automatically), use col-{size}-offset-x classes on the first div in the row (in addition to the regular col-{size}-x class). Also, related to alignment: rather than using text-align: center, you can just add bootstrap's text-center class to what you want to center.
The only issue in my version is that the favorites box overlap on a small screen - this is because of their defined size. I'll leave that to you to fix.
I hope this answer helped you, and please let me know if you have any questions about my answer.
Heres what you should note:
.searchPage-box {padding-left: 590px}
Using padding-left and setting pixels is a bad idea, because when the screen size does change, pixels don't auto change. So if you want to center it, try this:
margin-left: auto !important;
margin-right: auto !important;
display: block !important;
width: 30% !important;
Those go under
.searchPage-box
Hope I helped :)
Your div around the search bar this one:
uses your css class searchPage-box, that one is using padding left 590px
.searchPage-box {
padding-left: 590px;
width: 100%;
margin-bottom: 60px;
border-radius: 0 0 0 0;
}
This cause 590px to the left of the search bar to be unused.
<div class="container-fluid">
<div class="row bg-success" style="background-color: #f6f5f1;padding-top:100px; padding-bottom:100px;">
<div class="row">
<div class="col-lg-10 col-lg-push-1">
<div id="searchPage-small-title">NBA</div>
</div>
</div>
<div class="row">
<div class="col-lg-1">
</div>
<div class="col-lg-10">
<div id="searchPage-title">Player Portal</div>
</div>
</div>
<!-- change in code is here -->
**<div class="row">
<div class="col-lg-6 col-md-6 col-sm-4 col-md-offset-2 col-lg-offset-3 col-sm-offset-1 text-left">**
<form role="form" class="form-inline" ng-submit="submit()">
<div class="form-group">
<div class="row">
<div class="col-lg-4">
<input type="text" class="searchPage-input" autocomplete="off" ng-model="selected" placeholder="Search Player" typeahead="sponsor as label(sponsor) for sponsor in sponsorList
| filter:$viewValue | limitTo:12" typeahead-editable="true" typeahead-min-length="2" required="" name="sponsorName">
</div>
<div class="col-md-1">
<!-- using Bootstrap default for button -->
</div>
</div>
</div>
</form>
</div>
</div>
<!-- </div> -->
</div>
<div class="row bg-warning" style="background-color: #eeede7; padding-bottom:100px;">
<div class="row">
<div class="col-lg-1">
</div>
<div class="col-lg-10">
<div id="searchPage-favorites-title" class="row">FAVORITES</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
</div>
<!-- this favorites are hard-coded for now for purposes of demo -->
<div class="col-sm-2 searchPage-favorites-item">
<i class="fa fa-star"></i>
Jordan
</div>
<div class="col-sm-2 searchPage-favorites-item">
<i class="fa fa-star"></i>
Lebron
</div>
<div class="col-sm-2 searchPage-favorites-item">
<i class="fa fa-star"></i>
Curry
</div>
</div>
</div>
</div>
You are using col-sm-2 on the footer div but you lose responsive behaviour when you set width:140px in .searchPage-favorites-item.
Remove that rule and .col-sm-4 and use .col-sm-offset-3 instead:
<div class="col-sm-2 col-sm-offset-3 searchPage-favorites-item">
<i class="fa fa-star"></i>
Jordan
</div>
<div class="col-sm-2 searchPage-favorites-item">
<i class="fa fa-star"></i>
Lebron
</div>
<div class="col-sm-2 searchPage-favorites-item">
<i class="fa fa-star"></i>
Curry
</div>
or better
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<div class="row">
<div class="col-sm-2 col-sm-offset-3 searchPage-favorites-item"><i class="fa fa-star"></i> Jordan</div>
<div class="col-sm-2 searchPage-favorites-item"><i class="fa fa-star"></i> Lebron</div>
<div class="col-sm-2 searchPage-favorites-item"><i class="fa fa-star"></i> Curry</div>
</div>
</div>
</div>
For what concerns your form, if you want to have it centered and you have 1 column at end row, you have to have one at the beginning too (or you set offset-1)
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<input class="searchPage-input" autocomplete="off" ng-model="selected" placeholder="Search Player" typeahead="sponsor as label(sponsor) for sponsor in sponsorList
| filter:$viewValue | limitTo:12" typeahead-editable="true" typeahead-min-length="2" required="" name="sponsorName" type="text">
</div>
<div class="col-md-1">
<!-- using Bootstrap default for button -->
</div>
</div>
Or just use .col-lg-12 on it
Remember: with bootstrap you rarely have to deal with layout positioning in your custom css, since you can obtain a lot just using its classes. You should just style colors, shadows, text and things like these