I got the following code. When I resize my browser window the button goes on the second row.
How can I keep the button on the same line?
index.html
<div class="row">
<div class="col-md-7 col-md-offset-3">
...
<section>
<div class="row">
<div class="col-sm-9">
<ul class="nav nav-pills text-center">
<li><a href>Description</a>
</li>
<li><a href>Specifications</a>
</li>
<li><a href>Reviews</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<button ng-show="product.canPurchase" class="btn btn-primary pull-right buy-btn">Add to Cart</button>
</div>
</div>
</section>
...
</div>
</div>
custom.css
#media all and (max-width:480px) {
.buy-btn { width: 100%; display:block; }
}
before resizing
after resizing
and this is what I have on the minimum window width(fully collapsed)
you're using <div class="col-sm-9"> and <div class="col-sm-3">
this means that when the screen width is less than 768px it will break to col-12's
instead use <div class="col-xs-9"> and <div class="col-xs-3">
Related
I am trying to show the screen like in the image
list inside a container
the problem is the whatever I do, the list is on the bottom of the container like here
the HTML:
<div class="container" ng-init="getCartItems()">
<div class="hidden-xs">
<div class="">
<div class="title">סיכום הזמנה</div>
</div>
</div>
<div class="row">
<div ng-include="'templates/cart.html'"></div>
<div class="subTotalTabs">
<div class="col-md-3 col-xs-12">
<ul class="list-unstyled text-center">
<li>הוספת מבצע</li>
<li><a ng-click="addToCart()" class="clickable btn btn-lg borderBox padTop5 padBtm5 f22">הוספת פיצה</a></li>
<li>הוספת שתייה</li>
<li>מוצרים נלווים</li>
<li><a ng-click="clearCart()" class="my-btn-sqr my-btn-sqr-danger padTop5 padBtm5 f22">רוקן עגלה</a></li>
</ul>
</div>
</div>
</div>
</div><!-- /row -->
</div>
How can I fix this? Thanks!
`
I am trying to understand how bootstrap lays out the divs and why my layout does not render as I expected it to.
I am attempting to use boostrap's grid system to layout out two divs of width 5 columns (w/ the pink background) with a div separating them of width 2 columns (the black line).
When the outermost div shrinks beyond a certain amount, the inner divs no longer all fit contiguously, as shown below. This is not due to the screen size suprassing one of the cuttoffs (i.e. going from medium to small).
Why does this happen? Isn't bootstrap supposed to make sure that the div's shrink proportionally to their column widths?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm-12">
<div class="row">
<div class="col-sm-12 text-center filtersectionheader">
Course Level
</div>
</div>
<div class="row">
<!--Left div-->
<div class="col-sm-5" id="randompink">
<div class="row">
<div class="checkbox center-inner">
<label>
<input type="checkbox"> <small id="levelcheckboxtext">Minimum</small>
</label>
</div>
</div>
<div class="row">
<div class="dropdown center-inner">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">2000
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>HTML
</li>
<li>CSS
</li>
<li>JavaScript
</li>
</ul>
</div>
</div>
</div>
<!-- End of Left div-->
<!--Small Black Line-->
<div class="col-sm-2 top45" id="shorthline"></div>
<!--End of Small Black line-->
<!--Right div-->
<div class="col-sm-5" id="randompink">
<div class="row">
<div class="checkbox center-inner">
<label>
<input type="checkbox"><small id="levelcheckboxtext">Maximum</small>
</label>
</div>
</div>
<div class="row">
<div class="dropdown center-inner">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">2000
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>HTML
</li>
<li>CSS
</li>
<li>JavaScript
</li>
</ul>
</div>
</div>
</div>
<!--End of Right Div-->
</div>
</div>
I have this structure:
<div class="container"><div class="row">
<div class="col-sm-10 col-xs-12">
<input id="searchBar">
</div>
<div class="col-sm-2">
<ul class="nav nav-pills nav-stacked">
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
</ul>
</div>
</div></div>
and I'm trying to hide the right navbar on mobile screens. I set it to xs-hidden, but it still shows up.
Is there a way to hide a navbar on xs screens?
Use .hidden-xs css class (not .xs-hidden).
<div class="container hidden-xs"><div class="row">
<div class="col-sm-10 col-xs-12">
<input id="searchBar">
</div>
<div class="col-sm-2">
<ul class="nav nav-pills nav-stacked hidden-xs">
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
</ul>
</div>
</div></div>
To help others and you reference the Bootstrap documentation "Responsive utilities"
As pointed out by Nicolapps you would use .hidden-xs
<div class="container">
<section class="row"
<div class="hidden-xs col-sm-10">
<p>content</p>
</div>
<div class="hidden-xs col-sm-2">
<p>content</p>
</div>
</section>
</div>
You can try something llike this stuff
you should set icon pointer events as none
.container {
position: relative
}
i {
position: absolute;
top: npx;
left: npx;
pointer-events: none;
}
select {
font-size: 0;
}
Dropdown1 and Dropdown2 must float to right. Paging must be to the right.
Paging content may reduce and dropdown1 and 2 must adjust accordingly. I tried different ways but unable to get the solution. In mobile device all the three divs must be centered.
We are using bootstrap. Divs are as follows
<div class="row">
<div class="col-md-3 col-lg-3 col-sm-3 col-xs-12 alpha omega">
<!-- Title -->
</div>
<div class="col-md-6 col-lg-6 col-sm-6 col-xs-12 alpha omega">
<div style="float:right">
<ul class="nav">
<li class="dropdown">
Drop Down 2<b class="caret"></b>
<ul class="dropdown-menu " style="text-transform:uppercase;">
<li data-filterkind="$p" data-filtervalue="DESC">
<a href="./" >1</a>
</li>
<li data-filterkind="$p" data-filtervalue="ASC">
<a href="./" >2</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="pull-right">
<!-- Drop down 2 -->
</div>
</div>
</div>
<div class="col-md-3 col-lg-3 col-sm-3 col-xs-12 alpha omega">
<div style="float:right" >
<!-- Pagination -->
</div>
</div>
</div>
Please suggest
So like this?
HTML
<div class="container">
<div class="row">
<div class="col-sm-6 text-center heading1">
<p> Heading </p><!-- Heading -->
</div>
<div class="col-sm-6">
<div class="row">
<div class="float text-center">
<div class="col-sm-4">
<p> DD1</P><!-- Drop down 1 -->
</div>
<div class="col-sm-4">
<p> DD2</P><!-- Drop down 2 -->
</div>
<div class="col-sm-4">
<p> PAGINATION</P><!-- pagination -->
</div>
</div>
</div>
</div>
</div>
</div>
Then add the following additional stuff to your custom CSS:
#media (min-width: 768px)
{
.float
{
float: right;
}
.heading1
{
text-align: left;
}
}
FYI - The above is bootstrap, but the additional classes are needed to get the custom result you want.
My pen: http://codepen.io/helloworld/pen/yyoJGR
Why is the white separater and the list-grouping flowing through the divs or the parent row?
<div class="container columnStyle">
<div class="row">
<div class="row-same-height">
<div class="col-xs-3 col-xs-height">
<img class="img-responsive" src="http://s7.postimg.org/agarkavmj/whoiswho.png"></img>
</div>
<div class="col-xs-9 col-xs-height" >
<div class="container">
<div class="row">
<div class="page-header">
<h1>Who is who
<p>
<small>Organization & Processes</small>
</p>
</h1>
</div>
</div>
</div>
<div class="container">
<div class="row">
<ul class="list-group">
<li class="list-group-item">Org Charts </li>
<li class="list-group-item">GAM / KAM Charts</li>
<li class="list-group-item">Process flow</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
.columnStyle{
background: #006AB3;
}
Because you use the class .containermultiple times.
This class has a fixed width of 1170px;
.container {
width: 1170px;
}
you should have only 1 .containerfor the wrapper and then, inside of it, remove the other .container and just use .row
See it in action : http://codepen.io/anon/pen/ogeLRb