I have an app that uses Bootstrap. In this app, I have a list of items that I can reorder. Currently, my list looks like this:
<div class="col-xs-12">
<ul id="choices" class="list-unstyled">
<li>
<i class="fa fa-reorder"></i>
<div class="form-group">
<input type="text" class="form-control col-md-8">
</div>
<i class="fa fa-times-circle"></i>
</li>
<li>
<i class="fa fa-reorder"></i>
<div class="form-group">
<input type="text" class="form-control col-md-8">
</div>
<i class="fa fa-times-circle"></i>
</li>
<li>
<i class="fa fa-reorder"></i>
<div class="form-group">
<input type="text" class="form-control col-md-8">
</div>
<i class="fa fa-times-circle"></i>
</li>
</ul>
</div>
I'm trying to make this list such that each item fills the entire width of the entire space. In other words, I want it to looks like this:
div
+---------------------------------------------------------------------------+
| |
| = _____________________________________________________________________ x |
| = _____________________________________________________________________ x |
| = _____________________________________________________________________ x |
| |
+---------------------------------------------------------------------------+
At the moment, when I do this, I get the input field on a different line and I can't get each list item to fill the available space. What am I missing?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="col-xs-12">
<ul id="choices" class="list-unstyled">
<li>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-reorder fa-fw"></i></span>
<input type="text" class="form-control col-md-8">
<span class="input-group-addon"><i class="fa fa-times-circle fa-fw"></i></span>
</div>
</li>
<li>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-reorder fa-fw"></i></span>
<input type="text" class="form-control col-md-8">
<span class="input-group-addon"><i class="fa fa-times-circle fa-fw"></i></span>
</div>
</li>
<li>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"><i class="fa fa-reorder fa-fw"></i></span>
<input type="text" class="form-control col-md-8">
<span class="input-group-addon"><i class="fa fa-times-circle fa-fw"></i></span>
</div>
</li>
</ul>
</div>
you can add icons to each side of an input with bootstrap
take a look at this:
bootstrap input addons
see following for an example with font awesome icons (go to bootstrap 3 examples)
font awesome examples
You can achieve this using float with an explicit width on your icon, and adding overflow:hidden to the input codepen
HTML
<ul id="choices" class="list-unstyled">
<li>
<i class="fa fa-reorder left"></i>
<i class="fa fa-times-circle right"></i>
<div class="middle"><input type="text" class="form-control"></div>
</li>
</ul>
CSS
.left {
width: 50px;
float: left;
}
.right {
width: 50px;
float: right;
}
.middle {
overflow: hidden;
}
Try to use bootrstrap inline forms
<li class="form-inline">
<div class="form-group">
<i class="fa fa-reorder"></i>
<input type="text" class="form-control col-md-8">
<i class="fa fa-times-circle"></i>
</div>
</li>
try col-xs-12 and width attribute in styles
Related
I have a footer on my page, with a Newsletter signin form.
The input-group-addon is getting bigger than the input itself ONLY on intern pages, the index page displays correctly, even with the same CSS file, and same footer structure.
Again, same structure, same css...
This is my whole foooter structure:
<!-- FOOTER -->
<footer>
<div class="footer" id="footer">
<div class="container">
<div class="row">
<div class="col-md-2 col-xs-6">
<h3>Tecnologia</h3>
<ul>
<li> Servidores</li>
<li> Programação</li>
<li> Segurança</li>
<li> Backups</li>
</ul>
</div>
<div class="col-md-2 col-xs-6">
<h3>Suporte</h3>
<ul>
<li> Helpdesk </li>
<li> Painel de controle </li>
<li> F.A.Q </li>
<li> Contatos </li>
</ul>
</div>
<div class="col-md-2 col-xs-6">
<h3>Engine</h3>
<ul>
<li> Valores </li>
<li> Missão </li>
<li> Nosso time </li>
<li> Política de uso </li>
</ul>
</div>
<div class="col-md-2 col-xs-6">
<h3>Produtos</h3>
<ul>
<li> Sistemas </li>
<li> Websites </li>
<li> Mídias Sociais </li>
<li> Hospedagem </li>
</ul>
</div>
<div class="col-md-4 col-xs-12">
<h3>Newsletter</h3>
<ul>
<li>
<form action="" method="post" role="form">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
<input class="form-control" type="text" id="" name="" placeholder="digite seu e-mail">
</div>
<input type="submit" value="Cadastrar" class="btn btn-large btn-primary" style="margin-top: 10px;" />
</form>
</li>
</ul>
<div>
<i id="social-fb" class="fa fa-facebook-square fa-2x social"></i>
<i id="social-tw" class="fa fa-twitter-square fa-2x social"></i>
<i id="social-yt" class="fa fa-youtube-square fa-2x social"></i>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<p class="pull-left">Copyright © 2017 - ENGINE Sistemas. All rights reserved | ENGINE Sistemas</p>
</div>
</div>
</footer>
The footer is responsive too...
Any help? Thanks!
How to make 100% width of the search input in navbar?
The field is limited in width:
<nav class="navbar navbar-light navbar-dark bg-inverse">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<form class="form-inline ">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</li>
<li class="nav-item">
<a class="nav-link" href="#">User Name</a>
</li>
</ul>
</nav>
Here is the fiddle:
https://jsfiddle.net/Dieselnick/tdoz2o4d/
Updated 2019
As of Bootstrap 4 the Navbar is flexbox so creating a full-width search input is easier. You can simply use w-100 and d-inline utility classes:
<form class="mx-2 my-auto d-inline w-100">
<div class="input-group">
<input type="text" class="form-control" placeholder="...">
<span class="input-group-append">
<button class="btn btn-outline-secondary" type="button">GO</button>
</span>
</div>
</form>
http://www.codeply.com/go/sbfCXYgqoO
Here's another example with the search input outside of the collapsing navbar:
<!-- search input not in navbar collapse -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="d-flex flex-grow-1">
Codeply
<form class="mr-2 my-auto w-100 d-inline-block order-1">
<div class="input-group">
<input type="text" class="form-control border border-right-0" placeholder="Search...">
<span class="input-group-append">
<button class="btn btn-outline-light border border-left-0" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
</div>
<button class="navbar-toggler order-0" type="button" data-toggle="collapse" data-target="#navbar7">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse flex-shrink-1 flex-grow-0 order-last" id="navbar7">
<ul class="navbar-nav">
..
</ul>
</div>
</nav>
http://www.codeply.com/go/sbfCXYgqoO
And, finally another example that varies the width of the search on desktop/mobile (only full width on mobile) from my answer here
Bootstrap 3 (original answer)
You can use the text-truncate hack on the last navbar li like this..
<li class="text-truncate">
<form class="input-group">
<input class="form-control" name="search" placeholder="Search Here" autocomplete="off" autofocus="autofocus" type="text">
<div class="input-group-btn">
<button class="btn btn-outline-success" type="submit">Search</button>
</div>
</form>
</li>
In Bootstrap 4, text-truncate will set:
overflow: hidden;
white-space: nowrap;
This enables the search form to fill the remaining width and not wrap.
Demo http://www.codeply.com/go/22naSu3c0E
Another option is to use table-cell:
<form>
<div class="table-cell"> </div>
<div class="table-cell fill-width">
<input class="form-control" name="search" placeholder="Search Here" autocomplete="off" autofocus="autofocus" type="text">
</div>
<div class="table-cell">
<button class="btn btn-outline-success" type="submit">Search</button>
</div>
</form>
http://www.codeply.com/go/JdbPvotSXg
Again, a question best descriped by JSFiddle.
<div>
<span style='cursor:pointer; float:right'>
<div class="btn-group pull-right">
<button id = 'majic' type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span>
</button>
<ul style='padding:10px' class="dropdown-menu">
<li class="dropdown-submenu">
<input id="full_package_filter" type="checkbox" name="vehicle" checked>Foo<span class='useful_stat'></span>
</li>
<li class="dropdown-submenu">
<div class="container">
<span>Number:</span>
<span>
<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>
</span>
<span><input class="form-control input-sm" id="inputsm" type="text"></span>
</div>
</li>
</ul>
</div>
</span>
</div>
My goal is to place a small input box next to radio buttons (on one line). I guess, I have to use Bootstrap grid system, but I just can't figure out how. All my attempts yield crazy results. Any ideas ?
Were you looking for something like this?
<div>
<span style='cursor:pointer; float:right'>
<div class="btn-group pull-right">
<button id = 'majic' type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-cog"></span>
</button>
<ul style='padding:10px' class="dropdown-menu">
<li class="dropdown-submenu">
<input id="full_package_filter" type="checkbox" name="vehicle" checked>Foo<span class='useful_stat'></span>
</li>
<li class="dropdown-submenu">
<div class="container">
<div class="row">
<div class="col-md-3">
<span>Number:</span>
<span>
<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>
</span>
</div>
<div class="col-md-3">
<span><input class="form-control input-sm" id="inputsm" type="text"></span>
</div>
<div class="col-md-6"></div>
</div>
</div>
</li>
</ul>
</div>
</span>
</div>
Let me know if this helped. :)
<header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner">
<div id="header" class=" container-fluid">
<div class="navbar-header">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img title="DropInn" src="logo/logo.png" width="137" height="45">
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li>
<div class="search" style="">
<form id="search_form1" action="http://products.cogzidel.com/airbnb-clone/search" method="post" class="searchform_head">
<i class="fa fa-search heaericon"></i>
<input type="text" id="searchTextField" name="searchbox" class="searchbox" value="Where are you going?" onblur="if (this.value == ''){this.value = 'Where are you going?'; }" onfocus="if (this.value == 'Where are you going?') {this.value = ''; }" onKeyPress="return disableEnterKey(event)" placeholder="Where are you going?" />
<div id="map-canvas"></div>
<input type="hidden" id="lat" name="lat" value="">
<input type="hidden" id="lng" name="lng" value="">
<div class='advanced_search' id="advanced_search" style='display: none; position: absolute;
z-index: 2147483647; background:#FCFCFC; border: 1px solid #CCCCCC; padding: 10px; opacity: 1;width: 240px;top:37px;'>
<label class="checkin_search">
Check in
<div id="checkinWrapper" class="input-wrapper">
<input id="checkindate2" class="check_wrap checkin search-option ui-datepicker-target" type="text" placeholder="Check in" name="checkin" autocomplete="off" readonly>
</div>
</label>
<label class="checkout-detail_search">
Check out
<div id="checkoutWrapper" class="input-wrapper">
<input id="checkoutdate2" class="check_wrap checkout search-option ui-datepicker-target" type="text" placeholder="Check out" name="checkout" autocomplete="off" readonly>
</div>
</label>
<div class="clearfix"></div>
<p class="filter_header">Room type</p>
<!-- Search filter content is below this -->
<div class="clearfix"></div>
<ul class="search_filter_content">
<li class="clearfix checkbox">
<input class="checkbox_filter" type="checkbox" value="Entire home/apt" name="room_types1" id="room_type_0">
<label class="checkbox_list" for="room_type_0"> Entire home/apt</label>
</li>
<li class="clearfix checkbox">
<input class="checkbox_filter" type="checkbox" value="Private room" name="room_types2" id="room_type_1">
<label class="checkbox_list" for="room_type_1"> Private room</label>
</li>
<li class="clearfix checkbox">
<input class="checkbox_filter" type="checkbox" value="Shared room" name="room_types3" id="room_type_2">
<label class="checkbox_list" for="room_type_2">Shared room</label>
</li>
</ul>
<div class="clearfix"></div>
<!-- <button id="submit_location" class="btn_dash" style=" font-size: 12px;margin: 10px 0; padding: 5px 11px;" type="submit" value="Search" name="Submit" >-->
<!--<i class="fa fa-search submitloc"></i>-->
<!--<img src="http://products.cogzidel.com/airbnb-clone//css/templates/blue/images/search_icon1.png" />-->
<button id="submit_location" class="btn_dash" type="submit" value="Search" name="Submit">
<i class="fa fa-search submitloc"></i>
<!--<img src="http://products.cogzidel.com/airbnb-clone//css/templates/blue/images/search_icon1.png" />-->
Find A Place </button>
<label class="btn_dash" id="close_search">
Close </label>
</div>
</form>
</div>
</li>
</form>
</li>
<li id="subnavigation" class="dropdown browse-dropdown">
<a class="dropdown-toggle header_link" href="#" data-toggle="dropdown">Browse <span class="caret"></span></a>
<ul class="dropdown-menu sub-menu browse-submenu">
<li><!-- <i class="icon-popular"> </i>--> <i class="fa fa-heart"></i> Popular</li>
<li><a class="friends" href="home/friends/index.html"><i class="icon-friends"> </i> Friends</a></li>
<li><a class="map-neigh" href="home/neighborhoods/index.html"><!--<i class="icon-neighborhoods"> </i> --> <i class="fa fa-map-marker"></i>Neighborhoods</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="rightsign sign1">Sign Up</li>
<li class="rightsign sign1">Sign In</li>
<li id='view_help' style='float:left;'>
<li id='view_help' class="dropdown browse-dropdown help_book">
<a class="dropdown-toggle view_help1" data-toggle="dropdown" href="#">Help <span class="caret"></span></a>
<ul class="dropdown-menu sub-menu browse-submenu">
<li>How do i sign up?</li>
<li> Need help on this page?
</li>
</ul>
</li>
<li class="lisyourspace"> <a class="btn yellow" href="rooms/new.html"><span>List Your Space</span></a> </li>
<!--<li class="listyourspace_menu"> <a class="yellow btn" href="http://products.cogzidel.com/airbnb-clone/rooms/new"><span>List Your Space</span></a> </li>-->
</nav>
</div>
</header>
I need CSS code for this display exact like Airbnb home page. Somebody please help to get this. I tried so many times, but failed to design that properly. How to do the full width grid system and how to code the CSS files?
First, you should try to add your background elements. Then, use basic css to make it fit the whole page width with repeat or not (depending on your background image)
Then, about the "full width grid system", bootstrap has many classes that fit your requirements like 'col-lg-** col-md-** col-sm-** col-xs-**', you should have a look at this :
http://getbootstrap.com/css/#grid
Your code is just a bit too generic. But this "bootply" is a good starting point for you :
http://www.bootply.com/b1SPDA3GOn
Hope it helps!
I've been trying to make a responsive navbar with columns but I can't manage to react well to the different sizes I've trying al lot of things: column-offset, contaniers, paddings... but I can't get a decent result. Here it is what I managed to do so far:
<nav class="navbar navbar-default ">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-collapse collapse" style="height: 0px;">
<div class="row show-grid">
<div class=" col-xs-8 col-md-6 col-md-offset-2" >
<ul class="nav navbar-nav" id="altre">
<li>Shop
</li>
<li>Style Guide
</li>
<li>Be a man
</li>
</ul>
</div>
<div class=" col-xs-4 col-md-4">
<ul class="nav navbar-nav hidden-xs" id="login">
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Login</a>
<div class="dropdown-menu">
<form class="navbar-form" role="form">
<p><input class="form-control" type="text" placeholder="E-mail"></p>
<p><input class="form-control" type="password" placeholder="Contrasenya"></p>
<button type="button" class="btn btn-primary">Sign in</button>
<button type="button" class="btn btn-success">Log in</button>
</form>
</div>
</li>
</ul>
<form class="navbar-form text-center visible-xs" role="form">
<p><input class="form-control" type="text" placeholder="E-mail"></p>
<p><input class="form-control" type="password" placeholder="Contrasenya"></p>
<button type="button" class="btn btn-primary">Sign in</button>
<button type="button" class="btn btn-success">Log in</button>
</form>
</div>
</div>
</div>
</nav>
At first sight it seems to be working right but when you resize you see the difference between the right and left margin.
I'm very lost at this point, anyone knows a clean way to have a good result?
here the files if you don't want to download one by one:
https://drive.google.com/file/d/0BwOBDBZckmYwZ20tLTRQdFI3a3c/edit?usp=sharing
thanks
You need to use .container class in divs before rows, the problem that you have seems to be using percentages in margin-left.
<div class="container"><!-- container -->
<div class="row">
<ul>...
</div>
</div>
See: http://jsfiddle.net/uFwnU/