I have a grid created using bootstrap 3 divs. The collection of divs has 1 button, followed by a radio button, followed by another button. I would like to highlight these with a background color. The background color should not break in between and should be like a single row.
Here is the fiddle with my attempt - https://jsfiddle.net/oxfqvtds/2/
In this, there is some empty space on the bottom right side of the div. As a result, the highlighting is not consistent.
.highlight {
background-color: yellow;
}
.input-field {
height: 20px;
padding: 2px 10px;
}
.custom-label {
line-height: 3.3em !important;
}
.label-size {
font-size: 10px;
line-height: 2.1em;
}
label {
padding-right: 0px;
}
<head>
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<div class="container-fluid">
<form class="form-horizontal">
<div class="col-md-12">...</div>
<div class="col-md-12">...</div>
<div class="col-md-10 highlight">
<div class="form-group">
<div class="col-md-3">
<button class="btn btn-primary btn-xs" type="button">Test</button>
</div>
<label class="col-md-2 label-size">Options</label>
<div class="radio" class="col-md-7 label-size">
<label class="label-size">
<input type="radio" name="opt" value="opt" >opt</label>
</div>
</div>
</div>
<div class="col-md-2 highlight form-group">
<button class="btn btn-info btn-xs pull-right">Test2</button>
</div>
</form>
</div>
</body>
Also, would like to have the buttons/radio buttons centered in the highlighted area. Right now they seem to be towards the top of the highlighted area.
With bootstrap you columns should be in a row. Apply the background color to the row once you have it in place. Remove form-groups, and you had class listed twice around the radio element so it wasn't reading the bootstrap column class.
.highlight.row {
background-color: yellow;
margin:0;
}
.input-field {
height: 20px;
padding: 2px 10px;
}
.custom-label {
line-height: 3.3em !important;
}
.label-size {
font-size: 10px;
line-height: 2.1em;
}
label {
padding-right: 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row highlight">
<form class="form-horizontal">
<div class="col-md-10 ">
<div class="">
<div class="col-md-3">
<button class="btn btn-primary btn-xs" type="button">Test</button>
</div>
<div class="col-md-2">
<label class="label-size">Options</label>
</div>
<div class="col-md-5 label-size">
<label class="label-size">
<input type="radio" name="opt" value="opt" >opt</label>
</div>
</div>
</div>
<div class="col-md-2">
<button class="btn btn-info btn-xs pull-right">Test2</button>
</div>
</form>
</div>
</div>
remove the margin-bottom from this particular form-group
Related
Why does the "Subscribe now!" button go outside the container in the picture below and how can I make it so that the right edge lines up with the rest of the page? (column 12 in the bootstrap grid)
I have tried box-sizing: border-box but it had no effect.
My HTML code:
.container-fluid {
padding: 0;
}
.carousel-inner .carousel-item h1 {
font-weight: bold;
font-size: 300%;
/*-webkit-text-stroke:1px black;*/
font-family: 'Open Sans', sans-serif;
/*text-align:right;*/
}
.carousel-inner .carousel-item img {
filter: brightness(50%);
}
#paddingrow {
padding: 25px;
}
#paddingrowLarge {
padding: 100px;
}
#accordionRightalign {
float: right;
}
#mycard {
float: right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row" id="paddingrow"></div>
<div class="row">
<div class="col-sm-12">
<h1 style="text-align:center">SUBSCRIBE TO OUR NEWSLETTER</h1>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="Enter your email">
</div>
<button class="btn btn-primary" style="box-sizing: border-box" type="submit">Subscribe now!</button>
</div>
</form>
</div>
</div>
</div>
</div>
Bootstrap rows have margin-right: -15px; margin-left: -15px; that's why the right edge doesn't lined up. Try to add mx-0 = margin-left:0 and margin-right: 0, a bootstrap class. In your nested row form.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row" id="paddingrow"></div>
<div class="row">
<div class="col-sm-12">
<h1 style="text-align:center">SUBSCRIBE TO OUR NEWSLETTER</h1>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<form>
<div class="row mx-0">
<div class="col pl-0 pr-3">
<input type="text" class="form-control" placeholder="Enter your email">
</div>
<button class="btn btn-primary" style="box-sizing: border-box" type="submit">Subscribe now!</button>
</div>
</form>
</div>
</div>
</div>
</div>
Make sure col in the container with margin and padding to zero.
Put your image into container with the width not greather than 100%.
I noticed my button wasn't in the column div, so I made two column div's, one size 10 and one size 2, put input in the first, put the button in the second, and it seems to work now.
Here is the fixed code:
<div class="container">
<div class="row" id="paddingrow"></div>
<div class="row">
<div class="col-sm-12">
<h1 style="text-align:center">SUBSCRIBE TO OUR NEWSLETTER</h1>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<form class="form">
<div class="row">
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter your email">
</div>
<div class="col-sm-2">
<button class="btn btn-primary w-100" type="submit">Subscribe now!</button>
</div>
</div>
</form>
</div>
</div>
</div>
I have a HTML which has a div with multiple inputs(with placeholder). For some reason the placeholder is not displayed properly.Also, need the 2 input button(text) to be placed next to each other.
Here is the jsfiddle.
http://jsfiddle.net/o2qt6910/
HTML
<div class="container">
<div class="row row-bordered voffset4">
<div class="col-md-12">
<label class="radio-inline"><input type="radio" name="optradio">Aisles</label>
<label class="radio-inline"><input type="radio" name="optradio">Poses</label>
<label class="radio-inline"><input type="radio" name="optradio">Exclusion Zones</label>
</div>
</div>
<div class="row row-bordered">
<div class="col-md-4">
<button type="button" class="btn" id="add-aisle">Add</button>
<div id="aisle-coordinate-container">
<div class="col-md-1"> <input type="text" class="form-control" id="inputKey" placeholder="X"> </div>
<div class="col-md-1"> <input type="text" class="form-control" id="inputValue" placeholder="Value"> </div>
</div>
</div>
<div class="col-md-8">
<canvas id="myCanvas"></canvas>
</div>
</div>
<!--<div class="row">-->
<!--<img src="/static/images/lena.png" alt="Italian Trulli">-->
<!--</div>-->
</div>
CSS
#import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css";
.row-bordered:after {
content: "";
display: block;
border-bottom: 5px solid #ccc;
margin: 0 25px;
}
.voffset { margin-top: 2px; }
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 30px; }
.voffset5 { margin-top: 40px; }
.voffset6 { margin-top: 60px; }
.voffset7 { margin-top: 80px; }
.voffset8 { margin-top: 100px; }
.voffset9 { margin-top: 150px; }
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
Try this:
<div class="row row-bordered">
<div class="col-md-4">
<div class="col-xs-12">
<button type="button" class="btn col-xs-2" id="add-aisle">Add</button>
</div>
<div id="aisle-coordinate-container">
<div class="col-sm-6">
<input type="text" class="form-control" id="inputKey" placeholder="X">
</div>
<div class="col-sm-6">
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
</div>
</div>
<div class="col-md-8">
<canvas id="myCanvas"></canvas>
</div>
</div>
There is some issue in Fiddle in alignments. I've tested this in my browser, input elements are now in one line with placeholders visible properly.
<div class="row row-bordered">
<div class="col-md-4">
<button type="button" class="btn" id="add-aisle">Add</button>
</div>
</div>
<div class="row">
<div id="coordinate-container">
<div class="col-md-3 col-sm-3"> <input type="text" class="form-control" id="inputKey" placeholder="X"> </div>
<div class="col-md-3 col-sm-3"> <input type="text" class="form-control" id="inputValue" placeholder="Value"> </div>
</div>
</div>
<div class="col-md-8">
<canvas id="myCanvas"></canvas>
</div>
</div>
Is this how you want it to be? I'm having a hard time visualising what is it that you want.
Do you want the add button and the inputs on the same line or next?
Edit: Changed the button to be on another row. There is no need for it to be on the same row, if you want it on another line.
Its not an issue with the code but more how you are using the bootstrap grid. Your parent container has col-md-4 but the div with the input boxes have col-md-1 which only 1/4th of the width to be shown so its squished down. If you remove the col-md-1 classes it shows up correctly.
Quick suggestion: If you want to use a col-md-x class you can add row class to the <div id="coordinate-container">
I made a custom navbar using Bootstrap 4's grid. This navbar is split into two parts: left part contains navbar items and right part contains a search box.
The problem is that the search box doesn't stay in the right part of my navbar no matter what. It always goes under the navbar items (left part).
Here is my HTML & CSS code:
.custom-navbar-buttons p {
display: inline;
color: black;
margin-right: 0.4rem;
}
.custom-navbar-buttons {
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
<body>
<div class="container">
<div class="row">
<div class="custom-navbar col-12 bg-success">
<div class="custom-navbar-buttons col-8">
<p>Button</p>
<p>Button</p>
<p>Button</p>
<p>Button</p>
<p>Button</p>
</div>
<div class="custom-navbar-search col-4">
<input type="text" name="search" placeholder="search this site">
</div>
</div>
</div>
</div>
</body>
How do I properly position a search box on the same line with navbar's items?
P.S.:
There are no tags around the "input" because I tried with them and without them, both ways didn't work so I didn't change code since the last try.
P.P.S.:
I've searched Google and Stackoverflow before posting my own question. None of the suggested answers there were of help to me. Most of people suggest that the navbar has too many items and so it can't fit the search box, moving it on the next line instead, but I think that's silly because I've tried it even with only 2 items in my navbar.
Is this what you want?
If you want to have the searchbar pulled to the right, add:
class="float-right"
.custom-navbar-buttons p {
display: inline;
color: black;
margin-right: 0.4rem;
}
.custom-navbar-buttons {
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
<body>
<div class="container">
<div class="row">
<div class="custom-navbar col-12 bg-success">
<div class="custom-navbar-buttons col-8">
<p>Button</p>
<p>Button</p>
<p>Button</p>
<p>Button</p>
<p>Button</p>
<input type="text" name="search" placeholder="search this site">
</div>
</div>
</div>
</div>
</body>
The search box doesn't stay on the right part of your links because both the custom-navbar-buttons and custom-navbar-search are block level elements. So they both tend to arrange on top of each other taking up the whole width of their parent div which is custom-navbar.
You need to make them both inline.
.custom-navbar-buttons p {
display: inline;
color: black;
margin-right: 0.4rem;
}
.custom-navbar-buttons {
padding-top: 0.4rem;
padding-bottom: 0.4rem;
display:inline-block;
}
.custom-navbar-search {
display: inline-block;
}
<body>
<div class="container">
<div class="row">
<div class="custom-navbar col-12 bg-success">
<div class="custom-navbar-buttons col-8">
<p>Button</p>
<p>Button</p>
<p>Button</p>
<p>Button</p>
<p>Button</p>
</div>
<div class="custom-navbar-search col-4">
<input type="text" name="search" placeholder="search this site">
</div>
</div>
</div>
</div>
</body>
Or you can simply use flexbox which will give you more control over your navbar.
.custom-navbar {
display:flex;
flex-flow: row nowrap;
align-items: center;
justify-content: space-between;
}
.custom-navbar-buttons p {
display: inline;
color: black;
margin-right: 0.4rem;
}
.custom-navbar-buttons {
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
<body>
<div class="container">
<div class="row">
<div class="custom-navbar col-12 bg-success">
<div class="custom-navbar-buttons col-8">
<p>Button</p>
<p>Button</p>
<p>Button</p>
<p>Button</p>
<p>Button</p>
</div>
<div class="custom-navbar-search col-4">
<input type="text" name="search" placeholder="search this site">
</div>
</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