I have to increase the width of search bar and make the border invisible while keeping it mobile responsive. Something like:
http://oneclass.com/#!/notes
HTML
<a class="navbar-brand page-scroll" href="#page-top">dss</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control ipt" placeholder="Search" name="q">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</li>
<li>
Study Material
</li>
<li>
About us
</li>
<li>
Blog
</li>
</ul>
</div>
</div>
You can do it with CSS ...
Just add some style to the class element you want to edit...
I guess you can use something like this:
.ipt {
width: 100%;
position: absolute;
top: 0;
left: 0;
border: 0px;
border-bottom: 1px solid #ccc;
height: 50px;
font-size: 25px;
line-height: 45px;
}
DEMO
you can add some CSS to the input "text" tag.(which with a ipt class here).
.ipt {
border:none; //make the border invisible
width:75%; //set width to % instead of pixel to make it responsible.
height:50px;
font-size:22px; //control the text area's height of the text-input tag.
}
you may check a simple demo here. http://codepen.io/fukurouzhong/pen/JKdLVd
Related
I am developing a site, where I have Login div as part of header in Desktop view. Where as the same div has to be appear in Mobile menu along with existing menu items as shown below:
So, how to implement this as part of mobile menu item (Without using 2 Divs for hide/show) using Bootstrap?
You could use the navbar class for your header. And then bootstrap will automatically behave that way. Otherwise you should use the media query.
Or you could use the visible-xs, visible-sm, etc. bootstrap classes (with mulitple div's), to handle what is viewed on which device.
first of all this is no javascript / jquery question.
What you wannt to do is explained here
See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
bootstrap itself does the job just read that doc
I Think You Have Too Use .col-md class from bootstrap.
Give Class OF menu div as col-md-4 and in login and content div has col-md-8.
For Example,
<div class="row">
<div class="menu col-md-4"></div>
<div class="login col-md-8"></div>
</div>
Just Like This...
If You Are Don't familiar with Bootstrap. Then First Read Out The Documentation That Will Suggested By Burak Topal . So You are understand that what this class will actually do.
Might This Will Helpful.
I found the solution for this without using media queries. We need to place both top and left navbars inside ".navbar-collapse" class.
I have used a custom class "navbar-fixed-left" to make the left navbar.
.navbar-fixed-left {
margin-top: 47px;
left: 0px;
width: 140px;
position: fixed;
border-radius: 0;
height: 100%;
}
.navbar-fixed-left .navbar-nav > li {
float: none; /* Cancel default li float: left */
width: 139px;
}
.navbar-fixed-left + .container {
padding-left: 160px;
}
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="User Name">
<input type="text" class="form-control" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Login</button>
</form>
<div class="navbar-inverse navbar-fixed-left">
<ul class="nav navbar-nav">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container">
<h3>Content goes here...</h3>
</div>
I'm trying to adjust the glyphicon-user icon and btn-primary in dropdown to be displayed properly when the window is resized. However, when I resize the window, my button alignment seems to be out of the window where I can't view the end of the button. Answers anyone?
<div class="container-fluid">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<strong>User</strong>
</a>
<ul id="user-dp" class="dropdown-menu">
<li>
<div class="row">
<!-- Login -->
<div class="col-lg-4">
<p class="text-center">
<span class="glyphicon glyphicon-user icon-size"></span>
</p>
</div>
<div class="col-lg-8">
<p class="text-left"><strong>Test</strong></p>
<p class="text-left">
Testing
</p>
</div>
<div class="bottom text-center">
Test again
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
style.css
.icon-size
{
margin-top:5%;
font-size: 87px;
}
#user-dp{
min-width: 300px;
padding: 14px 14px 0;
overflow:hidden;
background-color:rgba(255,255,255,.8);
}
#user-dp .help-block{
font-size:12px
}
#user-dp .bottom{
background-color:rgba(255,255,255,.8);
border-top:1px solid #ddd;
clear:both;
padding:14px;
}
Jamdev's answer is close, but it's your #user-dp that sets the min-width. This will keep your box 300px wide no matter the window size. By adding the following CSS, you will reset the min-width to 0 whenever your window is under 768px wide.
#media (max-width: 768px) {
#user-dp {
min-width:0;
}
}
Demo: http://www.bootply.com/GetuidWvdM
add this code into your custom.css #media (max-width: 767px) .navbar-nav .open .dropdown-menu { min-width:0; }
I am trying to create a page header / tool bar. This in an existing theme and there is a DIV at the top where this will reside. The basic premise is on the left a H2 title then on the right a bunch of bootstrap elements (search form, bottons, dropdowns etc.
I have tried all kinds of block, inline-block vertical-align etc. I can get the H2 to pull left and the toolbar to pull right but the toolbar elements all pull up to the top of the container div. I just want a clean looking layout with all the elements aligned along their horizontal axis.
I think the pull-right may be part of the problem. That seems to pull the right div up to the top.
Here is a Bootply link: http://www.bootply.com/BPucyP8mpk
<div class"container">
<div id="left">
<h2 class="">Title</h2>
</div>
<div id="right">
<form class="form form-horizontal">
<input type="text" placeholder="search field" class="form-control">
<button type="submit" class="btn">search</button>
</form>
<button class="btn btn-default">Button</button>
<div class="btn-group">
<button class="btn">Left</button>
<button class="btn">Middle</button>
<button class="btn">Right</button>
</div>
<div class="btn-group"><a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Dropdown<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Choice1
</li>
<li>Choice2
</li>
<li>Choice3
</li>
<li class="divider"></li>
<li>Choice..
</li>
</ul>
</div>
</div>
</div>
UPDATE:
Here is the computed CSS that wraps the header I am trying to format:
border-bottom-width: 1px;
border-top-color: rgb(103, 106, 108);
border-top-style: none;
border-top-width: 0px;
box-sizing: border-box;
color: rgb(103, 106, 108);
display: block;
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13px;
height: 70px;
line-height: 18px;
margin-left: -15px;
margin-right: -15px;
padding-bottom: 12px;
padding-left: 20px;
padding-right: 20px;
padding-top: 0px;
width: 1318px;
This is from my custom theme I have installed. This is the computed CSS from this wrapper div:
<div class="row wrapper border-bottom white-bg page-heading">
</div>
UPD:
The most suitable method for this task is use Flexbox
Check it out: http://www.bootply.com/CtVmUbzrlr
<div class="row">
<div id="left" class="col-sm-3 col-md-5">
<h2 class="">Title</h2>
</div>
<div id="right" class="col-sm-9 col-md-7">
<form class="form form-horizontal">
<div class="input-group">
<input type="text" placeholder="search field" class="form-control">
<span type="submit" class="input-group-addon">search</span>
</div>
</form>
<button class="btn btn-default">Button</button>
<div class="btn-group">
<button class="btn">Left</button>
<button class="btn">Middle</button>
<button class="btn">Right</button>
</div>
<div class="btn-group"><a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Dropdown<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Choice1
</li>
<li>Choice2
</li>
<li>Choice3
</li>
<li class="divider"></li>
<li>Choice..
</li>
</ul>
</div>
</div>
</div>
.row{
border: 1px solid #000;
}
#right{
display: flex;
align-items: center;
height: 66px;
justify-content: flex-end;
}
.input-group{
width: 200px;
}
Check this out:
<div class="col-lg-4">
<h2 class="">Title</h2>
</div>
<div class="col-lg-8">
<div class="row">
<form class="form form-horizontal">
<div class="col-lg-8">
<input type="text" placeholder="search field" class="form-control">
</div>
<div class="col-lg-4">
<button type="submit" class="btn btn-block">search</button>
</div>
</form>
</div>
<div class="row">
<div class="col-lg-12">
<button class="btn btn-default">Button</button>
<div class="btn-group">
<button class="btn">Left</button>
<button class="btn">Middle</button>
<button class="btn">Right</button>
</div>
<div class="btn-group"><a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Dropdown<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Choice1
</li>
<li>Choice2
</li>
<li>Choice3
</li>
<li class="divider"></li>
<li>Choice..
</li>
</ul>
</div>
</div>
</div>
</div>
you can check bootply also : http://www.bootply.com/LmGjZM6fHH
You need to manage your layout with the col-md-*
This is just for the demo, you can arrange with you own way
What about utilizing the navbar component from bootstrap?
http://getbootstrap.com/components/#navbar
I think the example here pretty much sums up your needs.
Basically I've added classes navbar-btn to the buttons, and navbar-form to the form to get them to align properly. I added the class navbar-right to both the form and the group of buttons.
http://www.bootply.com/IySnkX2ioK
Edit: The navbar-default class was just added to outline the bounds of the navbar, not part of the solution.
First thing is that if you want to have your search box on left - place it first and then button group with dropdown. Second, don't place navbar-rigth inside another navbar-rigth. And the last thing - just wrap your right-side elements in one div and add to it a little padding
Updated link
I'm working in (formerly Twitter) Bootstrap 2 and I wanted to style buttons as though they were normal links. Not just any normal links, though; these are going in a <ul class="nav nav-tabs nav-stacked"> container. The markup will end up like this:
<form action="..." method="post">
<div class="row-fluid">
<!-- Navigation for the form -->
<div class="span3">
<ul class="nav nav-tabs nav-stacked">
<li><button type="submit" name="op" value="Link 1">Link 1</button></li>
<li><button type="submit" name="op" value="Link 2">Link 2</button></li>
<!-- ... -->
</ul>
</div>
<!-- The actual form -->
<div class="span9">
<!-- ... -->
</div>
</div>
</form>
Does Bootstrap have any way to make these <button>s look like they were actually <a>s?
As noted in the official documentation, simply apply the class(es) btn btn-link:
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>
For example, with the code you have provided:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<form action="..." method="post">
<div class="row-fluid">
<!-- Navigation for the form -->
<div class="span3">
<ul class="nav nav-tabs nav-stacked">
<li>
<button class="btn btn-link" role="link" type="submit" name="op" value="Link 1">Link 1</button>
</li>
<li>
<button class="btn btn-link" role="link" type="submit" name="op" value="Link 2">Link 2</button>
</li>
<!-- ... -->
</ul>
</div>
<!-- The actual form -->
<div class="span9">
<!-- ... -->
</div>
</div>
</form>
Just make regular link look like button :)
Click here!
"role" inside a href code makes it look like button, ofc you can add more variables such as class.
Just add remove_button_css as class to your button tag. You can verify the code for Link 1
.remove_button_css {
outline: none;
padding: 5px;
border: 0px;
box-sizing: none;
background-color: transparent;
}
Extra Styles Edit
Add color: #337ab7; and :hover and :focus to match OOTB (bootstrap3)
.remove_button_css:focus,
.remove_button_css:hover {
color: #23527c;
text-decoration: underline;
}
In bootstrap 3, this works well for me:
.btn-link.btn-anchor {
outline: none !important;
padding: 0;
border: 0;
vertical-align: baseline;
}
Used like:
<button type="button" class="btn-link btn-anchor">My Button</button>
Demo
Just get rid of the background color, borders and add hover effects. Here's a fiddle: http://jsfiddle.net/yPU29/
<form action="..." method="post">
<div class="row-fluid">
<!-- Navigation for the form -->
<div class="span3">
<ul class="nav nav-tabs nav-stacked">
<li><button type="submit" name="op" value="Link 1" class="button-link">Link 1</button></li>
<li><button type="submit" name="op" value="Link 2" class="button-link">Link 2</button></li>
<!-- ... -->
</ul>
</div>
<!-- The actual form -->
<div class="span9">
<!-- ... -->
</div>
</div>
</form>
CSS:
.button-link {
background-color: transparent;
border: none;
}
.button-link:hover {
color: blue;
text-decoration: underline;
}
I've tried all examples, posted here, but they do not work without extra CSS. Try this:
<button type="button" class="btn btn-success">Google</button>
Works perfectly without any extra CSS.
here is a example:
<form method="POST" >
<button type="submit" class=" linkish my-1 far fa-thumbs-down fa-2x"> </button>
<button type="submit" class=" linkish btn btn-primary">click me</button>
</form>
and css style :
.linkish {
background-color: transparent!important;
border: 0!important;
color: blue!important;
cursor: pointer!important;
display: inline!important;
margin: 0!important;
outline: none!important;
padding: 0!important;
text-decoration: none!important;
}
.linkish:hover {
text-decoration: underline!important;
}
this is just example , and change it based on your case / requirements.
i hope this helpful .
Right now I have a navigation bar that looks like:
http://bootply.com/78239
I want to maximize the width of the "search" text-input, without creating line-breaks (i.e., that the "Clear" link will be tight with the "About" link).
I only have basic experience with css and web-design. I read something about "overflow: hidden" tricks, but I don't understand how to use it when there are more elements to the right of the targeted element.
Thanks
EDIT:
A partial solution can be to set the width "manually" for each case, like in http://bootply.com/78247 :
#media (max-width: 767px) {
#searchbar > .navbar-form {
width: 100%;
}
}
#media (min-width: 768px) and (max-width: 991px) {
#searchbar > .navbar-form {
width: 205px;
}
}
#media (min-width: 992px) and (max-width: 1199px) {
#searchbar > .navbar-form {
width: 425px;
}
}
#media (min-width: 1200px) {
#searchbar > .navbar-form {
width: 625px;
}
}
but this solution will not work when the menu's texts are "dynamic" (for example, contain "Hello username").
I suppose it is not a big issue if you assume that there is a limit on the menu's texts' widths - it's just annoying to calculate/test those widths manually.
I'm just curious to know if there's a neat way to do it automatically.
For Bootstrap version 3.2 and up you should also set the display:table; for the input-group and set the width to 1% for the input-group-addon.
<div style="display:table;" class="input-group">
<span style="width: 1%;" class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
<input type="text" autofocus="autofocus" autocomplete="off" placeholder="Search Here" name="search" style="" class="form-control">
</div>
Demo Bootstrap version 3.2+: http://www.bootply.com/t7O3HSGlbc
--
If you allow changing the position of your navbar elements? I don't understand "without creating line-breaks (i.e., that the "Clear" link will be tight with the "About" link)." Try this: http://bootply.com/78374.
What i did:
Drop the float left of the form (by dropping the navbar-left class)
Give other navbar elements a right float (the navbar-right class)
Set display of the form-group to inline (style="display:inline")
Change the position of the elements (the right floated first)
Related question:
Expand div to max width when float:left is set
html:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<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>
<a class="navbar-brand" href="#">My Project</a>
</div>
<div class="navbar-collapse collapse" id="searchbar">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li id="userPage">
<i class="icon-user"></i> My Page
</li>
<li>Logout</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Clear</li>
</ul>
<form class="navbar-form">
<div class="form-group" style="display:inline;">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
<input class="form-control" name="search" placeholder="Search Here" autocomplete="off" autofocus="autofocus" type="text">
</div>
</div>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
Two things worked for me here. Adding Orens media queries, and also adding a display: inline to that searchbar form group:
<li id="searchbar">
<form id="search_form" class="navbar-form navbar-left navbar-input-group " role="search">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">All <span class="caret"></span>
</button>
</div>
<div class="form-group">
<input name="search_input" type="text" class="form-control typeahead" placeholder="Search for items or shops" autofocus="autofocus">
</div>
<span class="input-group-btn">
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
</li>
With the css:
#search_form > .input-group > .form-group {
display: inline;
}