Grid do not have margins in bootstrap - html

I have a simple page with bootstrap, and I want to create a grid which is one-line or two-line on smaller screend, but I always get something incorrect: with show-grid option see screenshot 1:
Button's div and IsDescending's div doesn't take all height, so layout looks ugly.
Without show-grid see screenshot 2:
all paddings are missing, design is even more terrible than previous.
How can I achieve behaviour like on their page, when all margins are correct and everything is beautiful?
My markup for now is:
<div class="row show-grid">
<div class="col-sm-5">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Query</span>
<input asp-for="Query" type="text" class="form-control" placeholder="Query" name="query">
</div>
</div>
<div class="col-sm-5">
<div class="input-group">
<span class="input-group-addon">Language</span>
<select asp-for="Language" asp-items="#Model.Languages" name="language" class="form-control">
<option disabled>Choose language</option>
</select>
</div>
</div>
<div class="col-sm-7">
<div class="col-sm-8">
<div class="input-group">
<span class="input-group-addon">Sorting field</span>
<select asp-for="SortField" asp-items="#Model.SortFields" name="sortField" class="form-control">
<option disabled>Choose sorting field</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div class="input-group">
Is Descending: <input asp-for="IsDescending" />
</div>
</div>
</div>
<div class="col-sm-1">
<button type="submit" id="searchButton" class="btn btn-default"><i class="fa fa-search fa-fw"></i></button>
</div>
</div>

Rules to Bootstrap:
Use rows and columns alternating
Rows have a negative margin to ensure that the columns respect the containers width.
container
| row
| | column
| | | row
| | | | column
| | | | column
| | | row
| | | | column
| | | | column
| | column
Always include col-xs-* on columns
This is to prevent floating issues. If your column is supposed to be 12 wide anyways dont just ignore the col-xs-12
<div class="row">
<div class="col-xs-12 col-md-6">
Some stuff
</div>
</div>
Mobile first
Start with the smallest screen size. Go from xs < sm < md < lg and you should be all good!
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
Some stuff
</div>
</div>
Small columns serve as larger columns
A sm column does serve as a md column as well, if not specified otherwise.
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
This is the same
</div>
<div class="col-xs-12 col-sm-6">
as this one
</div>
</div>
And at last:
Do not style rows and columns!
Feel free to add classes to modify them, but do not override them in any way!
Bad example:
.row {
border: 5px solid pink;
margin: 0 10px;
}
<div class="row">
<div class="col-xs-12">
This is a no-go!
</div>
</div>
Good example
.pink-bordered {
border: 5px solid pink;
margin: 0 10px;
}
<div class="row pink-bordered">
<div class="col-xs-12">
Totally fine
</div>
</div>

In a row, there are 12 cols, so calculate...
and put in a container.
test this
https://jsfiddle.net/marcDX/33v44bw0/
<div class="container">
<div class="row show-grid">
<div class="col-sm-6 one">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Query</span>
<input asp-for="Query" type="text" class="form-control" placeholder="Query" name="query">
</div>
</div>
<div class="col-sm-6 one">
<div class="input-group">
<span class="input-group-addon">Language</span>
<select asp-for="Language" asp-items="#Model.Languages" name="language" class="form-control">
<option disabled>Choose language</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 one">
<div class="input-group">
<span class="input-group-addon">Sorting field</span>
<select asp-for="SortField" asp-items="#Model.SortFields" name="sortField" class="form-control">
<option disabled>Choose sorting field</option>
</select>
</div>
</div>
<div class="col-sm-5 one">
<div class="input-group">
Is Descending:
<input asp-for="IsDescending" />
</div>
</div>
<div class="col-sm-1 one">
<button type="submit" id="searchButton" class="btn btn-default"><i class="fa fa-search fa-fw"></i></button>
</div>
</div>
and CSS to be happy with the little screens
.one {
margin-top: 20px;
}

