I am trying to align the text "address" in left div vertically. But i am unable to.
Here is the code,
div.row {
border: 1px solid black;
padding: 10px;
}
.centre {
display: block;
text-align: center;
vertical-align: middle;
background: yellow;
height: 100%;
}
<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-3 centre">
<label>Address</label>
</div>
<div class="col-md-6">
<div class="row">
<!--nested row one-->
<div class="col-md-6">
<label>Street</label>
</div>
<div class="col-md-6">
<input name="stname">
</div>
</div>
<div class="row">
<!--nested row two-->
<div class="col-md-6">
<label>Landmark</label>
</div>
<div class="col-md-6">
<input name="lmark">
</div>
</div>
<div class="row">
<!--nested row three-->
<div class="col-md-6">
<label>Zip code</label>
</div>
<div class="col-md-6">
<input name="zipcode">
</div>
</div>
</div>
</div>
<!--row end-->
</div>
What am i doing wrong. I am using bootsrap 3.
Plunker: https://plnkr.co/edit/cu4ZJVSp3jYTyBwz4NKB?p=preview (View Plunker in full screen)
I am trying to have result similar to this. The coloured borders are only for representation .
You are setting the styles to the center div, instead it should be the label inside the center div
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="script.js"></script>
<style>
div.row div{
border: 1px solid black;
padding: 10px;
}
.centre label{
display: block;
text-align: center;
vertical-align: middle;
background: yellow;
height: 100%;
padding:5px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 centre">
<label>Address</label>
</div>
<div class="col-md-6">
<div class="row"><!--nested row one-->
<div class="col-md-6">
<label>Street</label>
</div>
<div class="col-md-6">
<input name="stname">
</div>
</div>
<div class="row"><!--nested row two-->
<div class="col-md-6">
<label>Landmark</label>
</div>
<div class="col-md-6">
<input name="lmark">
</div>
</div>
<div class="row"><!--nested row three-->
<div class="col-md-6">
<label>Zip code</label>
</div>
<div class="col-md-6">
<input name="zipcode">
</div>
</div>
</div>
</div><!--row end-->
</div>
</body>
</html>
you can add this code in your CSS file to get vertical-align.
but first, you have to add a new class with row class
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="script.js"></script>
<style>
.vertical > div {
display: table-cell;
vertical-align: middle;
float: none;
}
.vertical > div {
display: table-cell;
vertical-align: middle;
float: none;
}
div.row div{
border: 1px solid black;
padding: 10px;
}
.centre label{
display: block;
text-align: center;
vertical-align: middle;
background: yellow;
height: 100%;
padding:5px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row vertical">
<div class="col-md-3 centre">
<label>Address</label>
</div>
<div class="col-md-6">
<div class="row"><!--nested row one-->
<div class="col-md-6">
<label>Street</label>
</div>
<div class="col-md-6">
<input name="stname">
</div>
</div>
<div class="row"><!--nested row two-->
<div class="col-md-6">
<label>Landmark</label>
</div>
<div class="col-md-6">
<input name="lmark">
</div>
</div>
<div class="row"><!--nested row three-->
<div class="col-md-6">
<label>Zip code</label>
</div>
<div class="col-md-6">
<input name="zipcode">
</div>
</div>
</div>
</div><!--row end-->
</div>
</body>
</html>
Here's a solution setting top margin/padding on columns not nested then cancelling top margin/padding in nested ones:
Plunkr
Relevant CSS:
[class*="col-"] {
border: 1px solid black;
padding: 10px;
}
.row:first-child [class*="col-"] {
margin-top: 10px;
background-color: lightgreen;
}
.row .row:first-child [class*="col-"] {
margin-top: -10px;
background-color: pink;
}
.row .row:not(:first-child) [class*="col-"] {
margin-top: 0;
background-color: lightblue;
}
Solution by #codegeek which avoids these problems is better imho :)
Code Pen
You can remove the offset and match it up to 12-grid system.
div.row {
border: 1px solid black;
padding: 10px;
}
.centre {
background: yellow;
top: 60px;
border: 1px solid blue;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-3 centre">
<label>Address</label>
</div>
<div class="col-xs-8 col-sm-offset-1" style="border:1px solid green">
<!--You can remove style and remove offset and change it to sm-9 -->
<div class="row">
<!--nested row one-->
<div class="col-xs-6">
<label>Street</label>
</div>
<div class="col-xs-6">
<input name="stname">
</div>
</div>
<div class="row">
<!--nested row two-->
<div class="col-xs-6">
<label>Landmark</label>
</div>
<div class="col-xs-6">
<input name="lmark">
</div>
</div>
<div class="row">
<!--nested row three-->
<div class="col-xs-6">
<label>Zip code</label>
</div>
<div class="col-xs-6">
<input name="zipcode">
</div>
</div>
</div>
</div>
<!--row end-->
</div>
As for now, margin-top is a worth option trying.
I positioned the left div by using top: 50%(takes the height of the parent) and then using translateY, which takes the height of the current element.
Since relative positioning didnt take % values, I have used absolute.
But giving absolute makes the div come out of the document flow, hence used "left" for the right sibling with the width of the left sibling.
.parent{
position: relative;
}
.centre{
background: yellow;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.right{
left: 25%;
/* width of left sibling, since col-md-3 is 25%*/
background: lightgreen;
}
Plnkr Link(with bootstrap) or JsFiddle (without Bootstrap)
Result:
Your vertical-align:middle doesn't work, because elements with display: block cannot be centered that way. An easy alternative would be to use display: flex.
Here is a snippet to demonstrate the way display:flex can be used to center pretty much everything:
div.row div{
border: 1px solid black;
padding: 10px;
}
.centre{
display: block;
text-align: center;
vertical-align: middle;
background: yellow;
height: 100%;
}
.flex {
display: flex;
align-items: center;
}
<div class="container-fluid">
<div class="row">
<div class="flex">
<div class="col-md-3 centre">
<label>Address</label>
</div>
<div class="col-md-6">
<div class="row"><!--nested row one-->
<div class="col-md-6">
<label>Street</label>
</div>
<div class="col-md-6">
<input name="stname">
</div>
</div>
<div class="row"><!--nested row two-->
<div class="col-md-6">
<label>Landmark</label>
</div>
<div class="col-md-6">
<input name="lmark">
</div>
</div>
<div class="row"><!--nested row three-->
<div class="col-md-6">
<label>Zip code</label>
</div>
<div class="col-md-6">
<input name="zipcode">
</div>
</div>
</div>
</div>
</div><!--row end-->
</div>
EDIT: maybe this guide might be of interest for you:
Centering in CSS: A Complete Guide
Related
I want to align a label, a text-input and an X sign next to each other using Bootstrap 4.
I managed to align the label and text-input but can't seem to do that with the X sign.
JSFiddle: https://jsfiddle.net/jptyuv5n/
How can we align that X sign next to the input field? What am I missing here?
.collection {
display: flex;
}
.collection img {
float: left;
width: 150px;
}
.collection .form {
display: inline-block;
width: 100%;
margin: 0px 15px;
}
.collection .form input {
display: inline-block;
width: 100%;
}
<div class="row">
<div class="col-6 collection">
<img src="https://via.placeholder.com/150/771796">
<div class="form">
<label>Text</label>
<input type="text" name="text1">
<span>X</span>
</div>
</div>
<div class="col-6 collection">
<img src="https://via.placeholder.com/150/771796">
<div class="form">
<label>Text</label>
<input type="text" name="text2">
<span>X</span>
</div>
</div>
</div>
Edit: I just saw in your question that you mentioned Bootstrap 4. Same result can be achieved with using bootstrap styles and 0 css lines from you.
The classes used in the snippet below are documented here: https://getbootstrap.com/docs/4.0/components/forms/#overview
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-12 collection">
<div class="row">
<div class="col-3">
<img src="https://via.placeholder.com/150/771796">
</div>
<div class="col-9">
<div class="form-row align-items-center">
<div class="col-sm-3 my-1">
<label>text</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-append">
<div class="input-group-text">X</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Old answer:
You can wrap the <input> and the <span> holding x in a div and use flex on it.
.collection {
display: flex;
}
.collection img {
float: left;
width: 150px;
}
.collection .form {
display: inline-block;
width: 100%;
margin: 0px 15px;
flex-direction: column; /* <- changed flex direction of form */
}
.collection .form input {
display: inline-block;
width: 100%;
}
.input-with-x { /* <- new classes added */
display: flex;
}
<div class="row">
<div class="col-6 collection">
<img src="https://via.placeholder.com/150/771796">
<div class="form">
<label>Text</label>
<div class="input-with-x"> <!-- <- new class used -->
<input type="text" name="text2">
<span>X</span>
</div>
</div>
</div>
</div>
I made an example to represent my current issue.
I want this structure. I tried height: 100% on the blue part but it didn't work, so I gave height: 80vh.
This is an issue because nothing is aligned anymore and gets worse if you make the windows smaller or bigger (not responsive).
How do I make the left and right side of the content aligned at the top and bottom with a margin-top of 5px to the black part?
.red {
background: red;
}
.blue {
background: blue;
height: 80vh;
}
.green {
background: green;
}
img {
width: 100%;
height: 100%;
}
.black {
background: black;
margin-top: 5px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12">
<div class="red">
<img src="https://www.w3schools.com/w3images/fjords.jpg" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="green">
<img src="https://www.w3schools.com/w3images/fjords.jpg" />
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="blue">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="black">
Hi
</div>
</div>
</div>
</div>
I tackled something similar to this and whipped up a jQuery solution to it that you might want to try, it's been working great for me.
Basically the function gets the height of the column you know is going to be the tallest. If that content is larger than the others it sets the height of the others to the same of the taller piece of content.
$(document).ready(function () {
var tallest = $(".red").height();
var shortcolumn1 = $(".blue").height();
if (tallest >= shortcolumn1) {
$(".blue").css("height",""+ tallest +"px");
$(".green").css("height",""+ tallest +"px");
}
else {
}
});
Change CSS, Your Footer height 25px;
.red {
background: red;
height:calc(50vh - 12.5px);
}
.blue {
background: blue;
height:calc(100vh - 25px);
}
.green {
background: green;
height:calc(50vh - 12.5px);
}
.red {
background: red;
height:calc(50vh - 12.5px);
}
.blue {
background: blue;
height:calc(100vh - 25px);
}
.green {
background: green;
height:calc(50vh - 12.5px);
}
img {
width: 100%;
height: 100%;
}
.black {
background: black;
margin-top: 5px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12">
<div class="red">
<img src="https://www.w3schools.com/w3images/fjords.jpg" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="green">
<img src="https://www.w3schools.com/w3images/fjords.jpg" />
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="blue">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="black">
Hi
</div>
</div>
</div>
</div>
add display:flex for the main row, min-height:100% for the col-xs-6 and height:100% for the blue box the code should look like:
.red {
background: red;
}
.blue {
background: blue;
height: 100%;
}
.green {
background: green;
}
img {
width: 100%;
height: 100%;
}
.black {
background: black;
margin-top: 5px;
}
.d-flex{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.mh-100{
min-height:100%;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row d-flex">
<div class="col-xs-6 mh-100">
<div class="row">
<div class="col-xs-12">
<div class="red">
<img src="https://www.w3schools.com/w3images/fjords.jpg" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="green">
<img src="https://www.w3schools.com/w3images/fjords.jpg" />
</div>
</div>
</div>
</div>
<div class="col-xs-6 mh-100">
<div class="blue">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="black">
Hi
</div>
</div>
</div>
</div>
Here I am trying to draw a horizontal line between the buttons. I have tried in many ways but I can't get it. I think I need to do some magics in CSS but I am new to HTML and CSS That's why I can't find the way to make it work.
I want:
I got this:
.divided {
display: flex;
align-items: center;
}
.divider {
flex-grow: 1;
border-bottom: 1px solid black;
margin: 5px
}
<div class="col-sm-9" style="padding-left:0px;padding-right:0px">
<div class="col-sm-12 row">
<div class="container" style="padding-left:0px;padding-right:0px">
<div class="row divided">
<div class="col-sm-3">
<button mat-mini-fab>1</button>
<span style="padding-left:15px">Login</span>
</div>
<span class="divider"></span>
<div class="col-sm-3">
<button mat-mini-fab>2</button>
<span style="padding-left:15px">Address</span>
</div>
<span class="divider"></span>
<div class="col-sm-3">
<button mat-mini-fab>3</button>
<span style="padding-left:15px">Mycart</span>
</div>
<span class="divider"></span>
<div class="col-sm-3">
<button mat-mini-fab>4</button>
<span style="padding-left:15px">Payment</span>
</div>
</div>
</div>
</div>
</div>
Can anyone help me to solve this ?
Update:
Use pseudo :after to <div class="col-sm-3 divder">
Instead using <span class="divider"></span> (-- remove it)
.divder:after{
content: '';
width: 71px;
height: 2px;
top: 15px;
background: black;
position: absolute;
right: -12px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-9" style="padding-left:0px;padding-right:0px">
<div class="col-sm-12 row">
<div class="container" style="padding-left:0px;padding-right:0px">
<div class="row divided">
<div class="col-sm-3 divder">
<button mat-mini-fab>1</button>
<span style="padding-left:15px">Login</span>
</div>
<div class="col-sm-3 divder">
<button mat-mini-fab>2</button>
<span style="padding-left:15px">Address</span>
</div>
<div class="col-sm-3 divder">
<button mat-mini-fab>3</button>
<span style="padding-left:15px">Mycart</span>
</div>
<div class="col-sm-3">
<button mat-mini-fab>4</button>
<span style="padding-left:15px">Payment</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I think you're trying to do the same as you would do when using a stepper
https://material.angular.io/components/stepper/overview
Using import {MatStepperModule} from '#angular/material/stepper';
and the correct elements will do the trick
You can use :after psuedo class
.divider:after {
height:1px;
width:40px;
content:'';
background: red;
position:absolute;
right:0px;
top:15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="col-sm-12" style="padding-left:0px;padding-right:0px">
<div class="col-sm-12 row">
<div class="container" style="padding-left:0px;padding-right:0px">
<div class="row divided">
<div class="col-sm-3">
<button mat-mini-fab>1</button>
<span style="padding-left:0px">Login</span>
<span class="divider"></span>
</div>
<div class="col-sm-3">
<button mat-mini-fab>2</button>
<span style="padding-left:0px">Address</span>
<span class="divider"></span>
</div>
<div class="col-sm-3">
<button mat-mini-fab>3</button>
<span style="padding-left:0px">Mycart</span>
<span class="divider"></span>
</div>
<div class="col-sm-3">
<button mat-mini-fab>4</button>
<span style="padding-left:0px">Payment</span>
</div>
</div>
</div>
</div>
</div>
Following code adds equally sized lines between menu items as long there is enough space.
/* all direct children of menu and item are laid out in a single row as long as there is enough space */
.menu,
.item {
display: flex;
flex-flow: row wrap;
}
/* all menu items can grow except the last one */
.item:not(:last-child) {
flex-grow: 1;
}
/* a horizontal line is appended to all items if space is available (except the last item) */
.item:not(:last-child):after {
content: '';
border-bottom: 1px solid #000;
height: 50%; /* centers line vertically */
flex-grow: 1;
margin-right: 10px;
}
/* not relevant for menu (typography and resets) */
button,
span {
font-family: Times;
font-size: 16px;
padding: 0;
border: 0;
margin-right: 10px;
}
/* not relevant for menu (rounded buttons) */
button {
background-color: #ddd;
border-radius: 50%;
height: 20px;
width: 20px;
}
<div class="menu">
<div class="item">
<button>1</button>
<span>Login</span>
</div>
<div class="item">
<button>2</button>
<span>Address</span>
</div>
<div class="item">
<button>3</button>
<span>Mycart</span>
</div>
<div class="item">
<button>4</button>
<span>Payment</span>
</div>
</div>
A
In my template
<div class="summary-card">
<div ng-repeat="cardData in summaryCardsCtrl.summaryDetails">
<div ng-switch ="cardData.uniqueCardsDataFlag">
<div ng-switch-when=true>
<div style="background-color: red; width:170px; height: 50px;">
1111111
</div>
</div>
<div ng-switch-default>
<div class="cool-grid">
<div style="background-color: blue; width:170px; height: 50px;">
222222
</div>
</div>
</div>
</div>
</div>
</div>
ng-switch will be true only once; hence the red div will be only one and the rest will be blue.
CSS looks like:
div.summary-card {
display: inline-block;
margin: 5px 10px 15px 0px;
display: flex;
}
.cool-grid {
display: flex;
flex-wrap: wrap;
border: 1px solid black;
}
Now, they all stack up on top of each other.
But I want them to show like:
I am not sure how to give classes inside such a ng-repeat to make them look like this.
so that only the blue divs inside ng-switch-default wraps around each other and not around the red div.
Please help.
UPDATE
Rendered HTML looks like:
<div class="summary-card">
<!----><div ng-repeat="cardData in summaryCardsCtrl.summaryDetails">
<div ng-switch="cardData.uniqueCardsDataFlag">
<!----><div ng-switch-when="true">
<!-- <div ng-include="'......'"></div> -->
<div style="background-color: red; width:170px; height: 50px;">
1111111
</div>
</div><!---->
<!---->
</div>
</div><!----><div ng-repeat="cardData in summaryCardsCtrl.summaryDetails">
<div ng-switch="cardData.uniqueCardsDataFlag">
<!---->
<!----><div class="cool-grid" ng-switch-default="">
<!-- <div ng-include="'.....'"></div> -->
<div style="background-color: blue; width:170px; height: 50px;">
222222
</div>
</div><!---->
</div>
</div><!----><div ng-repeat="cardData in summaryCardsCtrl.summaryDetails">
<div ng-switch="cardData.uniqueCardsDataFlag">
<!---->
<!----><div class="cool-grid" ng-switch-default="">
<!-- <div ng-include="'.....'"></div> -->
<div style="background-color: blue; width:170px; height: 50px;">
222222
</div>
</div><!---->
</div>
</div><!----><div ng-repeat="cardData in summaryCardsCtrl.summaryDetails">
<div ng-switch="cardData.uniqueCardsDataFlag">
<!---->
<!----><div class="cool-grid" ng-switch-default="">
<!-- <div ng-include="'......'"></div> -->
<div style="background-color: blue; width:170px; height: 50px;">
222222
</div>
</div><!---->
</div>
</div><!---->
</div>
I've knocked up a simplified version that I think does what you're after.
The outer div needs flex-wrap:wrap, the red one needs to have its flex-basis set at 100%. The blue ones will then wrap to the next column and be laid out out according to whatever rules you give them...
#outer{
height:200px;
border:1px solid grey;
display:flex;
flex-direction:column;
flex-wrap:wrap;
justify-content:space-between;
width:500px;
}
#red{
background-color:red;
width:100px;
flex-basis:100%;
}
.blue{
flex-basis:25%;
width:100px;
background-color:blue;
}
codepen here
Simply use the bootstrap grid to get the layout you want. You do not have to use display flex for that.
Below is an example fot the layout using bootstrap grid
.row {
background: #f8f9fa;
}
.col {
border: solid 1px #6c757d;
}
.red{
background-color:red;
padding: 10px;
margin: 10px;
height: 120px;
}
.blue{
background-color: blue;
padding: 10px;
margin: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-6" class="">
<div class="red">
sd
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<div class="blue">
sd
</div>
</div>
<div class="col-md-6">
<div class="blue">
sd
</div>
</div>
<div class="col-md-6">
<div class="blue">
sd
</div>
</div>
</div>
</div>
</div>
</div>
Check this layout. I have used flex for generating it
U can change the height of red block accordingly
Also the blue blocks will wrap automatically to next row, when it doesn't get enough width on the same line
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.summary-card {
display: flex;
flex-direction: row;
}
.left-sec,
.right-sec {
flex: 1;
display: flex;
}
.right-sec {
flex: 1;
display: flex;
flex-wrap: wrap;
}
<div class="summary-card">
<div class="left-sec">
<!---->
<div ng-repeat="cardData in summaryCardsCtrl.summaryDetails">
<div ng-switch="cardData.uniqueCardsDataFlag">
<!---->
<div ng-switch-when="true">
<!-- <div ng-include="'......'"></div> -->
<div style="background-color: red; width:170px; height: 50px;">
1111111
</div>
</div>
<!---->
<!---->
</div>
</div>
<!---->
</div>
<div class="right-sec">
<div ng-repeat="cardData in summaryCardsCtrl.summaryDetails">
<div ng-switch="cardData.uniqueCardsDataFlag">
<!---->
<!---->
<div class="cool-grid" ng-switch-default="">
<!-- <div ng-include="'.....'"></div> -->
<div style="background-color: blue; width:170px; height: 50px;">
222222
</div>
</div>
<!---->
</div>
</div>
<!---->
<div ng-repeat="cardData in summaryCardsCtrl.summaryDetails">
<div ng-switch="cardData.uniqueCardsDataFlag">
<!---->
<!---->
<div class="cool-grid" ng-switch-default="">
<!-- <div ng-include="'.....'"></div> -->
<div style="background-color: blue; width:170px; height: 50px;">
222222
</div>
</div>
<!---->
</div>
</div>
<!---->
<div ng-repeat="cardData in summaryCardsCtrl.summaryDetails">
<div ng-switch="cardData.uniqueCardsDataFlag">
<!---->
<!---->
<div class="cool-grid" ng-switch-default="">
<!-- <div ng-include="'......'"></div> -->
<div style="background-color: blue; width:170px; height: 50px;">
222222
</div>
</div>
<!---->
</div>
</div>
</div>
<!---->
</div>
I'm trying to get this result with boostrap :
The idea would be that : the black square stay as a square, even with the right "rows" being resized (on mobile for example)
And the red rows would be having the same height/width (I failed that on the image, just a quick paint mockup)
I'd love to show you some code that would be a starting point but after a few hours I'm unable to achieve this effect...
I found that template that use this kind of structure :
Gridus
Using flexbox as a wrapper.
* {
box-sizing: border-box;
}
.flexbox {
display: flex;
justify-content: left;
align-items: flex-start;
}
.col-md-10 {
border: thin solid darkgray;
max-height: 50px;
overflow: hidden;
height: 50px;
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row nopadding flexbox">
<a href="#">
<div class="col-md-4 vc-photo photo-01"><img src="http://placehold.it/150" /></div>
</a>
<div class="col-md-8 nopadding">
<div class="row nopadding">
<div class="col-md-10">
<p>Bla</p>
</div>
</div>
<div class="row nopadding">
<div class="col-md-10">
<p>Bla</p>
</div>
</div>
<div class="row nopadding">
<div class="col-md-10">
<p>Bla</p>
</div>
</div>
</div>
</div>
You mean something like this? I didn't bother with the borders, but I can put it if you like
.left-div {
background-color: pink;
height: 120px;
width: 120px;
float:left;
}
.right-div {
background-color: red;
height: 120px;
float:left;
}
.col-xs-12{
height: 40px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="left-div">Column 1</div>
<div class="right-div">
<div class="row">
<div class="col-xs-12">Row 1</div>
<div class="col-xs-12">Row 2</div>
<div class="col-xs-12">Row 3</div>
</div>
</div>
</div>
</div>