I want to display 4 columns in AngularJS:
This is my html so far:
<div class="row">
<div class="col-md-6">
<div class="col-md-6">
<div class="row">
<div class="col-md-6">Desc1:</div>
</div>
<div class="row">
<div class="col-md-6"> Desc2:</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
{{value1}}
</div>
</div>
<div class="row">
<div class="col-md-6">
{{value2}}
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
Desc1:
</div>
</div>
<div class="row">
<div class="col-md-6">
Desc2:
</div>
</div>
<div class="row">
<div class="col-md-6">
Desc3:
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
{{value1}}
</div>
</div>
<div class="row">
<div class="col-md-6">
{{value2}}
</div>
</div>
<div class="row">
<div class="col-md-6">
{{value3}}
</div>
</div>
</div>
What I want to display is something like this:
Desc1 value1 Desc1 value1
Desc2 value2 Desc2 value2
Desc3 value3
For example if one value returns nothing I want that row to be empty. With my current code, if one value returns nothing then the next value gets shifted over and displayed. This messes up everything past that point.
With CSS (which is a better way to go)
.test {
display: inline-block;
margin: 0;
}
<div>
<div>A</div>
<div class="test"></div>
<div>C</div>
</div>
Related
i simply want to join two columns in Bootstrap vertically. Here is the code:
<div class="container">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
</div>
Here is an illustration of what i mean:
You can do it this way
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
1
</div>
<div class="col-md-12">
2
</div>
</div>
</div>
<div class="col-md-6">
3
</div>
</div>
</div>
Maybe something like this?
<div class="row">
<div class="col-6">
<div class="row " >
1.
</div>
<div class="row ">
2.
</div>
</div>
<div class="col-6 ">
3.
</div>
</div>
I want to achieve something like this
So, in the image , A is occupying two rows and B is occupying two columns
I tried, something like this, but as you can see, the logo is never
two column wide, because it is inside a nested row, so it never looks aligned , it always looks shorter or larger
.row{
border:1px solid red;
}
.row div{
min-height: 100px;
border:1px solid black;
}
<div class="container-fluid">
<div class="row upper-row">
<div class="col-md-7" id="">
<div class="row">
<div class="col-md-12">
x
</div>
</div>
<div class="row">
<div class="col-md-8">
s
</div>
<div class="col-md-4">
LOGO
</div>
</div>
</div>
<div class="col-md-5" id="">
A
</div>
</div>
<div class="row bottom-row">
<div class="col-md-5" id="">
</div>
<div class="col-md-7" id="">
B
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-12">
</div>
</div>
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
</div>
<div class="col-md-4">
A
</div>
</div>
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
B
</div>
</div>
I want to show in the window-modal the info and image of a product but I do not know to put an image with it large is various rows of the grid.
My code is:
<div class="row">
<div class="row">
<div class="col-md-6 descFields impFields">
CODI
</div>
<div class="col-md-6 .offset-md5">
<img class='img-modal' src='prod/images/nofoto.jpg'>
</div>
</div>
<div class="row">
<div class="col-md-6 descFields impFields">
EDICIÓ
</div>
<div class="col-md-6">
</div>
</div>
<div class="row">
<div class="col-md-6 descFields impFields">
PÀGINA
</div>
<div class="col-md-6">
</div>
</div>
<div class="row">
<div class="col-md-6 descFields impFields">
MODIF.
</div>
<div class="col-md-6">
</div>
</div>
<div class="row">
<div class="col-md-6 descFields impFields">
USER
</div>
<div class="col-md-6">
</div>
</div>
</div>
I would like that all columns are in the same distance:
I'm trying to use offset parameters and child parameters but It's not working :(
You can rewrite your code structure..
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12 descFields impFields">
CODI
</div>
<div class="col-md-12 descFields impFields">
EDICIÓ
</div>
<div class="col-md-12 descFields impFields">
PÀGINA
</div>
<div class="col-md-12 descFields impFields">
MODIF.
</div>
<div class="col-md-12 descFields impFields">
USER
</div>
</div>
</div>
<div class="col-md-6">
<img class='img-modal' src='prod/images/nofoto.jpg'>
</div>
</div>
divide grid in 2 section first section for data and second for image...
I am using twitter bootstrap and trying to align two divs that belong to different columns.
The code so far:
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<h2>header1</h2>
<div class="row">
<div class="col-md-2">
1
</div>
<div class="col-md-4">
2
</div>
</div>
<div class="row">
<div class="col-md-2">
1
</div>
<div class="col-md-4">
2
</div>
</div>
<div class="row">
<div class="col-md-2">
1
</div>
<div class="col-md-4">
2
</div>
</div>
<div class="row">
<div class="col-md-2">
1
</div>
<div class="col-md-4">
2
</div>
</div>
<div class="row">
<div class="col-md-2">
1
</div>
<div class="col-md-4">
2
</div>
</div>
<h2>header2</h2>
<div class="row">
<div class="col-md-2">
3
</div>
<div class="col-md-4">
4
</div>
</div>
</div>
<div class="col-md-6">
<h2>header3</h2>
<div class="row">
<div class="col-md-2">
3
</div>
<div class="col-md-4">
4
</div>
</div>
<h2>header4</h2>
<div class="row">
<div class="col-md-2">
3
</div>
<div class="col-md-4">
4
</div>
</div>
</div>
</div>
</div>
The above code produces the layout below:
Is there any way to align vertically header4 with header2 (and thus leave space between the end of the div of header3 and the start of the div of header4?
Edit: when I resize my window and make it smaller I want to keep (header1 and header2) AND (header3 and header4) together (ie header2 below header1). This is the current case in the provided html code.
Thank you
There is - you need to alter your HTML so instead of simply having a two column layout, you have a grid based two row two column layout, e.g (simplified)
<div class='row'>
<div class='col-md-6'>
<h1>Header 1</h1>
</div>
<div class='col-md-6'>
<h1>Header 3</h1>
</div>
</div>
<div class='row'>
<div class='col-md-6'>
<h1>Header 2</h1>
</div>
<div class='col-md-6'>
<h1>Header 4</h1>
</div>
</div>
I'm using twitter bootstrap 3 for the CSS framework. Basically I have 2 rows with 3 columns of articles.
Option 1
first approach which is using below code (skeleton), Im able to follow exactly like sample design (div in column will position to below) but if Im using this approach, is hard to integrate with backend.
<div class="row">
<div class="col-sm-4">
<div class="row">
<div class="col-md-12">
<div class="post">
...
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="post">
...
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="row">
<div class="col-md-12">
<div class="post">
...
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="row">
<div class="col-md-12">
<div class="post">
...
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="post">
...
</div>
</div>
</div>
</div>
</div>
Option 2:
So, i try using this approach, but Im unable to remove the gap between 2 div. Please help
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-sm-4">
<div class="post">
...
</div>
</div>
<div class="col-sm-4">
<div class="post">
...
</div>
</div>
<div class="col-sm-4">
<div class="post">
...
</div>
</div>
<div class="col-sm-4">
<div class="post">
...
</div>
</div>
<div class="col-sm-4">
<div class="post">
...
</div>
</div>
</div>
</div>
</div>
Have a look at plugins like Wookmark or Masonry