At the moment, there are several things wrong with your structure so it seems like going over some basics of Bootstrap will help you move toward a nicer looking design. You should have columns that add up to 12 within each row. For example:
<div class="container">
<div class="row">
<div class="col-sm-6">
<!-- left column -->
</div>
<div class="col-sm-6">
<!-- right column -->
</div>
</div>
</div>
If you want elements that divide those columns further, you will need new rows, and the children of those rows should also add up to 12 (or less than 12 if you want empty space to the right). That might look something like this:
<div class="container">
<div class="row">
<div class="col-sm-6">
<!-- left column -->
<div class="row"><!-- Nested Row. Children columns add up to 12 -->
<div class="col-sm-7">
7/12 of the left side
</div>
<div class="col-sm-5">
5/12 of the left side
</div>
</div>
</div>
<div class="col-sm-6">
<!-- right column -->
</div>
</div>
</div>
Here's a final example with background colors and a screenshot to visualize it:
<div class="container">
<div class="row">
<div class="col-sm-6" style="background-color:gray;">
<h3>Left Column</h3>
<div class="row"><!-- Nested Row. Children columns add up to 12 -->
<div class="col-sm-7" style="background-color:lightblue;">
This is 7/12 of the left side
</div>
<div class="col-sm-5" style="background-color:lightgreen;">
This is 5/12 of the left side
</div>
</div>
</div>
<div class="col-sm-6" style="background-color:orange;">
<h3>Right Column</h3>
<div class="row"><!-- Nested Row. Children columns add up to 12 -->
<div class="col-sm-4" style="background-color:lightblue;">
This is 4/12 of the right side
</div>
<div class="col-sm-8" style="background-color:lightgreen;">
This is 8/12 of the right side
</div>
</div>
</div>
</div>
</div>
Hopefully this will help you understand how to have structure your elements. Also, as you pointed out, rows don't have any space between them by default so you can add space between rows with some simple css such as
.row {
margin-top: 10px;
margin-bottom: 20px;
}
One last tip: when using inputs, checkboxes, selects, etc., I always look at the classes and structure being used in the Bootstrap docs here. Without using the correct classes and DOM element structure, things won't look quite right. Bootstrap takes practice so good luck!

Related

Bootstrap: Can't align inputs on the same row

I am still new to bootstrap and also html/css at that.
What I am trying to do is to align the inputs on the same row,
I've looked up advice and have put it in a container but the
two inputs are still showing on different rows.
html
<div class="container">
<div class="row">
<div class="col-md">
<h3>Startdate From:</h3>
<input name="stardatefromDTP" type="date" />
</div>
<div class="col-md">
<h3>Startdate To:</h3>
<input name="stardatetoDTP" type="date" />
</div>
</div>
</div>
Can anyone help me out with this?
This will work, though you'll need to mess around with the column sizes to get the formatting exactly how you would like:
<div class="container">
<div class="row">
<div class="col-md">
<div class="row">
<div class="col">
<h3>Startdate From:</h3>
</div>
<div class="col">
<input name="stardatefromDTP" type="date" />
</div>
</div>
</div>
<div class="col-md">
<div class="row">
<div class="col">
<h3>Startdate To:</h3>
</div>
<div class="col">
<input name="stardatetoDTP" type="date" />
</div>
</div>
</div>
</div>
Alternatively you can use the label element instead:
<label class="h3" for="startdate">Startdate From:</label>
<input type="date" class="form-control" id="startdate" />
I believe h3 is a block element so the col-md will stretch to accommodate. Try col-md-6 to force it to be smaller. The col classes refer to columns and bootstrap divides the screen into 12, so col-md-6 should make room for 2 inputs in 1 row.

div positions are not being responsive css

