Might be a misuse of Bootstrap's input group component, but should be achievable.
This is what I have:
And here's how I'd like to have it:
The code that needs fixing:
<div class="cont">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">foo</span>
<span class="input-group-text">bar</span>
<span class="input-group-text">This should stretch.</span>
</div>
<div class="input-group-append">
<button class="btn btn-secondary" type="button">baz</button>
<button class="btn btn-secondary" type="button">qux</button>
</div>
</div>
</div>
div.cont {
border-left: 1px dotted gray;
border-right: 1px dotted gray;
}
fiddle: https://jsfiddle.net/37o25zay/
Use boostrap class flex-grow-1 to allow the element to grow and fill the remaining space (https://getbootstrap.com/docs/4.2/utilities/flex/#grow-and-shrink)
body {
padding: 2em;
}
div.cont {
border-left: 1px dotted gray;
border-right: 1px dotted gray;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<div class="cont">
<div class="input-group">
<div class="input-group-prepend flex-grow-1"> <!-- here -->
<span class="input-group-text">foo</span>
<span class="input-group-text">bar</span>
<span class="input-group-text flex-grow-1">This should stretch.</span> <!-- here -->
</div>
<div class="input-group-append">
<button class="btn btn-secondary" type="button">baz</button>
<button class="btn btn-secondary" type="button">qux</button>
</div>
</div>
</div>
Related
I would like to switch the left box with the right box. I am using the function sortable() from jQuery UI. As you see in my code, it works fine for the numbers of 1 and 2 but not for the boxes to switch them left and right.
$(".sort-me").sortable({
connectWith: ".connectedSortable"
});
.title {
background: red;
}
.storename {
background: blue;
}
.row {
margin-top: 1rem;
margin-bottom: 1rem;
}
/* metatag generator relevant */
.mg-item {
display: inline-block;
}
.mg-item-inner {
display: flex;
}
.mg-item-inner .btn-group .btn .name {
margin-right: 1rem;
}
.mg-item-inner>.btn-group:not(.collapsed)>.btn:first-child {
cursor: -webkit-grab;
cursor: grab;
}
.mg-item-inner .input-group-btn:only-child>.btn {
border-radius: 4px;
}
.mg-item-inner>.btn-group,
.mg-item-inner>.input-group {
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 10px 20px rgba(0, 0, 0, 0.04);
}
.mg-item-inner>.btn-group+.input-group,
.mg-item-inner>.input-group+.input-group,
.mg-item-inner>.btn-group+.btn-group,
.mg-item-inner>.input-group+.btn-group {
margin-left: -1px;
}
.mg-item span.add {
background: transparent;
color: #444;
padding-left: 0;
margin-left: 0;
}
.mg-item span.add:active {
box-shadow: unset;
color: #313131;
}
.mg-item span.add .fa-plus-circle {
opacity: 0;
}
.mg-item:hover span.add .fa-plus-circle {
opacity: 1;
}
/*# sourceMappingURL=mg.css.map */
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.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://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/js/all.min.js"></script>
<div class="container">
<!-- Title -->
<div class="row">
<div draggable="true" class="sort-me title connectedSortable">
<div class="col-md-3">
<div class="mg-item-inner">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-container='body' title='Gibt den Seitentitel aus'>
<span class="name">TITLE</span><i class="fas fa-arrows-alt"></i></button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-container='body' title="Linie Erweitern / Reduzieren">
<i class="fas fa-swatchbook"></i></button>
</div>
<!-- /btn-group -->
<div class="input-group" role="group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">prefix <i class="fas fa-sort"></i></button>
<ul class="dropdown-menu">
<li>prefix</li>
<li>suffix</li>
<li>none</li>
</ul>
</div>
<!-- /input-btn-group -->
<input type="text" class="form-control">
</div>
<!-- /input-group --><span type="button" class="btn add"><i class="fas fa-plus-circle"></i></span>
</div>
<!-- /mg-item-inner -->
</div>
<!-- /mg-item -->
</div>
<!--STORE NANE -->
<div draggable="true" class="sort-me storename connectedSortable">
<div class="col-md-3">
<div class="mg-item-inner">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-container='body' title='Fügt den Storename hinzu'>
<span class="name">STORENAME</span><i class="fas fa-arrows-alt"></i></button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Linie Erweitern / Reduzieren">
<i class="fas fa-swatchbook"></i></button>
</div>
<!-- /btn-group -->
<div class="input-group" role="group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">prefix <i class="fas fa-sort"></i></button>
<ul class="dropdown-menu">
<li>prefix</li>
<li>suffix</li>
<li>none</li>
</ul>
</div>
<!-- /input-btn-group -->
<input type="text" class="form-control">
</div>
<!-- /input-group --><span type="button" class="btn add"><i class="fas fa-plus-circle"></i></span>
</div>
<!-- /mg-item-inner -->
</div>
<!-- /mg-item -->
</div>
</div>
</div>
<div class="sort-me">
<div class="connectedSortable">
<h1>
1
</h1>
</div>
<div class="connectedSortable">
<H1>2</H1>
</div>
</div>
https://jsfiddle.net/mjc9as5L/
What is the reason that the boxes can not be sorted? Is there a CSS issue maybe?
Try to add flex to your row, it might solve your problem.
.container > .row{
display:flex;
flex-direction:row-reverse;
justify-content:start;
}
I am not able to align the text inside the buttons vertically using the vertical-align:middle style as used in vertical alignment of text and icon in bootstrap button
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="page-header">
<div class="row">
<div class ="col-md-3">
<h3 class="text-center" id="title">Kartikey</h3>
</div>
<div class ="col-md-1 col-md-offset-3" >
<button type="button" class="btn btn-default" ><h3 style="vertical-align:middle;">About</h3></button>
</div>
<div class="col-md-1">
<button type="button" class="btn btn-default"><h3 style="vertical-align:middle;">Portfolio</h3></button>
</div>
<div class="col-md-1">
<button type="button" class="btn btn-default"><h3 style="vertical-align:middle;">Contact</h3></button>
</div>
<div class="col-md-3">
</div>
</div>
</div>
</body>
Here's my code :
http://codepen.io/kartikeykant/pen/VPeWYN
.page-header{
height: 100px;
background-color: rgb(112, 137, 142);
margin-top: 0px;
}
#title{
font-size:400%;
color: white;
}
.btn{
margin-top:24px;
margin-right:50px;
margin-left:50px;
width:110px;
height:55px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="page-header">
<div class="row">
<div class ="col-md-3">
<h3 class="text-center" id="title">Kartikey</h3>
</div>
<div class ="col-md-1 col-md-offset-3" >
<button type="button" class="btn btn-default" ><h3 style="vertical-align:middle;">About</h3></button>
</div>
<div class="col-md-1">
<button type="button" class="btn btn-default"><h3 style="vertical-align:middle;">Portfolio</h3></button>
</div>
<div class="col-md-1">
<button type="button" class="btn btn-default"><h3 style="vertical-align:middle;">Contact</h3></button>
</div>
<div class="col-md-3">
</div>
</div>
</div>
</body>
Also the result in the code snipppet and codepen are different. How is it so?
Just use a margin:0 auto on your h3 tags.
.page-header{
height: 100px;
background-color: rgb(112, 137, 142);
margin-top: 0px;
}
#title{
font-size:400%;
color: white;
}
.btn{
margin-top:24px;
margin-right:50px;
margin-left:50px;
width:110px;
height:55px;
}
.btn h3{
margin:0 auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="page-header">
<div class="row">
<div class ="col-md-3">
<h3 class="text-center" id="title">Kartikey</h3>
</div>
<div class ="col-md-1 col-md-offset-3" >
<button type="button" class="btn btn-default" ><h3 style="vertical-align:middle;">About</h3></button>
</div>
<div class="col-md-1">
<button type="button" class="btn btn-default"><h3 style="vertical-align:middle;">Portfolio</h3></button>
</div>
<div class="col-md-1">
<button type="button" class="btn btn-default"><h3 style="vertical-align:middle;">Contact</h3></button>
</div>
<div class="col-md-3">
</div>
</div>
</div>
</body>
vertical-align:middle didn't work for me either. I ended up using flex.
In Bootstrap 4 this is just a matter of using the flex classes:
<div class="col-md-1">
<button type="button" class="btn btn-default d-flex align-items-middle justify-content-center">
<h3 class="m-0">Contact</h3>
</button>
</div>
If you are still stuck with Bootstrap 3, you can create your own class:
CSS:
.valign-content {
display:flex;
align-items: center;
justify-content: center;
}
.valign-content>h3 {
margin:0;
}
HTML
<div class="col-md-1">
<button type="button" class="btn btn-default valign-content">
<h3>Contact</h3>
</button>
</div>
Note that you need to remove margin from the h3 tags i both cases.
The margin-top: 20px; in class h3 pushes it down. Try troubleshooting it using F12 tools.
You are using <h3> inside <button>, is not "correct", remove <h3> and add "font-size: 24px;" in the ".btn" class.
.page-header{
height: 100px;
background-color: rgb(112, 137, 142);
margin-top: 0px;
}
#title{
font-size:400%;
color: white;
}
.btn {
margin-top:24px;
margin-right:50px;
margin-left:50px;
width:110px;
height:55px;
font-size: 24px;
}
<head>
</head>
<body>
<div class="page-header">
<div class="row">
<div class ="col-md-3">
<h3 class="text-center" id="title">Kartikey</h3>
</div>
<div class ="col-md-1 col-md-offset-4" >
<button type="button" class="btn btn-default" >About</button>
</div>
<div class="col-md-1">
<button type="button" class="btn btn-default">Portfolio</button>
</div>
<div class="col-md-1">
<button type="button" class="btn btn-default">Contact</button>
</div>
<div class="col-md-2">
</div>
</div>
</div>
</body>
I'm using bootstrap classes to arrange my page, and it was going fine until my latest row:
#* row 7: Copy, Excel, CSV, and PDF buttons *#
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-8">
<button type="button" class="squishedbutton">Copy</button>
<button type="button" class="squishedbutton">Excel</button>
<button type="button" class="squishedbutton">CSV</button>
<button type="button" class="squishedbutton">PDF</button>
</div>
<div class="col-md-1">
<label style="text-align: right;">Search:</label>
</div>
<div class="col-md-1">
<input type="text" style="margin-right: 2cm;" name="searchinput">
</div>
<div class="col-md-1">
</div>
</div>
That row is preceded and followed by rows like this:
<div class="row">
<div class="col-md-12">
<hr />
</div>
</div>
I need the input text to shift to the left, away from the right border, and closer to the "Search" label.
How can I accomplish this?
I also don't know why the row is so tall, making the buttons overly tall - or why the buttons are so tall, making the row tall...
The css used is:
.squishedbutton {
border: none;
margin-left: 0cm;
padding: 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
}
UPDATE
This is how it looks now:
...with this html:
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-7">
<button type="button" class="squishedbutton">Copy</button>
<button type="button" class="squishedbutton">Excel</button>
<button type="button" class="squishedbutton">CSV</button>
<button type="button" class="squishedbutton">PDF</button>
</div>
<div class="col-md-1">
<label style="text-align: right; display: inline-block;">Search:</label>
</div>
<div class="col-md-1">
<input type="text" style="margin-right: 2cm;" name="searchinput">
</div>
</div>
...and this css:
.squishedbutton {
margin-left: 0cm;
margin-right: -0.1cm;
padding: 4px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
}
IOW, it looks more-or-less "okay" but I would like the input text shifted to the left and/or the label shifted to the right so that they appear a little more "cozy"
.squishedbutton {
border: none;
margin-left: 0cm;
padding:0 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
hr{ margin:0;}
</style>
<div class="container">
<div class="row">
<div class="col-md-12">
<hr />
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr />
</div>
</div>
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-7">
<button type="button" class="squishedbutton">Copy</button>
<button type="button" class="squishedbutton">Excel</button>
<button type="button" class="squishedbutton">CSV</button>
<button type="button" class="squishedbutton">PDF</button>
</div>
<div class="col-md-3 ">
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Search</label>
<input type="text" class="" id="exampleInputName2" placeholder="">
</div>
</form>
</div>
<div class="col-md-1">
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr />
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr />
</div>
</div>
</div>
and if you want label and text to come next to buttons then place them just after buttons.
UPD. There are three rows in the code below:
Original CSS from the answer.
Shift <label> to right.
Place <label> and <input> in the same column.
Does something look as you need?
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
#media (min-width: 992px) {
h2 {
margin: 0;
padding: 10px 0 0 0;
}
/* 1. */
.shift-to-right {
padding-right: 0;
text-align: right;
}
/* 2. */
.make-them-closer {
padding-top: 13px;
}
.make-them-closer label {
float: left;
padding-right: 4px;
padding-top: 3px;
}
.make-them-closer div {
overflow: hidden;
}
.make-them-closer input {
width: 100%;
}
}
.squishedbutton {
border: none;
margin-left: 0cm;
padding: 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
}
<div class="container-fluid">
<div class="row">
<div class="col-md-12"><hr /></div>
<div class="col-md-1">
<h2>0.</h2>
</div>
<div class="col-md-7">
<button type="button" class="squishedbutton">Copy</button>
<button type="button" class="squishedbutton">Excel</button>
<button type="button" class="squishedbutton">CSV</button>
<button type="button" class="squishedbutton">PDF</button>
</div>
<div class="col-md-1">
<label style="text-align: right; display: inline-block;">Search:</label>
</div>
<div class="col-md-1">
<input type="text" style="margin-right: 2cm;" name="searchinput">
</div>
<div class="col-md-12"><hr /></div>
<div class="col-md-1">
<h2>1.</h2>
</div>
<div class="col-md-7">
<button type="button" class="squishedbutton">Copy</button>
<button type="button" class="squishedbutton">Excel</button>
<button type="button" class="squishedbutton">CSV</button>
<button type="button" class="squishedbutton">PDF</button>
</div>
<div class="col-md-1 shift-to-right">
<label>Search:</label>
</div>
<div class="col-md-1">
<input type="text" name="searchinput">
</div>
<div class="col-md-12"><hr /></div>
<div class="col-md-1">
<h2>2.</h2>
</div>
<div class="col-md-7">
<button type="button" class="squishedbutton">Copy</button>
<button type="button" class="squishedbutton">Excel</button>
<button type="button" class="squishedbutton">CSV</button>
<button type="button" class="squishedbutton">PDF</button>
</div>
<div class="col-md-2 make-them-closer">
<label>Search:</label>
<div><input type="text" name="searchinput"></div>
</div>
<div class="col-md-12"><hr /></div>
</div>
</div>
Here's a visualization of my problem:
I used CSS to make the borders light grey, yet for a millisecond they default to a black border before turning light grey. I would really appreciated if someone could give me a tip on this!
HTML file
<div class="container-fluid">
<div class="container">
<form>
<div class="row page-header">
<div class="col-lg-10">
<div class="form-group">
<input type="text" name="Worksheet-Name" class="form-control input-lg" placeholder="Worksheet Name..." aria-label="Write worksheet name here">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<div class="input-group input-group-lg">
<div class="input-group-btn">
<button type="button" id="Remove-Button" class="btn btn-default" aria-label="Remove">
<span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>
</button>
</div>
<input type="text" name="Worksheet-Problem" class="form-control" placeholder="Problem..." aria-label="Write worksheet problem here">
<div class="input-group-btn">
<button type="button" id="Add-Button" class="btn btn-default" aria-label="Add">
<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
CSS borders part
/*Take away default black borders*/
input[type="text"] {
outline: none;
box-shadow: none !important;
border: none;
}
/*Put grey borders when hover or click on input box*/
input[type="text"]:focus,
input[type="text"]:hover {
border: 1px solid #cccccc;
border-radius: 8px;
}
I'm using Bootstrap and running my HTML file on Chrome if that's relevant.
JSFiddle of my problem
If you change:
input[type="text"]:focus,
input[type="text"]:hover {
border: 1px solid #cccccc;
border-radius: 8px;
}
To:
input[type="text"] {
border: 1px solid #cccccc;
border-radius: 8px;
}
Your gray outline remains, the color glitch is removed, but on focus your outline does change blue.
just add transition:none;
input[type="text"]:focus,
input[type="text"]:hover {
border: 1px solid #cccccc;
border-radius: 8px;
transition:none;
}
Currently working on my navbar and would like to have the width of the search bar wider so the navbar does not look too segmented. I've played around with the width on CSS and haven't had any luck. I've also looked at similar questions on this site but have not found the solution. Please see my code below.
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top">HELLO</a>
</div>
<!-- SEARCH FORM -->
<form id="navsearch" class="navbar-form pull-right" role="search" action="" method="post">
<div class="input-group" display="inline">
<input name="search" type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-default btn" name="submit" class="btn btn-lg" type="submit">
<span class="glyphicon glyphicon-search" ></span>
</button>
</div>
</form>
<!--Button to Upload Information -->
<div class="container text-center">
<div class="call-to-action">
Upload Your Story
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Submit</h4>
</div><!-- end modal-header -->
<div class="modal-body">
<h4></h4>
<p><small class="text-muted">Tell us</small></p>
<form action="forms.php" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-lg-2 control-label" name="name" >Name</label>
<div class="col-lg-10">
<input class="form-control" name="name" placeholder="Name" type="text">
</div>
</div>
<div class="form-group" method="post">
<label class="col-lg-2 control-label" name="yourStory">Your Tell All</label>
<div class="col-lg-10">
<textarea class="form-control" name="yourStory" placeholder="Tell us your story" rows="3"></textarea>
</div>
<div class="form-group">
<label class="col-lg-2" for="inputFile">File input</label>
<input type="file" name="inputfile" id="inputFile">
</div>
<br>
<div class="form-group">
<div class="col-lg-10">
<button name="submit" class="btn btn-success active" type="submit">Submit</button>
</div>
</div>
</form>
</div><!-- end modal-body -->
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" type="button">Close</button> <button class="btn btn-primary" type="button">Save changes</button>
</div><!-- end modal-footer -->
</div><!-- end modal-content -->
</div><!-- end modal-dialog -->
</div><!-- end myModal -->
<!-- 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">
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
CSS
/* --------------------------------------
Navbar
-------------------------------------- */
.navbar-default {
border-color: rgba(255,255,255, 0.7);
font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
background-color: rgba(255,255,255, 0.7);;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
#searchInput {
width: 200px;
}
.navbar-brand {
padding: 13px 15px;
}
#mainNav{
padding-top: 10px;
padding-left: 20px;
}
#search{
width: 500px;
This may help as it's an alternate way of setting up your navbar so you can adjust your search input to whatever makes sense and use media queries with it.
*I also adjusted your modal because it was in the from place and had some errors in it etc. See working example.
body,
html {
margin-top: 60px;
}
.navbar.navbar-custom {
border: none;
background: white;
-webkit-box-shadow: 5px 5px 5px 0px rgba(50, 50, 50, 0.15);
-moz-box-shadow: 5px 5px 5px 0px rgba(50, 50, 50, 0.15);
box-shadow: 5px 5px 5px 0px rgba(50, 50, 50, 0.15);
}
.navbar.navbar-custom .form-search {
right: 0;
top: 0px;
position: fixed;
margin: 0;
border: none;
}
.navbar.navbar-custom .form-search .search-box {
height: 50px;
border-radius: 0;
border: none;
width: 700px;
box-shadow: none;
outline: none;
}
.navbar.navbar-custom .btn.btn-search {
height: 50px;
border-radius: 0;
border: none;
background: grey;
color: white;
}
.navbar.navbar-custom .btn.btn-upload {
float: 0;
height: 50px;
border-radius: 0;
border: none;
background: #a94442;
color: white;
}
.navbar.navbar-custom .navbar-header .navbar-toggle,
.navbar.navbar-custom .navbar-header .navbar-toggle:hover,
.navbar.navbar-custom .navbar-header .navbar-toggle:focus {
background: none;
border: none;
}
.navbar.navbar-custom .navbar-header span.icon-bar {
background: #444;
}
#media (min-width: 768px) {
.navbar.navbar-custom {
height: 50px;
}
}
#media (max-width: 992px) {
.navbar.navbar-custom .form-search .search-box {
width: 500px;
}
}
#media (max-width: 767px) {
.navbar.navbar-custom .form-search {
right: 70px;
}
.navbar.navbar-custom .form-search .search-box {
width: 225px;
}
}
#media (max-width: 480px) {
.navbar.navbar-custom .navbar-brand {
display: none;
}
.navbar.navbar-custom .form-search .search-box {
width: 70%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">HELLO</a>
</div>
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav">
<li>Home
</li>
</ul>
</div>
</div>
<form class="form-search">
<div class="input-group"> <span class="input-group"> <span class="input-group-btn" role="group" aria-label="...">
<button type="button" href="#myModal" data-toggle="modal" class="btn btn-upload">Upload</button>
</span>
<input type="text" class="form-control search-box" placeholder="Search"> <span class="input-group-btn" role="group" aria-label="...">
<button type="button" class="btn btn-search"><i class="fa fa-search"></i></button>
</span> </span>
</div>
</form>
</nav>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Submit</h4>
</div>
<!-- end modal-header -->
<div class="modal-body"> <small class="text-muted">Tell us</small>
<form action="forms.php" method="post" class="form-horizontal">
<label for="name" name="name">Name</label>
<input class="form-control" name="name" placeholder="Name" type="text">
<br>
<label for="yourStory" name="yourStory">Your Tell All</label>
<textarea class="form-control" name="yourStory" placeholder="Tell us your story" rows="3"></textarea>
<br>
<label for="inputFile">File input</label>
<input type="file" name="inputfile" id="inputFile">
<br>
<button name="submit" class="btn btn-success active" type="submit">Submit</button>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" type="button">Close</button>
<button class="btn btn-primary" type="button">Save changes</button>
</div>
</div>
</div>
</div>
<!-- end myModal -->
<div class="container">
<div class="alert alert-info">Yo</div>
</div>