I wonder what's the best way to vertically align an input field and a button without Bootstrap.
Here's how it looks right know:
Some code:
<!doctype html>
<title>Postnummer</title>
<div class="container-fluid">
<div class="divider"></div>
<div class="row">
<div class="col-md-12">
<form class="navbar-form">
<div class="input-group">
<input style="height:50px; color: black; border-radius: 0px;" type="number" id="searchZipCode"class="form-control" placeholder="Sök postnummer">
<div class="input-group-btn">
<a id="submitBtn">
<button style="height:50px; border-radius: 0px" type="button" click="submitZipCode()" class="btn btn-default"><i class="fa fa-search fa-2x"></i></button>
</a>
</div>
</div>
</form>
</div>
</div>
</div>
Fiddle: https://jsfiddle.net/5mxzu4m5/
I want the the icon on the right side of the input field. Really grateful for all the answers! :)
Use the below code (just added display:inline-block & vertical-align:top on textbox and .input-group-btn, increased button height)
<div class="container-fluid">
<div class="divider"></div>
<div class="row">
<div class="col-md-12">
<form class="navbar-form">
<div class="input-group" style="text-align: center">
<input style="height:50px; color: black; border-radius: 0px; display: inline-block; vertical-align:top; margin-right:-4px; " type="number" id="searchZipCode"class="form-control" placeholder="Sök postnummer">
<div class="input-group-btn" style="display: inline-block; vertical-align:top">
<a id="submitBtn">
<button style="height:56px; border-radius: 0px;" type="button" click="submitZipCode()" class="btn btn-default"><i class="fa fa-search fa-2x"></i></button>
</a>
</div>
</div>
</form>
</div>
</div>
</div>
Simple and Sleek Solution:
Replace src="..." with your link
HTML
<div>
<input type="text" id="text1">
<br>
<img src="http://findicons.com/files/icons/1264/clearblack/128/find.png" height="50px" width="50px">
</div>
CSS
img{
float:right;
}
div{
width:90px;
}
Try this CSS
.input-group{
display:table;
}
.form-control,.input-group-btn
{
display:table-cell;
vertical-align:middle;
}
Link For Reference
style your button accordingly
hope this helps..
Related
I have images of different sizes and x/y ratios in a responsive CSS grid.
I need a ✖️ button in the top-right corner of each image.
So in each grid cell I put a form, and inside the form - a button and an image:
<form action="/destroyImage" method="POST">
<button type="submit" class="close">
<span>×</span>
</button>
<img src="/pub/myimage123.jpg"/>
</form>
The questions:
How can I place the center of the button on the corner of the image?
How can I get a better looking ✖️ button (I use Bootstrap 4)?
To get the 'X' in the top right hand corner you could do:
.AClass{
right:0px;
position: absolute;
}
<form action="/destroyImage" method="POST">
<div style="position:relative;">
<button type="submit" class="close AClass">
<span>×</span>
</button>
<img src="/pub/myimage123.jpg"/>
</div>
</form>
To get a better cross I would suggest using Font Awesome or some variant of that.
You can adjust right by your perspective
button{
position: absolute;
z-index: 1;
right: 0;
}
img {
position: relative;
width: 100%;
}
<form action="/destroyImage" method="POST">
<div class="1st">
<button type="submit" class="close">
<span>×</span>
</button>
<img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
</div>
<div class="2nd">
<button type="submit" class="close">
<span>×</span>
</button>
<img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
</div>
<div class="3rd">
<button type="submit" class="close">
<span>×</span>
</button>
<img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
</div>
</form>
FOR GRID
you can use position-absolute and position-relative BS4 class for image and button
button{
position: absolute;
z-index: 1;
right: 20px;
}
img {
position: relative;
}
button span {
color: red; // for testing purpose
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<form action="/destroyImage" method="POST">
<div class="row">
<div class="col-4">
<div class="1st">
<button type="submit" class="close">
<span>×</span>
</button>
<img class="w-100" src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
</div>
</div>
<div class="col-4">
<div class="2nd">
<button type="submit" class="close">
<span>×</span>
</button>
<img class="w-100" src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
</div>
</div>
<div class="col-4">
<div class="3rd">
<button type="submit" class="close">
<span>×</span>
</button>
<img class="w-100" src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
</div>
</div>
</div>
</form>
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>
I have the following code
html page(part of it)
<div class="container">
<div class="right-page col-md-9">
<div class="row">
<div class="category-item col-md-4">
<form action="/settings/category/2/" method="post" class="form-inline">
<div class="container">
<div class="row input-container">
<div class="form-group">
<div class="col-md-8">
<input class="form-control input-sm col-md-3" type="text" value="KONS ">
</div>
<div class="col-md-3">
<input class="form-control input-sm col-md-3 myColorPicker">
</div>
</div>
</div>
</div>
<div class="container">
<div class="row btn-container">
<button class="btn btn-default btn-sm edit-category">Cancel</button>
<button name="delete" class="btn btn-default btn-sm">Delete</button><input type="submit" name="submit" class="btn btn-default btn-sm" value="Save">
</div>
</div>
</form>
</div>
</div>
</div>
and the css (part of it)
.diagnosis-phrase,
.treatment-phrase,
.category-item{
padding-bottom: 1em;
padding-top: 0.5em;
border: 1px solid black;
margin-bottom: 0.5em;
}
.diagnosis-phrase input[type="text"],
.treatment-phrase input[type="text"],
.category-item input[type="text"]{
margin-bottom:0.5em;
}
.category-item p{
padding-left: 0.5em;
padding-bottom:0.3em;
border-radius:0.5em;
width:50%;
}
The bootply for it. The part of html is the right column of a two column webpage. As you can see inside the div with black border I have two input boxes(For some reason the second appears outside the div with borders but in my working code appears correctly. Maybe because of me providing part of page.). My problem is that the first one is not aligned with the Cancel button. How can I do that using bootstrap classes?
if you use the following styles
.form-group .col-md-8:first-child {padding-left:0;}
It should fix your problem
Or if you just change the col-md-8 class on your div to col-md-pull-8 it should also achieve the same thing
In this bootply the welcome as well as the form is coming on the left hand side.But I want to bring it at the centre.Can any body please tell me how to do?
<form id="form1">
<div class="container-fluid">
<div class="row-fluid">
<div class="span1"></div>
<div class="span10" style="margin-bottom: 6px; margin-top: 0px; background: #efeee9">
<img src="ui_resources/img/ title.jpg" alt="" align="left">
<h2 align="center" style="margin-top: 18px;"></h2>
</div>
<div class="span1"></div>
</div>
<div class="row-fluid">
<div class="span1"></div>
<div class="span10" style="background: #eee; border: 1px solid #ddd;">
<div class="span7 center login-header">
<h2 style="color:#E86537 " align="center">Welcome </h2>
</div><!--/span-->
<div class="row-fluid">
<div class="well span7 center login-box">
<div class="alert alert-info">
Please login with your Username and Password.
</div>
<fieldset>
<div class="input-prepend" title="Username" data-rel="tooltip" style="margin-left:80px;">
<span class="add-on"><i class="icon-user"></i></span><input autofocus="" class="input-large span10" name="j_username" id="username" type="text" value="">
</div>
<div class="clearfix"></div>
<div class="input-prepend" title="Password" data-rel="tooltip" style="margin-left:80px;">
<span class="add-on"><i class="icon-lock"></i></span><input class="input-large span10" name="j_password" id="password" type="password" value="">
</div>
<div class="clearfix"></div>
<div class="input-prepend" style="margin-left:80px;">
<label class="remember" for="remember"><input type="checkbox" id="remember" style="display:">Remember me</label>
</div>
<div class="clearfix"></div>
<p class="center span6" style="margin-left:80px;">
<button type="submit" class="btn btn-primary">Login</button>
New Userregister
</p>
</fieldset>
</div><!--/span-->
</div><!--/row-->
</div><!--/row-->
</div>
<div class="span1"></div>
</div></form>
<div class="row-fluid">
<div class="span1"></div>
<div class="span10" style="margin-top: 6px;">
<div class="span1"></div>
</div>
</div>
try to set your welcome div in another div like this
<div class="row-fluid">
<div class="offset3 span6 center login-header">
<h2 style="color:#E86537 " align="center">Welcome </h2>
</div>
</div>
use offset
Move columns to the right using .offset* classes. Each class increases
the left margin of a column by a whole column. For example, .offset4
moves .span4 over four columns.
DEMO
Try using this in your CSS
.row-fluid .login-header,
.row-fluid .login-box{
float:none;
margin:0 auto !important;
}
Since .span* has float: left style by default, you can override it by using float:none;
.login-box {
margin:0 auto;
float:none;
}
margin:0 auto; is used to center your loginbox horizontally.