I am trying to implement a single page application where I want divs to display one below the other. But on resizing the viewport to various screen sizes, the positioning is getting overlapped and leaving extra spaces in between. I have codepen example to explain the problem in a better way.
https://codepen.io/SaloniDesai/pen/zPBZJr
How to make the divs appear same for every screen size ?Do i need to shuffle the way I have created the layout of the page ?
<div id="headliner" class="jumbotron text-center">
<h1>SearchGIFY app</h1>
<p>search for any GIF you want!</p>
</div>
<div id="search">
<form>
<input type="search" ng-model="vm.search.gif" value="" placeholder="type what you're looking for" />
<button type="submit" class="btn btn-primary" ng-click="vm.performSearch()">Search</button>
</form>
</div>
<div class="row">
<div class="card">
<img ng-repeat="g in vm.giphies" ng-src="{{g.images.original.url}}" height="{{g.images.fixed_height}}" title="{{g.title}}">
</div>
</div>
<div class="jumbotron text-center" id="trendingBar">
<h3>Trending gifs</h3>
<div class="row">
<div class="thumbnail">
<img ng-repeat="trending in vm.trendingGifs" ng-src="{{trending.images.original.url}}" height="{{trending.images.fixed_height.height}}" title="{{trending.title}}">
</div>
</div>
</div>
First, your bootstrap structure isn't good, there isn't container, neither rows or col.
Try this one:
<div class="container-fluid">
<div class="row">
<div id="headliner col-md-12" class="jumbotron text-center">
<h1>SearchGIFY app</h1>
<p>search for any GIF you want!</p>
</div>
</div>
<div class="row">
<div id="search">
<div class="col-md-12">
<form class="form-inline text-center col-md-6 col-md-offset-3">
<div class="form-group">
<input class="form-control" type="search" ng-model="vm.search.gif" value=""
placeholder="type what you're looking for"/>
</div>
<button type="submit" class="btn btn-primary" ng-click="vm.performSearch()">Search</button>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card">
<img ng-repeat="g in vm.giphies" ng-src="{{g.images.original.url}}" height="{{g.images.fixed_height}}"
title="{{g.title}}">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="jumbotron text-center" id="trendingBar">
<h3>Trending gifs</h3>
<div class="thumbnail">
<img ng-repeat="trending in vm.trendingGifs" ng-src="{{trending.images.original.url}}"
height="{{trending.images.fixed_height.height}}" title="{{trending.title}}">
</div>
</div>
</div>
</div>
Second, you add a lot of absolute class with % height and width. You don't have to do that if you're using bootstrap, all the responsive stuff is handled by the bootstrap grid with col classes. Take a quick look at the grid bootstrap documentation : https://getbootstrap.com/docs/3.3/css/#grid
Here's the codepen working responsively with some modification : https://codepen.io/anon/pen/MOemgw ;)

How to fix overlapping inputs in Bootstrap 2

I'm having issues with input boxes overlapping each other as the screen starts shrinking down in width. Is there way to fix this in bootstrap 2 files or directly adjusting the css inline?
Here is the main page that holds the content.
<div class="content-center">
<div class="container">
<div class="row-fluid">
<div class="span9">
<div class="content-area">
//WHERE CONTENT IS LIVING
</div>
</div>
<div class="span3">
<div class="sidebar">
<div class="content-area">
</div>
</div>
</div>
</div>
</div>
</div>
Here is the actual code where the content is at.
<div class="well">
<div class="row-fluid">
<div class="span4">
<h4>Dinner Banquet w Cocktail Reception Total:</h4>
<div class="input-prepend">
<span class="add-on" style="font-size:24px;">$</span><INPUT NAME="xbrunchdinneronlytotal" TYPE="text" style="font-weight:bold; font-size:18px; color:#2e713b; background-color:#ffffff;" onKeyUp="javascript:getbrunchdinnertotal(this);" value="0" >
</div>
</div>
<div class="span4">
<h4>Wine Tour:</h4>
<div class="input-prepend">
<span class="add-on" style="font-size:18px;">Qty</span>
<input type="text" name="xwinetouronly" onKeyUp="javascript:getwinetouronlytotal(this);" placeholder="Enter Quantity">
</div>
<h4>Total:</h4>
<div class="input-prepend">
<span class="add-on" style="font-size:24px;">$</span>
<INPUT NAME="xwinetouronlytotal" TYPE="text" style="font-weight:bold; font-size:18px; color:#2e713b; background-color:#ffffff;" onKeyUp="javascript:getwinetouronlytotal(this);" value="0"></div>
</div>
<div class="span4">
<h4>Exhibit Fee:</h4>
<div class="input-prepend">
<span class="add-on" style="font-size:24px;">$</span>
<INPUT NAME="xhibittotal" TYPE="text" style="font-weight:bold; font-size:18px; color:#2e713b; background-color:#ffffff;" onKeyUp="javascript:getgolftotal(this);" value="0" >
</div>
</div>
</div>
</div>
Here is the browser width at 1199px
And here is the browser width at 979px
So is there any way to fix this. I know I can mess with the media query in my own custom css but im also wondering if I can fix this in the bootstrap 2 source files. Or Just fix this directly with inline CSS
Put all your inputs into columns
<div col-lg-4 col-lg-4 col-sm-12 col-sm-12>
Dinner Banuqet
//input field
</div>
<div col-lg-4 col-lg-4 col-sm-12 col-sm-12>
Wine Tour
//input field
</div>
<div col-lg-4 col-lg-4 col-sm-12 col-sm-12>
Exhibit Fee
//input field
</div>
on a large and meduim screen there will be 3 columns with the content taking up the whole screen. On small and extra small screens the content will be vertically aligned. You can add the cols directly into your input-append class

