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>
Related
Firstly, here's a JSFiddle demo: https://jsfiddle.net/y9bp4oat/
I'm currently using bootstrap's grid system to display a bunch of items in rows of 4. When you hover over an item it'll flip to the back and display more details. It works great, problem comes when there's an item directly below the item you're currently hovering over, the item below blocks or overlays itself on the item that's being hovered. I'm sorry if my explanation is confusing, the JSFiddle demo will let you see what I mean.
I've been trying to fix this issue with z-index, making sure the position isn't set to default but to no avail. I've been trying to fix this issue for days now. Any help would be much appreciated.
HTML:
<html>
<head>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<div class="row">
<div class="col-md-3 pull-left mb-3">
<div class="flip-container">
<div class="flipper">
<div class="front bg-dark">
</div>
<div class="back">
<div class="bg-dark mystyle text-center py-3" >
<h5>Restaurant</h5>
<h5>10 Reviews<h5>
<h5>Average Rating: 4.5/5 </h5>
<button href="#" type="button" class="btn btn-primary btn-sm">SeeMore</button>
<button href="#" type="button" class="btn btn-primary btn-sm">Reviews</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 pull-left mb-3">
<div class="flip-container">
<div class="flipper">
<div class="front bg-dark">
</div>
<div class="back">
<div class="bg-dark mystyle text-center py-3" >
<h5>Restaurant</h5>
<h5>10 Reviews<h5>
<h5>Average Rating: 4.5/5 </h5>
<button href="#" type="button" class="btn btn-primary btn-sm">See More</button>
<button href="#" type="button" class="btn btn-primary btn-sm">Reviews</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 pull-left mb-3">
<div class="flip-container">
<div class="flipper">
<div class="front bg-dark">
</div>
<div class="back">
<div class="bg-dark mystyle text-center py-3" >
<h5>Restaurant</h5>
<h5>10 Reviews<h5>
<h5>Average Rating: 4.5/5 </h5>
<button href="#" type="button" class="btn btn-primary btn-sm">See More</button>
<button href="#" type="button" class="btn btn-primary btn-sm">Reviews</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 pull-left mb-3">
<div class="flip-container">
<div class="flipper">
<div class="front bg-dark">
</div>
<div class="back">
<div class="bg-dark mystyle text-center py-3" >
<h5>Restaurant</h5>
<h5>10 Reviews<h5>
<h5>Average Rating: 4.5/5 </h5>
<button href="#" type="button" class="btn btn-primary btn-sm">See
More</button>
<button href="#" type="button" class="btn btn-primary btn
sm">Reviews</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 pull-left mb-3">
<div class="flip-container">
<div class="flipper">
<div class="front bg-dark">
</div>
<div class="back">
<div class="bg-dark mystyle text-center py-3" >
<h5>Restaurant</h5>
<h5>10 Reviews<h5>
<h5>Average Rating: 4.5/5 </h5>
<button href="#" type="button" class="btn btn-primary btn-sm">See More</button>
<button href="#" type="button" class="btn btn-primary btn-sm">Reviews</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
.mystyle{
height: 90px;
width: 254px;
color: white;
font-size: smaller;
padding: 5px 5px 5px 5px;
border-radius: 10px;
margin: 5px 1% 5px 1%;
float: left;
position: relative;
transition: 1s;
-webkit-transition: 1s;
text-align: left;
overflow: hidden;
background-color: white;
z-index: 5;
}
.flip-container{
perspective: 1000px;
}
.flip-container:hover .flipper ,
.flip-container.hover .flipper{
transform: rotateY(180deg);
}
.flip-container:hover .flipper .mystyle,
.flip-container.hover .flipper .mystyle{
height: 150px;
width: 254px;
background-color: grey;
color: white;
position: relative;
z-index: 5;
margin-bottom: 100px;
}
.flip-container,
.front,
.back{
height: 100px;
width: 254px;
}
.flipper{
transition: 1s;
transform-style: preserve-3d;
}
.front,
.back{
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front{
transform: rotateY(0deg);
}
.back{
transform: rotateY(180deg);
}
You need to set the z-index at the outer container:
.flip-container:hover{
position:relative;
z-index:1;
}
Demo: https://jsfiddle.net/lotusgodkk/r62wxp4L/3/
I am relatively new to web development in general and am having a layout crisis: I have a container-fluid that has a row split into two *col-md-6*s. Within a col-md-6 I want to be able to position elements horizontally. As shown in my code/picture; I am trying to make a simple div that is 95% the height of the button-group and shows up next to it...however it is showing up below it and is very short (I want it to be as tall as the button group). What is the protocol for sizing/positioning elements next to each other in Bootstrap like this?
<div class="container-fluid">
<div class="row">
<div class="col-md-6" style="background-color: lightcyan">
<div class="btn-group-vertical btn-group-lg">
<button type="button" class="btn btn-primary">Quick Select</button>
<button type="button" class="btn btn-primary">Show in Depth</button>
<button type="button" class="btn btn-primary">Delete Product</button>
</div>
<div id="prod_view">
yo
</div>
CSS:
#prod_view{
background: lightcoral;
width: 69%;
height: 95%;
margin-left: 23%;
border: solid;
}
What it looks like now:
I want the "yo" box to be more rectangular and to the right of the button group.
Here's a flex layout that will do that. You can use the justify-content property to affect the horizontal alignment, and align-items will affect the vertical alignment. Here's a visual guide for flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.custom-row {
display: flex;
justify-content: space-between;
}
.custom-row > div:last-child {
width: 69%;
}
#prod_view {
height: 95%;
background: lightcoral;
border: solid;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 custom-row" style="background-color: lightcyan">
<div class="btn-group-vertical btn-group-lg">
<button type="button" class="btn btn-primary">Quick Select</button>
<button type="button" class="btn btn-primary">Show in Depth</button>
<button type="button" class="btn btn-primary">Delete Product</button>
</div>
<div>
<div id="prod_view">
yo
</div>
</div>
</div>
</div>
</div>
Another way is with a single flexbox class. Add it to the row and col-md-6:
.flex {
display: flex;
}
<div class="container-fluid">
<div class="row flex">
<div class="col-md-6 flex" style="background-color: lightcyan">
<div class="btn-group-vertical btn-group-lg">
<button type="button" class="btn btn-primary">Quick Select</button>
<button type="button" class="btn btn-primary">Show in Depth</button>
<button type="button" class="btn btn-primary">Delete Product</button>
</div>
<div id="prod_view">
yo
</div>
</div>
</div>
</div>
http://www.codeply.com/go/wvCRJ0ufEB
In Bootstrap 4, flexbox is default so there is no need for the extra class.
Just trying to make a second row of col-md-6s (I copied the "row" div and pasted it within the container div) but I can't seem to figure out why its not perfectly lined up.
The last two lines of HTML code reflect the beginning of the second row.
.btn-group-vertical{
border: 2px solid black;
border-radius: 10px;
}
.col-md-6 {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
#prod_view {
height: 100%;
background-color: lightcoral;
display: flex;
justify-content: flex-start;
border: solid;
border-radius: 10px;
}
.col-md-6 > div:last-child {
width: 50%;
}
.boxclass {
height: 95%;
width: 50%;
}
<div class="container">
<div class="row">
<div class="col-md-6" style="background-color: lightcyan">
<div class="btn-group-vertical btn-group-lg">
<button type="button" class="btn btn-primary">Quick Select</button>
<button type="button" class="btn btn-primary">Show in Depth</button>
<button type="button" class="btn btn-primary">Delete Product</button>
</div>
<div>
<div id="prod_view">
<div class="boxclass" >
<img alt="product" class="img-rounded" src="../Images/math.jpg" style="max-height: 100%; max-width: 100%;">
</div>
<div class="boxclass">some cool blocks all stacked up n shtufff</div>
</div>
</div>
</div>
<div class="col-md-6" style="background-color: lightgray">
<div class="btn-group-vertical btn-group-lg">
<button type="button" class="btn btn-primary">Quick Select</button>
<button type="button" class="btn btn-primary">Show in Depth</button>
<button type="button" class="btn btn-primary">Delete Product</button>
</div>
<div>
<div id="prod_view">
<div class="boxclass"></div>
<div class="boxclass"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color: lightcyan">
Works fine when the .row is closed properly...
http://www.codeply.com/go/OCsEsFb2Lr
<div class="container">
<div class="row">
<div class="col-md-6" style="background-color: lightcyan">
</div>
<div class="col-md-6" style="background-color: lightgray">
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color: lightcyan">
</div>
<div class="col-md-6" style="background-color: lightgray">
</div>
</div>
</div>
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 six buttons underneath an alert, why are they so spaced out? This is what they look like in a normal browser, and this is what I'd like them to look like.
#import url(http://fonts.googleapis.com/css?family=Cabin|Lobster);
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css);
html, body { background-color: #108A93; }
.row { text-align: center; }
.header { font-family: "lobster", arial; }
.alert-info { background-color: #4D3A7D; border: none; color: white; }
.disabled { cursor: default; }
.btn-default { color: #444; }
span, p, h1, strong, button { color: white; }
span, p, button { font-family: "Cabin", arial; }
button { border: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-xs-4"> <button class="btn btn-primary btn-block">Scrounge Cash</button> </div>
<div class="col-xs-4"> <button class="btn btn-default btn-block">$0.00</button> </div>
<div class="col-xs-4"> <button class="btn btn-default btn-block">$0.00/s</button> </div>
</div>
<div class="row">
<div class="row">
<div class="col-xs-4"> <button class="btn btn-primary btn-block">Pray to Demeter</button> </div>
<div class="col-xs-4"> <button class="btn btn-default btn-block">0</button> </div>
<div class="col-xs-4"> <button class="btn btn-default btn-block">0/s</button> </div>
</div>
</div>
</div>
</div>
There is a padding on boostrap by default, 15px from each side. adding the class no-padding solve the gap.
#import url(http://fonts.googleapis.com/css?family=Cabin|Lobster);
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css);
html, body { background-color: #108A93; }
.row { text-align: center; }
.header { font-family: "lobster", arial; }
.alert-info { background-color: #4D3A7D; border: none; color: white; }
.disabled { cursor: default; }
.btn-default { color: #444; }
span, p, h1, strong, button { color: white; }
span, p, button { font-family: "Cabin", arial; }
button { border: none; }
.no-padding{padding:0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="row">
<div class="col-xs-4 no-padding"> <button class="btn btn-primary btn-block">Scrounge Cash</button> </div>
<div class="col-xs-4 no-padding"> <button class="btn btn-default btn-block">$0.00</button> </div>
<div class="col-xs-4 no-padding"> <button class="btn btn-default btn-block">$0.00/s</button> </div>
</div>
<div class="row">
<div class="col-xs-4 no-padding"> <button class="btn btn-primary btn-block">Pray to Demeter</button> </div>
<div class="col-xs-4 no-padding"> <button class="btn btn-default btn-block">0</button> </div>
<div class="col-xs-4 no-padding"> <button class="btn btn-default btn-block">0/s</button> </div>
</div>
</div>
</div>
</div>