CODE: (with bootstrap3 and jQuery)
<body>
<div class="navbar navbar-fixed-top" style="background-color: transparent; max-height: 50px;">
<div class="container-fluid">
<div class="row">
<div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<ul class="nav navbar-nav" style="margin-top: 0px; margin-bottom: 0px;">
<li><i class="glyphicon glyphicon-menu-down icon_navbar_color"></i></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="collapse navbar-collapse1" style="">
<form class="navbar-form">
<div class="input-group input-group-sm" style="max-width: 100%;">
<input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search icon_navbar_color"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
jsfiddle: https://jsfiddle.net/o2daoew5/
This code performs opening collapsed div under the navbar.
When Browser's width is shorter than 768px, It's input bar wide enough.
But Browser's width is more than or equal 768px, It's input bar becomes shorter.
Question:
I want to make this input bar's width fully responsive to browser's width. Not becoming shorter. How can I fix it?
Use class form not navbar-form
<div class="collapse navbar-collapse1" style="">
<form class="form">
<div class="input-group input-group-sm" style="max-width: 100%;">
<input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search icon_navbar_color"></i></button>
</div>
</div>
</form>
</div>
Related
I used the following code to output the interface as shown below.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-12">
<div class="card m-b-30">
<div class="card-header container-fluid">
<div class="row">
<h2 class="card-title">Customer Profile Types</h2>
<div class="col-md-4 float-right">
<button class="btn btn-primary">Add</button>
<button class="btn btn-primary" style="margin-left: 1em">Update</button>
<button class="btn btn-primary" style="margin-left: 1em">Cancel</button>
</div>
</div>
</div>
<br>
<div class="CustomerProfileTypes-body">
<form>
<div class="form-group row">
<label for="Name" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="inputText">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label id="gridCheck"> Active</label>
</div>
</div>
</form>
</div>
</div>
</div>
But I need to get the output as shown below and align all the things in my interface.
The name also needs to be centered and textbox, and the checkbox also should be aligned.
I'm still a beginner can anyone help me.
There can be two solutions for the result you are trying to achieve.
Make use of bootstrap columns like you are using right now.
Use flexbox
Solution 1
Make a slight change to your code:
<div class="row">
<div class="col-md-6>
<h2 class="card-title">Customer Profile Types</h2>
</div>
<div class="col-md-6 text-right">
<button class="btn btn-primary">Add</button>
<button class="btn btn-primary" style="margin-left: 1em">Update</button>
<button class="btn btn-primary" style="margin-left: 1em">Cancel</button>
</div>
</div>
Solution 2
Without the bootstrap row and col, pure flexbox (using bootstrap classes).
<div class="d-flex justify-content-between align-items-center">
<h2 class="card-title">Customer Profile Types</h2>
<div>
<button class="btn btn-primary">Add</button>
<button class="btn btn-primary" style="margin-left: 1em">Update</button>
<button class="btn btn-primary" style="margin-left: 1em">Cancel</button>
</div>
</div>
If you want to use CSS, try to use flexbox with property "space-between" on this div (because is father):
<div class="card-header container-fluid">
It should make space between h2 and B's elements.
<div class="col-lg-12" style="padding: 10px">
<div class="card m-b-30">
<div class="card-header container-fluid">
<div class="row">
<h2 class="card-title" style="padding: 10px">Customer Profile Types</h2>
<div align="right" class="col-md-8 float-right">
<button class="btn btn-primary">Add</button>
<button class="btn btn-primary" style="margin-left: 1em">Update</button>
<button class="btn btn-primary" style="margin-left: 1em">Cancel</button>
</div>
</div>
</div>
<br>
<div class="CustomerProfileTypes-body">
<form>
<div class="form-group row">
<label for="Name" class="col-sm-2 col-form-label" style="text-align: center"> Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="inputText">
<input class="form-check-input" type="checkbox" id="gridCheck" style="margin-left: 2px" >
<label id="gridCheck" style="margin-left: 15px"> Active </label>
</div>
</div>
</form>
</div>
</div>
I have a contact form (a bunch of input/span elements) nested in a Boostrap col. As the browser shrinks, the input fields shrink to an undesirable size.
I have tried adding various col-breakpoints, which sort-of works, but it looks funky and still shrinks too much until it hits the breakpoint. I have also looked for a way to specify a min-width of sorts, but haven't had luck with that either.
<!-- Custom CSS -->
.input-group-text {
width: 40px;
}
.input-group-text span {
margin: 0 auto;
}
.body-main-bg {
background-color: #eeeeee;
}
<!-- Contact Form -->
<div class="container-fluid">
<div class="row body-main-bg justify-content-center">
<div class="col-4 my-3 text-center">
<h4>Contact Us</h4>
</div>
</div>
<form id="contact-form" method="" action="">
<div class="row body-main-bg justify-content-center">
<div class="col-4 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<span class="fa fa-user"></span>
</span>
</div>
<input type="text" class="form-control" placeholder="Name">
</div>
</div>
</div>
<div class="row body-main-bg justify-content-center">
<div class="col-4 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<span class="fa fa-envelope"></span>
</span>
</div>
<input type="text" class="form-control" placeholder="Email">
</div>
</div>
</div>
<div class="row body-main-bg justify-content-center">
<div class="col-4 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<span class="fa fa-ellipsis-v"></span>
</span>
</div>
<input type="text" class="form-control" placeholder="Subject">
</div>
</div>
</div>
<div class="row body-main-bg justify-content-center">
<div class="col-4 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<span class="fa fa-pencil"></span>
</span>
</div>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Message"></textarea>
</div>
</div>
</div>
<div class="row body-main-bg justify-content-center">
<div class="col-4 mb-3">
<button class="btn btn-primary btn-block" type="submit">Submit</button>
</div>
</div>
</form>
</div>
If you change col-4 to col-lg-4 or col-md-4 you will have the desired layout.
The issue is that with col-4 you are essentially saying "stay this width on all devices". When col-lg-4 or col-md-4 are responsive and set divs to be 100% on large/medium devices and down.
See bootstraps grid options here: https://getbootstrap.com/docs/4.3/layout/grid/
How can I get these two divs to align in a row horizontally and keep the form-group intact?
No matter what kind of col-ms-sizing I do the two input groups will not align on the same line and I believe this is only happening because of the form-group class.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="container-fluid" ng-controller="PriceController as formCtrl">
<form class="form-horizontal" role="form" ng-submit="processForm()">
<div class="form-group">
<label for="inputPrice" class="col-sm-1 control-label">Price</label>
<div class="col-sm-5 input-group"> <span class="input-group-addon">$</span>
<input type="text" class="form-control" id="inputPrice" name="inputPrice"> <span class="input-group-addon">.95</span>
</div>
<label for="inputDate" class="col-sm-1 control-label">Date</label>
<div class="col-sm-5 input-group">
<input type="text" class="form-control" id="inputDate" name="inputDate" placeholder="Date">
<div class="input-group input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Date <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>Today
</li>
<li>Tomorrow
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
Make sure you wrap your inputs with a <div class="row"> and then make separate divs for the col-sm-* classes. I replaced col-sm-* with col-xs-* to ensure the snippet would not wrap.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="container-fluid" ng-controller="PriceController as formCtrl">
<form class="form-horizontal" role="form" ng-submit="processForm()">
<div class="form-group">
<div class="row">
<div class="col-xs-1">
<label for="inputPrice" class="control-label">Price</label>
</div>
<div class="col-xs-5">
<div class="input-group"> <span class="input-group-addon">$</span>
<input type="text" class="form-control" id="inputPrice" name="inputPrice"> <span class="input-group-addon">.95</span>
</div>
</div>
<div class="col-xs-1">
<label for="inputDate" class="control-label">Date</label>
</div>
<div class="col-xs-5">
<div class="input-group">
<input type="text" class="form-control" id="inputDate" name="inputDate" placeholder="Date">
<div class="input-group input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Date <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>Today
</li>
<li>Tomorrow
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
You just have to wrap your inputs inside of col elements basically just nested columns. Make sure you are also using the correct sized columns for the correct screen sizes.
http://jsfiddle.net/kwd9cqn9/1/
<div class="container">
<div class="container-fluid">
<form class="form-horizontal">
<div class="form-group">
<div class="col-lg-6 col-sm-6 col-xs-6">
<label for="inputPrice" class="col-sm-1 control-label">Price</label>
<div class="col-lg-12 input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="inputPrice" name="inputPrice" />
<span class="input-group-addon">.95</span>
</div>
</div>
<div class="col-lg-6 col-sm-6 col-xs-6">
<label for="inputDate" class="col-sm-1 control-label">Date</label>
<div class="col-lg-12 input-group">
<input type="text" class="form-control" id="inputDate" name="inputDate" placeholder="Date" />
<div class="input-group input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Date <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>Today</li>
<li>Tomorrow</li>
</ul>
</div>
</div>
</div>
</div>
</form>
</div>
I'm trying to add a search glyph to a button at the end of this centered search bar.
Below is the style I want:
<div class="row">
<div class="col-md-12">
<div class="jumbotron text-center">
<h1>Jumbotron with form</h1>
<form>
<div class="col-md-6 col-md-offset-3">
<div class="input-group input-group-lg">
<input type="text" class="form-control" placeholder="Username">
<span class="input-group-addon">Search</span>
</div>
</div>
</form>
<br><br>
</div>
</div>
</div>
But I want to to have a button a - something like:
<span class="glyphicon glyphicon-search"></span></button>
instead of the
<span class="input-group-addon">Search</span>
but when I do this the button moves onto the next line and throws off my styling.
Using Bootstraps form-inline class and form structure will resolve your issue.
<div class="row">
<div class="col-md-12">
<div class="jumbotron text-center col-md-6 col-md-offset-3">
<h1>Jumbotron with form</h1>
<form class="form-inline" role="form">
<div class="form-group form-group-lg">
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="form-group form-group-lg">
<button type="button" class="btn btn-default btn-lg pull-left">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</div>
</form>
<br><br>
</div>
</div>
</div>
Try this:
DEMO
<div class="row">
<div class="col-md-12">
<div class="jumbotron text-center">
<h1>Jumbotron with form</h1>
<form>
<div class="col-md-6 col-md-offset-3">
<div class="input-group input-group-lg">
<input type="text" class="form-control" placeholder="Username">
<span style="padding:5px 0px 5px 0px !important" class="input-group-addon"><button class="btn"><span class="glyphicon glyphicon-search"></span> Search</button></span>
</div>
</div>
</form>
<br>
<br>
</div>
</div>
</div>
What would be the best way to have a logo and form in the center of the page while being responsive?
Currently, I have something like
<div class="container">
<img src="logo.jpg" class="logo img-responsive center-block">
<form role="form">
<div class="form-group center-block">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-default btn-sm" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</form>
</div>
then I edited it slightly in the css;
.form-group { margin-top: 15px; width: 50% }
.logo { width: 300px; }
However, now the logo will not resize like the input box does.
now you'll need to change the col size for each media that you need xs sm md and lg but this would do the trick that you are looking for.
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<img src="http://placehold.it/250x300" class="logo img-responsive center-block" />
<form role="form">
<div class="form-group center-block">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" /> <span class="input-group-btn">
<button class="btn btn-default btn-sm" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</form>
</div>
</div>
</div>
i assumed that you need a fluid container, the offset col would take , and for farther reading check this
Demo
A fluid container does the trick, but a fixed container should be able to keep it center without taking all the screen span which is annoying on medium+ resolutions.
Also, media queries should keep .container within a specific width for responsiveness' sake.
<div class="container">
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/250x300" class="logo img-responsive center-block" />
<form role="form">
<div class="form-group center-block">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" /> <span class="input-group-btn">
<button class="btn btn-default btn-sm" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</form>
</div>
</div>
</div>