Change position order in bootstrap when smaller screen

As you can see in the following pictures, when i make my screen smaller, naturally the second element goes below the first element, but i want to keep this order, 1,3,2.
That is because the third element should be below the first element.
Any way to acomplish this?
<%--MODULOS--%>
<div class="col-md-6">
<div class="row">
<label >Módulos</label>
<select class="col-xs-12" multiple="multiple" id="cboModulos" name="cboModulos">
</select>
</div>
</div>
<%--RANGO DE FECHAS--%>
<div class="col-md-6">
<div class="row rowPadding">
<%--RANGO DE FECHAS--%>
<div class="row">
<label class="paddingLabelBigDevice">Rango de Fechas</label>
</div>
<%--DESDE--%>
<div class="row">
<label for="txtFechaIni" class="col-md-2 removePadding lineHeightCampos35" >Desde</label>
<input type="text" name="fechaInicio" class="col-xs-12 col-md-10" id="txtFechaIni" style="display: inline; white-space: nowrap;" data-beatpicker="true" data-beatpicker-format="['DD','MM','YYYY'],separator:'/'" data-beatpicker-extra="customOptionsDataPicker" data-beatpicker-module="today,clear" />
</div>
<%--HASTA--%>
<div class="row">
<label for="txtFechaFin" class="col-xs-12 col-md-2 removePadding lineHeightCampos35">Hasta</label>
<input type="text" class="col-xs-12 col-md-10" name="FechaFin" id="txtFechaFin" data-beatpicker="true" data-beatpicker-format="['DD','MM','YYYY'],separator:'/'" data-beatpicker-extra="customOptionsDataPicker" data-beatpicker-module="today,clear" />
</div>
</div>
</div>
</div>
<div class="row">
<%--TIPOS DE DOCUMENTOS--%>
<div class="col-md-6">
<label id="lblTipoDoc">Seleccione un tipo de documento ...</label>
<input id="txtIdTipoDoc" hidden="hidden" />
<div id="divContenedorTipoDoc">
<div id="divTiposDoc">
</div>
</div>
</div>
Can't you join elements 1 and 3 as if they were a single element? That way you ensure that element 3 will allways be below element 1
<%--MODULOS--%>
<div class="col-md-6">
<div class="row">
<label >Módulos</label>
<select class="col-xs-12" multiple="multiple" id="cboModulos" name="cboModulos">
</select>
</div>
<div class="row">
<label id="lblTipoDoc">Seleccione un tipo de documento ...</label>
<input id="txtIdTipoDoc" hidden="hidden" />
<div id="divContenedorTipoDoc">
<div id="divTiposDoc">
</div>
</div>
</div>
</div>
<%--RANGO DE FECHAS--%>
<div class="col-md-6">
<div class="row rowPadding">
<%--RANGO DE FECHAS--%>
<div class="row">
<label class="paddingLabelBigDevice">Rango de Fechas</label>
</div>
<%--DESDE--%>
<div class="row">
<label for="txtFechaIni" class="col-md-2 removePadding lineHeightCampos35" >Desde</label>
<input type="text" name="fechaInicio" class="col-xs-12 col-md-10" id="txtFechaIni" style="display: inline; white-space: nowrap;" data-beatpicker="true" data-beatpicker-format="['DD','MM','YYYY'],separator:'/'" data-beatpicker-extra="customOptionsDataPicker" data-beatpicker-module="today,clear" />
</div>
<%--HASTA--%>
<div class="row">
<label for="txtFechaFin" class="col-xs-12 col-md-2 removePadding lineHeightCampos35">Hasta</label>
<input type="text" class="col-xs-12 col-md-10" name="FechaFin" id="txtFechaFin" data-beatpicker="true" data-beatpicker-format="['DD','MM','YYYY'],separator:'/'" data-beatpicker-extra="customOptionsDataPicker" data-beatpicker-module="today,clear" />
</div>
</div>
</div>
</div>
Or something like that.
Still, the proper way to build a bootstrap responsive grid is columns inside rows. You are doing it inverse, you have rows inside columns
Take a look the the bootstrap docs - column ordering on how to do this.
One thing to keep in mind is that you will want to order elements on your page in the order they would be laid out on a mobile device rather a desktop view.
You could do it as pablito.aven said, just by using two col-md-6 container instead of three.
<div class="col-md-6">
<row>A</row>
<row>C</row>
</div>
<div class="col-md-6">B</div>
Otherwise if you want to keep them in seperate col-md-6 container:
<div class="col-md-6 first">A</div>
<div class="col-md-6 third">C</div>
<div class="col-md-6 second">B</div>
you may simply change the flexbox order attribute when you have a small screen.
<style>
#media only screen and (max-width : 768px) {
.first{
order: 1;
}
.second{
order: 2;
}
.third{
order: 3;
}
}
</style>

