rows in Bootstrap grid don't line up - html

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>

Related

How to style an alert with two call to actions

I am attempting to create an alert using html and css to look like this example below
I've been able to create this using inline CSS and it is not the desired look I was hoping for.
What is the best away to adjust my current code in order to achieve the look of the example? At the moment I using two separate divs and adjusting the margins.
<div class="row" id="alert_box">
<div class="col m2">
<div class="card red darken-1">
<div class="row">
<div class="col ">
<div class="card-content white-text">
<p style="margin-bottom: 40px">What information do you want to see? We'd love to hear from you</p>
</div>
</div>
</div>
</div>
</div>
<div class="col m1" style="
margin-left: -23px">
<div class="card red darken-1">
<div class="row">
<div>
<div class="card-content white-text">
<p>button 1</p>
</div>
<div class="card-content white-text">
<p>button 2</p>
</div>
</div>
</div>
</div>
</div>
</div>
If you are not using bootstrap, then flex or grid can help you here :
flex possible example, both columns will be stretching to match the highest:
.row {
display: flex;
}
.alert,
.alert button {
background: rgb(200, 35, 51);
color: beige
}
.col,
.flex-1 {
flex: 1
}
.flex-3 {
flex: 3;
}
.flex-column {
display: flex;
flex-direction: column;
}
.m-auto {
margin: auto;
}
.m1 {
margin: 1em;
}
div,
button {
border: solid 1px #222;
}
<div class="row alert m1">
<div class="colt flex-3 flex-column ">
<p class="m-auto">some text standing here</p>
<p class="m-auto">some text standing here</p>
<p class="m-auto">some text standing here</p>
<p class="m-auto">some text standing here</p>
</div>
<div class="col flex-column">
<button class="flex-1">button 1</button>
<button class="flex-1">button 2</button>
</div>
</div>
<div class="row alert m1">
<div class="colt flex-3 flex-column ">
<p class="m-auto">some text standing here</p>
</div>
<div class="col flex-column">
<button class="flex-1">button 1</button>
<button class="flex-1">button 2</button>
<button class="flex-1">button 3</button>
</div>
</div>
You can do something like this:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row bg-secondary text-light" id="alert_box" style="max-width:516px;">
<div class="col-9" style="padding: 13px 6px 11px 33px;border-right: 1px solid #fff;">
What information do you want to see? We'd love to hear from you
</div>
<div class="col-3">
<div class="row">
<div class="col-12"style="border-bottom: 1px solid #fff;">
<button class="btn pull-right text-light">Button 1</button>
</div>
<div class="col-12">
<button class="btn pull-right text-light">Button 2</button>
</div>
</div>
</div>
Check this live example

Center text with an image that is bigger than the text in container

For some reason, the button is sticking to the top of where the image starts. I want to center it in the middle of the container. I am trying to center it with the "center" class:
position: relative;
top: 50%;
transform: translateY(-50%);
Code:
What it looks like right now:
What it should look like:
HTML:
<div style="background-image: url( './dist/img/background/minecraft.jpg' ); height: 125px;" class="col-md-12">
<div class="wrapper text-center center">
<div class="col-lg-5">
<span style="color: #FFFFFF; font-size: 220%;">
<img style="width: 100px; display: inline;" src="./dist/img/icon/minecraft.png" />
Minecraftasdasdsad
</span>
</div>
<div class="col-lg-3"></div>
<div class="row">
<div class="col-lg-4">
<button style="color: #FFFFFF; min-width: 100px;" class="btn btn-green">
Start
</button>
<button style="margin-left: 10px; color: #FFFFFF; min-width: 100px;" class="btn btn-red">
Stop
</button>
</div>
</div>
</div>
</div>
Here is an implementation using flexbox.
#center {
display: -webkit-flex;
display: flex;
justify-content: flex-end;
-webkit-align-items: center;
align-items: center;
}
<div style="background-image: url( 'https://cdn.pixabay.com/photo/2015/11/02/18/34/banner-1018818_960_720.jpg' ); height: 125px;" class="col-md-12">
<div class="wrapper text-center center">
<div class="col-lg-5">
<span style="color: #FFFFFF; font-size: 220%;">
<img style="width: 100px; display: inline;" src="https://cdn.pixabay.com/photo/2015/11/02/18/34/banner-1018818_960_720.jpg" />
Minecraftasdasdsad
</span>
</div>
<div class="col-lg-3"></div>
<div class="row">
<div id="center">
<button style="color: #FFFFFF; min-width: 100px;" class="btn btn-green">
Start
</button>
<button style="margin: 10px;color: #FFFFFF; min-width: 100px;" class="btn btn-red">
Stop
</button>
</div>
</div>
</div>
</div>

working with the grid system in Bootstrap

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.

vertical-align:middle doesn't work in Bootstrap button

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>

How can I get my input text to move to the left up against the preceding label?

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>