I am working on an app that uses Bootstrap 3. In this app, I have a row defined like this:
<div class="row" style="background-color:navy; color:white;">
<div class="col-lg-3">
<h2>Welcome</h2>
</div>
<div class="col-lg-8">
<form class="form-horizontal">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
find:
</div>
<input type="search" class="form-control" id="queryField" />
</div>
</div>
</form>
</div>
<div class="col-lg-1">
<button type="button" class="btn btn-primary">Go</button>
</div>
</div>
I want to make the search field and the Go button vertically aligned with the Welcome text. The Welcome text is kind of vertically aligned. I tried adding vertical-align: middle. That did not work. I was trying to avoid using padding. But if its required, its required. I appreciate any help you can provide.
There is default margin, padding in all tags, so put a class of
h2{ margin: 0; padding: 0; }
and it is automatically come in same line
Related
I'm trying to create a fixed footer from a jumbotron including a text area and a button. This is what I have now at the end of <body>:
<div class="jumbotron jumbotron-fluid position-fixed fixed-bottom">
<div class="container-fluid">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Message: </span>
</div>
<textarea class="form-control" aria-label="With textarea"></textarea>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Send</button>
</div>
</div>
</div>
</div>
But this jumbotron doesn't stick to the bottom of the page. It stays about 50px above the bottom, it's so ugly and I don't know how to fix it!
Because the default .jumbotron has margin-bottom: 2rem;. Removing that bottom margin will fix the issue.
You can also do your custom style:
.jumbotron.fixed-bottom {
margin-bottom: 0 !important;
}
By the way, you don't need .position-fixed class. .fixed-bottom will do the fixed position for you!
I'm making a very simple form for an Electron app I am making to experiment with the software, however, I am stuck on the most basic of things... the interface design.
I'm using Bootstrap 4 for my interface and am trying to centre the form vertically, however, I am getting mix results using various suggestions made on other's questions on the same topic. They either do not work or squeeze all my content onto a single line and generally mess the current layout up.
Any suggestions on how I can vertically align the items in the container below?
<!-- Search Field -->
<div class="container">
<div class="row justify-content-center">
<div class="col-sm-auto">
<h1 class="text-white">Shorten M' URL!</h1>
</div>
</div>
<div class="row justify-content-center">
<div class="col-sm-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter URL...">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Shorten!</button>
</span>
</div>
</div>
</div>
</div>
Are you looking for this?:
.vh-100 {
height: 100vh;
}
<div class="container vh-100 bg-dark">
<div class="row vh-100 justify-content-center align-items-center">
<div class="col-6 text-center">
<h1 class="text-white">Shorten M' URL!</h1>
<br>
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter URL...">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Shorten!</button>
</span>
</div>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
Basically you have to have the container to fit the screen height. Once there, you can align it's items vertically.
When the content is wide enough to have this all on the same row without line breaking (probably need to go full page with the snippet), the right label text is aligned slightly higher than the left label text. I'm trying to get the text of the two labels aligned to the same baseline.
I've tried to use vertical align in various ways, tried to set the height the same as the left on the right group, but I can't get anything to work.
Of course I could just set a fixed margin, but is there a responsive way to do this?
.main {
margin-top: 20px;
}
#left-input {
width: 100px;
}
.vmiddle {
/* does nothing ? */
vertical-align: middle;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container main">
<div class="row">
<div class="col-xs-6 ">
<div class="form-inline">
<div class="form-group">
<label>Left Label:</label>
<input id="left-input" type="text" class="form-control" value="Some Value" />
</div>
</div>
</div>
<div class="col-xs-6 vmiddle">
<div class="form-inline">
<div class="form-group">
<label>Right Label: Higher</label>
</div>
</div>
</div>
</div>
</div>
Since the second one is technically not a label, you can use Bootstrap's Static form control instead. It's designed to align with form-control and .btn elements.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container main">
<div class="row">
<div class="col-xs-6 ">
<div class="form-inline">
<div class="form-group">
<label>Left Label:</label>
<input id="left-input" type="text" class="form-control" value="Some Value" />
</div>
</div>
</div>
<div class="col-xs-6 vmiddle">
<div class="form-inline">
<div class="form-group">
<p class="form-control-static"><strong>Right Label</strong></p>
</div>
</div>
</div>
</div>
</div>
Add a margin utility class that's half the height of Bootstrap's padding.
<style>
.m-t-7 {
margin-top: 7.5px;
}
</style>
<div class="col-xs-6">
<div class="form-inline">
<div class="form-group">
<label class="m-t-7">Right Label: Higher</label>
</div>
</div>
</div>
Yup.
First, give the right label an id so you can select it individually.
<label id="right">Right Label: Higher</label>
then, in your css add:
#right{
padding-top:2px; /*Insert your own value for paddin*/
}
and to make it dynamic, remove the padding when the left label stacks. Find the pixel width of the browser when this happens, and then create a media query for the event:
#media(max-width:300px){
#right{
padding-top:0;
}
}
Another idea which may not be possible in your layout, would be to limit the width of the content so it never gets wide enough for this.
Yes. Just try to remove the margin bottom of the <label>Right Label: Higher</label>. Please leave a comment if this wont work.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container main">
<div class="row">
<div class="col-xs-6 ">
<div class="form-inline">
<div class="form-group">
<label>Left Label:</label>
<input id="left-input" type="text" class="form-control" value="Some Value" />
</div>
</div>
</div>
<div class="col-xs-6 vmiddle">
<div class="form-inline">
<div class="form-group">
<label style="margin-bottom: 0;">Right Label: Higher</label>
</div>
</div>
</div>
</div>
</div>
I have two input boxes that I am trying to get side by side on the row but I'd like there still to be a gap between the boxes but flush to the sides of the container.
Is there a way using just Bootstrap to do this? The container is a replication of a mobile device.
<div class="group col-sm-12">
<div class="row">
<div class="col-sm-6">
<div class="row">
<input type="text" name="first-name" ng-model="user.firstname" />
</div>
</div>
<div class="col-sm-6">
<div class="row">
<input type="text" name="last-name" ng-model="user.surname" />
</div>
</div>
</div>
</div>
plunkr example
Bootstrap has a few different grid classes. col-<size>-<num> where <size> can be xs, sm, md, or lg, and <num> can be an integer between (and including) 1-12.
For mobile devices, you'll want to use xs. If you don't specify any of the larger sizes, then they'll use the same widths as the smaller one. If you change col-sm-12 to col-xs-12 and col-sm-6 to col-xs-6 I think you'll get the result you're looking for.
It also helps your inputs look more consistent and more easily themed if you give them the form-control class.
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="group col-xs-12">
<div class="row">
<div class="col-xs-6">
<div class="row">
<input class="form-control" type="text" name="first-name" />
</div>
</div>
<div class="col-xs-6">
<div class="row">
<input class="form-control" type="text" name="last-name" />
</div>
</div>
</div>
</div>
I'm not familiar with Bootstrap, but one way to achieve it would be to add this to your CSS:
.col-sm-6, .col-sm-6 .row, .col-sm-6 .row input {
display: inline-block;
}
I am not sure if I understand your question correctly. You need a space between the text box side by side right? if so try this code. You could also use col-xs-offset-1 for space between grid. This will allow you to push 1 grid away. example http://www.bootply.com/U6vlrIktq2
<div class="col-md-4">
<input type="text" class="form-control">
</div>
<div class="col-md-4 ">
<input type="text" class="form-control"><br>
</div>
<!-- for more spacing between boxes-->
<div class="col-xs-5">
<input type="text" class="form-control">
</div>
<div class="col-xs-5 col-xs-offset-1">
<input type="text" class="form-control">
</div>
any suggestions on the best way to do a form like that? http://i.imgur.com/vT7tC.png
I'm using tables + input with width: 100%, I know it's probably not the best way
(also, for some reason the input width: 100% gets bigger than [td] or [div] (the red border on this image is from a [div][input ...][/div])
thanks
You can float the left label/inputs to the left and the right label/input to the right.
You will need to specify a width otherwise you will end up with a large gap between your columns and your middle column will not line up with your large right input.
This is how I would code that form:
HTML
<div class="content">
<div class="row">
<div class="lrow">
<label>aaa aaa</label>
<input type="text" class="large">
</div>
<div class="rrow">
<label>bbb</label>
<input type="text" class="small">
</div>
</div>
<div class="row">
<div class="lrow">
<label>ccc</label>
<input type="text" class="small">
</div>
<div class="rrow">
<label>ddd ddd</label>
<input type="text" class="large">
</div>
</div>
<div class="row">
<div class="lrow">
<label>eee</label>
<input type="text" class="small">
</div>
<div class="rrow">
<label>fff fff</label>
<input type="text" class="small">
</div>
<div class="crow">
<label>ggg</label>
<input type="text" class="small">
</div>
</div>
</div>
CSS
.content {width:542px;}
.row {overflow:hidden;margin:5px 0;}
.row label {float:left;text-align:right;width:60px;margin-right:5px;}
.row input {float:left;}
.lrow {float:left;}
.rrow {float:right}
.large {width:300px;}
.small {width:100px;}
don't waste your time by making columns by hand.
just use Blueprint CSS Framework. it's really nice and easy to use and does the job in a way you want.
the most important of all, you do not need to care about browser compatibility anymore.