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;
}
Related
I am just learning how to use css and bootstrap to create an website based on a psd template, problem is that i cant keep my search box inside the container and it stays in the bottom of it.
Here is my code
.search-area {
margin-top: 3px;
text-align: right;
}
.search-area input {
background: #333333;
color: #ffffff;
border: 0px solid;
}
<body>
<div id="header-area1">
<div class="container">
<div class="top-header col-12 bg-succes">
<div class="left-header col-8">
<div class="feed-area">
<ul>
<li> Sign Up</li>
<li> Login</li>
<li> Rss Feed</li>
<li id="last"> Archived News</li>
</ul>
</div>
<div class="right-header col-4">
<div class="search-area">
<form action="">
<input type="textplaceholder=" Search...">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
I rewrote your code to fix it. do not forget to user "row" class out of your columns in bootstrap
<div id="header-area1">
<div class="container">
<div class="top-header col-12 bg-succes">
<div class="row">
<div class="left-header col-8">
<div class="feed-area">
<ul>
<li> Sign Up</li>
<li> Login</li>
<li> Rss Feed</li>
<li id="last"> Archived News</li>
</ul>
</div>
</div>
<div class="right-header col-4">
<div class="search-area">
<form action="">
<input type="textplaceholder=" Search...">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
Update my answer missing of row before col
.search-area {
margin-top: 3px;
text-align: right;
}
.search-area input {
background: #333333;
color: #ffffff;
border: 0px solid;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<body>
<div id="header-area1">
<div class="container">
<div class="top-header row bg-succes">
<div class=" col-8">
<div class="feed-area">
<ul>
<li> Sign Up</li>
<li> Login</li>
<li> Rss Feed</li>
<li id="last"> Archived News</li>
</ul>
</div>
</div>
<div class=" col-4">
<div class="search-area">
<form action="">
<input type="text" placeholder=" Search...">
</form>
</div>
</div>
</div>
</div>
</div>
</body>
Use this HTML structure for right align to searchbox.
Add col-6 with feed-area class. And instead os this <div class="left-header col-8"> use this <div class="left-header row">
<div id="header-area1">
<div class="container">
<div class="row">
<div class="top-header col-12 bg-succes">
<div class="left-header row">
<div class="feed-area col-6">
<ul>
<li>
Sign Up
</li>
<li>
Login
</li>
<li>
Rss Feed
</li>
<li id="last">
Archived News
</li>
</ul>
</div>
<div class="right-header col-4">
<div class="search-area">
<form action="">
<input type="textplaceholder=">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.search-area {
margin-top: 3px;
text-align: right;
}
.search-area input {
background: #333333;
color: #ffffff;
border: 0px solid;
}
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">
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.
Which class i need to use for tabbed panel? Is there one?
i do the following and looks bad :-(
A tabbed navigation + a panel with and 0 padding between them-
<div id="dashboardheader" class="container" style="padding-top: 20px;">
<ul class="nav nav-tabs tab-pane">
<li class="active">Dashboard</li>
</ul>
</div>
<div id="dashboardpanel " style="padding-top: 0px">
<div class="panel panel-primary container" style="padding-top: 30px;">
<div class="row">
<div class="col-md-offset-2 col-md-8 col-md-offset-2">
<div class="row">
<img src="..\..\Content/Images/Dashboard/fgh.png" class="btn btn-lg" role="button" onclick="OpenDialog()" />
<img src="..\..\Content/Images/Dashboard/fgh.png" class="btn btn-lg" role="button" />
<img src="..\..\Content/Images/Dashboard/fgh.png" class="btn btn-lg" role="button" />
<img src="..\..\Content/Images/Dashboard/fgh.png" class="btn btn-lg" role="button" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-8 col-md-offset-2">
<div class="row">
<img src="..\..\Content/Images/Dashboard/fgh.png" class="btn btn-lg" role="button" />
<img src="..\..\Content/Images/Dashboard/fgh.png" class="btn btn-lg" role="button" />
<img src="..\..\Content/Images/Dashboard/fgh.png" class="btn btn-lg" role="button" />
</div>
</div>
</div>
</div>
</div>
whats the alternate?
I think what you want is just the regular bootstrap tabs
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
</div>
Demo in jsFiddle
With a little bit of styling, you can get it to look how you want:
For V4, you'll want to style with the .nav-tabs class and also invoke the tab JavaScript plugin
Here's some simple less you can add that allows you to include .nav.nav-tabs inside a .panel .panel-heading
An example codepen : http://codepen.io/anon/pen/utGaK
IMHO it doesn't quite look as "clean" as the components are when used independently w/o additional styles..
I've tested it with .panel-title too using .pull-right on the .nav. While it worked I found it best to add .clearfix to the header as the tabs are 1/2px too tall ATM. Should be simple to resolve it.
Here's the code I use in the above example.
For example :
<div class="panel panel-default">
<div class="panel-heading">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
</div>
<!-- Tab panes + Panel body -->
<div class="panel-body tab-content">
<div class="tab-pane active" id="home">HOME</div>
<div class="tab-pane" id="profile">PROFILE</div>
<div class="tab-pane" id="messages">MESSAGES</div>
<div class="tab-pane" id="settings">SET</div>
</div>
</div>
This is the less :
// Need to compensatve for padding in panel-heading
// Must be a way to invert this
// variable - #panel-heading-padding.
#panel-heading-padding-negate: -10px -15px;
.panel {
.panel-heading {
.nav-tabs {
margin:#panel-heading-padding-negate;
border-bottom-width:0;
> li {
> a {
// re-apply the original padding
padding:#panel-heading-padding;
margin-bottom:1px;
border:solid 0 transparent;
&:hover {
border-color: transparent;
}
}
&.active > a {
&,
&:hover,
&:focused {
border:solid 0 transparent;
}
}
}
}
}
}
UPDATE
I've added the following to the li definition and removed the margin-right & border-radius on the > li > a so that when I pull the nav to the right of the header it fits & looks cleaner.
&:first-child > a {
border-top-left-radius:#panel-border-radius;
}
&:last-child > a {
border-top-right-radius:#panel-border-radius;
}
Here's an updated codepen : http://codepen.io/anon/pen/hJsEC
There's a Bootsnipp snippet that does this: http://bootsnipp.com/snippets/MaA0A
It contains CSS to allow embedding tabs in the panel header like this:
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<!--...-->
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<!--...-->
</div>
</div>
</div>
Result:
Found a simple styling solution based on Andrew Scott's html structure:
.panel-heading>.nav-tabs {
border-bottom: none;
margin-bottom: -10px;
}
<ul class="nav nav-tabs ">
<li class="active" > One </li>
<li > Two <li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane fade in active" id="One">
This is one
</div>
<div class="tab-pane fade " id="Two">
This is Two
</div>
</div>
I have some problem in bootstrap, I develope website but after completation of website client say they dont want to responsive website.
So, I first fix the .container width to 960px !important;
It will works..!! But Problem is I am also using .row class every where row class is making responsiveness which its contains..
I want 100% width background at footer but when I resize browser & scroll horizontally it will removes the background color.
What can I do...
See Website : Snapshot 1
When browser resize then see Whats the problem occure : Snapshot 2
my html code is written in bootstrap 3 :
<footer>
<div class="row footercolor">
<div class="container">
<div class="row">
<div class="col-xs-2 ">
<div class="row">
<h5 class="undr footertitle">Lorem Ipsum</h5>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<h5 class="undr footertitle">QUICK LINKS</h5>
<div class="col-xs-6">
<ul class="footerlist list-group">
</ul>
</div>
<div class="col-xs-6">
<ul class="footerlist list-group">
</ul>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="row">
<h5 class="undr footertitle">OUR NEIGHBORHOODS</h5>
<div class="col-xs-6">
<ul class="footerlist list-group">
</ul>
</div>
<div class="col-xs-6">
<ul class="footerlist list-group ">
</ul>
</div>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<h5 class="undr footertitle">GET WEEKLY LISTING UPDATES</h5>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon btn-ftrbtn">Add Me</span>
</div>
</div>
<div class="row"><br/></div>
<div class="row">
<ul class="list-unstyled list-inline pull-right">
<li><img src="img/fb.png"></li>
<li><img src="img/twitter.png"></li>
<li><img src="img/pintrest.png"></li>
</ul>
</div>
</div>
</div>
</div>
</div> <!-- /container -->
</footer>
& My CSS Code is :
.footercolor {
background-color: #5e6872;
}
.footer{color:#c6c6c9}
.footertitle {
font-family: 'myriad_prosemibold_condensed' !important;
font-size: 13px!important;
color: #fff !important;
letter-spacing: 0.5px;
}
.footerlist li a {
font-family: 'myriad_prolight_semicondensed' !important;
font-size: 12px!important;
color: #c6c6c9 !important;
text-decoration: none
}
.footerlist li a:hover {
color: #fff !important;
cursor: pointer
}
.row {
margin-left: 0 !important;
margin-right: 0 !important;
}
.container{min-width:960px !important;}
At the last Please Give me solution for that...
Any Help will be appreciated...
Add the below code to your CSS file will fix the issue.
html, body {
min-width:960px;
}
You have incorrect markup for bootstrap mate....
Use container > row > span
Instead of :
<div class="row footercolor">
<div class="container">
Order should be :
<div class="container footercolor"> <!-- notice the reverse order now -->
<div class="row ">