Actually I don't know how to describe the issue. I have designed a model, in which I have specify some elements in class row. But after 3 elements it leaves unnecessary spaces. Is there any issue with bootstrap class row?.Checkout the link. Click on register
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
<div class="col-sm-4 standard">
<div class="form-group">
<div class="col-sm-12">
</div>
</div>
</div>
<div class="col-sm-4 school_name">
<div class="form-group">
<div class="col-sm-12">
</div>
</div>
</div>
<div class="col-sm-4 occupation">
<div class="form-group">
<div class="col-sm-12">
</div>
</div>
</div>
<div class="col-sm-4 father_income">
<div class="form-group">
<div class="col-sm-12">
</div>
</div>
</div>
<div class="col-sm-4 blood_group">
<div class="form-group">
<div class="col-sm-12">
</div>
</div>
</div>
<div class="col-sm-4 type_of_wastage">
<div class="form-group">
<div class="col-sm-12">
</div>
</div>
</div>
<div class="col-sm-4 photo">
<div class="form-group">
<div class="col-sm-12">
</div>
</div>
</div>
<div class="col-sm-4 edit_photo" style="display: none;">
<div class="form-group">
</div>
</div>
<div class="col-sm-4 city">
<div class="form-group">
<div class="col-sm-12">
</div>
</div>
</div>
<div class="col-sm-4 address">
<div class="form-group">
</div>
</div>
</div>
The Bootstrap grid syntax is wrong. A row in Bootstrap contains 12 columns. If you have already 12 columns in a row, you must open a new row. In your case, you must open a new row after you used the col-sm-4 class 3 times. So it must look like this:
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>
set some min-height to all columns in register
.modal-body .col-sm-4 {
min-height: 86px;
}
You can't put all these columns in one row. with col-sm-4, you can have only 3 columns per row. after that, you need to create another row. Because in bootstrap grid system there are 12 columns per row. If you need all hose in one row, you have to use col-sm-1. But I don't think it would be a good idea. Better thing is, since you have 10 elements here, either use col-sm-4 in 4 rows or col-sm-3 in 3 rows.
You have write wrong syntax.One row in Bootstrap contains 12 blocks only. That's why unnecessary space is being shown.
Related
I'm trying to figure out how to do the following grid with Bootstrap.
i would like to know if it is possible in first place to create this type of grid.
doing horizontal divs such as 1,2 ,4, 5 ,7 is udnerstandable, but what about div 3&6 that cover multiple rows.
i used:
<div class="col-sm-4 col-md-4">4</div>
<div class="col-sm-4 col-md-4">5</div>
<div class="col-sm-4 col-md-8">6</div>
to create 4 5 6 part but what i get looks like this:
A very rough idea of how you might do it:
<div class="container">
<div class="row">
<div class="col-9 row">
<div class="col-6 box">1</div>
<div class="col-6 box">2</div>
<div class="col-4 row">
<div class="col-12 box">4</div>
<div class="col-12 box">5</div>
</div>
<div class="col-8 row">
<div class="col-12 box">6</div>
</div>
<div class="col-12 box">7</div>
</div>
<div class="col-3 row">
<div class="box">3</div>
</div>
</div>
</div>
You basically have to just draw rectangles around your groups and that is how they end up being ordered. e.g. first you draw a rectangle around everything but 3 and 3, those are your first columns. Then rectangle around 1 and 2 then 4, 5 and 6 and finally 7 etc.
This is the grid structure you are trying to achieve. You can add style to this to achieve the exact output.
<div class="col-sm-9">
<div class="col-sm-12">
<div class="col-sm-6">1</div>
<div class="col-sm-6">2</div>
</div>
<div class="col-sm-4">
<div class="col-sm-12">4</div>
<div class="col-sm-12">5</div>
</div>
<div class="col-sm-8">
<div class="col-sm-12">6</div>
</div>
<div class="col-sm-12">
7
</div>
</div>
<div class="col-sm-3">
3
</div>
I am going to show a little example.
<div class="container">
<div class="row">
<form class="col-12 form-group">
// some code
</form>
<div class="col-12">
// some text for description
</div>
</div>
</div>
As you can see, theses columns are in the same row, but I can separate them. Like that:
<div class="container">
<div class="row">
<form class="col-12 form-group">
// some code
</form>
</div>
<div class="row">
<div class="col-12">
// some text for description
</div>
</div>
</div>
There will be any differece?
Yes, in the first case they belong to the same flex container and in other one no. This make them different. You may see the difference when adding more properties:
A trivial one:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<div class="row flex-column-reverse">
<form class="col-12 form-group">
one
</form>
<div class="col-12">
two
</div>
</div>
</div>
<div class="container">
<div class="row flex-column-reverse">
<form class="col-12 form-group">
one
</form>
</div>
<div class="row flex-column-reverse">
<div class="col-12">
two
</div>
</div>
</div>
You cannot use flex-column-reverse in the second case to change the order.
I have a table like display made using the bootstrap grid classes.
The body rows of which are populated dynamically with javascript.
The table is hidden or shown depending upon the state of the application.
I have a div with an id which contains a row for the header columns and another div with another id to hold the body rows like this:
<div id="myDynamicList" style="display:none;">
<div class="row" id="myHeaderRow">
<div class="col-sm-4 tabledHeader">Service Id</div>
<div class="col-sm-4 tabledHeader">Service Type</div>
<div class="col-sm-1 tabledHeader">Synchronised</div>
<div class="col-sm-1 tabledHeader">Singleton</div>
<div class="col-sm-2 tabledHeader"></div>
</div>
<div id="myListOutput"></div>
</div>
In bootstrap 3.5 this works fine. In 4 every col is on a new line when they should be in-line.
If I remove the wrapping divs such as the myListOutput and myDynamicList the layout is corret. Cols side by side filling the comlete row and each row on a new line.
I need the wrapping divs in order to get a hook in the DOM to append my child elements to but this throws the layout
How should this be done in bootstrap 4.
why don't you wrap each line of the table body (inside the div with id="myListOutput") with a div that has a 'row' class and set flex-wrap to nowrap :
<div id="myDynamicList">
<div class="row flex-nowrap" id="myHeaderRow">
<div class="col-4 tabledHeader">Service Id</div>
<div class="col-4 tabledHeader">Service Type</div>
<div class="col-2 tabledHeader">Synchronised</div>
<div class="col-1 tabledHeader">Singleton</div>
<div class="col-1 tabledHeader"></div>
</div>
<div id="myListOutput">
<div class="row flex-nowrap">
<div class="col-4"> first </div>
<div class="col-4"> second </div>
<div class="col-2"> third </div>
<div class="col-1"> fourth </div>
<div class="col-1"> fifth </div>
</div>
<div class="row flex-nowrap">
...
</div>
...
</div>
</div>
The way I got it to work in the end was to add another set of row and col classes like this...
<div id="myDynamicList" style="display:none;" class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-4 tabledHeader">Service Id</div>
<div class="col-sm-4 tabledHeader">Service Type</div>
<div class="col-sm-1 tabledHeader">Synchronised</div>
<div class="col-sm-1 tabledHeader">Singleton</div>
<div class="col-sm-2 tabledHeader"></div>
</div>
</div>
</div>
<div class="row" id="listBody">
<div class="col-sm-12" id="myListOutput"></div>
</div>
I have more than 12 columns in the row which makes the columns stack vertically, but the top ones have different size compared to bottom ones.
<div class="container-fluid">
<div class="row">
<div class="col-md"></div>
<div class="col-md"></div>
<div class="col-md"></div>
<div class="col-md"></div>
<div class="col-md"></div>
</div>
</div>
I am trying to have responsive (allow grow) columns but all columns should carry same width.
You can try insert a col-md-4 with no content or insert only 2 col-md-4 on a row, See if this help you. Look at full screen. (Modified the answer with the help of the comments)
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4">
1
</div>
<div class="col-md-4">
2
</div>
<div class="col-md-4">
3
</div>
</div>
<div class="row">
<div class="col-md-4">
1
</div>
<div class="col-md-4">
2
</div>
<div class="col-md-4" id="last-column">
</div>
</div>
</div>
You don't need custom CSS for this. You should use the already defined responsive bootstrap classes for displaying. Also another .row is not needed but could be useful for another row.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4">
1
</div>
<div class="col-md-4">
2
</div>
<div class="col-md-4">
3
</div>
<div class="col-md-4">
4
</div>
<div class="col-md-4">
5
</div>
<div class="col-md-4 d-none d-lg-block">
6
</div>
</div>
</div>
I can not get thet rows on the page. I'm always page halved into two horizontal section and I want four vertical sections.
Here is PICTURE:
:
Here is fiddle of my code that you can easy know that what I want FIDDLE.
I only need that middle content to be like on picture.. 4 vertical columns and in that columns that i have 2 blocks.
Here is my try :
<div class="col-md-12">
<div class="pane border-right">
<div>
<div style="float: left;">
</div>
</div>
<div class="col-md-6 specifica ">
<div class="col-sm-3 border-right-dotted">
a
</div>
<div class="col-sm-3 border-right-dotted">
b
</div>
</div>
<div class="col-md-3 specifica ">
<div class="col-sm-3 border-right-dotted">
c
</div>
<div class="col-sm-3 ">
d
</div>
</div>
With this code you can create 2 rows with 4 columns like the picture,
example: http://jsfiddle.net/ignaciocorreia/rc2E7/1/
<div class="row">
<div class="col-sm-3 col-md-3">a</div>
<div class="col-sm-3 col-md-3">b</div>
<div class="col-sm-3 col-md-3">c</div>
<div class="col-sm-3 col-md-3">d</div>
</div>
----
<div class="row">
<div class="col-sm-3 col-md-3">a</div>
<div class="col-sm-3 col-md-3">b</div>
<div class="col-sm-3 col-md-3">c</div>
<div class="col-sm-3 col-md-3">d</div>
</div>
EDIT - 07-04-2017
With Boostrap 4 and flex box things change to:
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
Working example: https://codepen.io/igcorreia/pen/jBjbQP