Add content to top-right area of rows

After various attempts with pull-right, float style and row-fluid, I decided to ask here:
What I try to do is simply to have a Map appear to the right of a set of rows.
Here is how it looks right now:
Which is not too far from what I want, but the name row plus any following rows should appear below each other.
Here is how my HTML looks:
<div class="panel-body">
<div class="row-fluid">
<div class="col-lg-10 pull-right">
<google-map id="my-map" bounds="map.bounds" events="map.events"
center="map.center" zoom="map.zoom" draggable="true"
control="map.control"> <marker ng-if="positionMarker"
coords="positionMarker" icon="positionMarker.icon"> </marker> </google-map>
</div>
<div class="col-lg-4">
<div class="input-group">
<span class="input-group-addon">Number</span> <input type="number"
class="form-control" placeholder="Nr">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">Name</span> <input type="text"
class="form-control" placeholder="Name">
</div>
</div>
</div>
</div>
I bet this is a typical scenario but I have failed to find an example.
Other attempts that makes name appear below number, moves it below the map.
Is it perhaps possible to avoid having the map take up vertical space in the Bootstrap grid system?
You should use a 2-col layout :
Left column for your inputs
Right column for your Google Map
Plus, remember to put your .input-group inside a .form-group to get paddings/margins set to Bootstrap default values.
Here's a working example (click on Full page for a better view):
body {
padding-top: 25px;
}
.map {
width: 100%;
height: 150px;
background: tomato;
}
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel heading</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6">
<form role="form">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Number</span> <input type="number"
class="form-control" placeholder="Nr">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Name</span> <input type="text"
class="form-control" placeholder="Name">
</div>
</div>
</form>
</div>
<div class="col-xs-6">
<div class="map"></div>
</div>
</div>
</div>
</div>
</div>