I have a page with a bootstrap row, which contains several col-md-1 Bootstrap columns (the amount can vary but never exceeds 12). In this JSFiddle you can see an example of what I mean.
Currently if I have four columns (like in my fiddle), they float left and do not use up the full width of the row:
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-1"></div>
<div class="col-sm-1"></div>
<div class="col-sm-1"></div>
...
</div>
What I want to have, is that the columns keep the same width as above, however they get spread out equally throughout the row. Remember, there can be any number of col-md-1s between 1 and 12! The result width four columns should look something like this:
Further requirements and information:
I'm using this in my AngularJS application, so I'd prefer non-jQuery
solutions
If it's in anyway possible, IE9+ support would be nice!
You can use offset method
<div class="container">
<div class="row">
<div class="col-sm-1 col-sm-offset-1"></div>
<div class="col-sm-1 col-sm-offset-1"></div>
<div class="col-sm-1 col-sm-offset-1"></div>
<div class="col-sm-1 col-sm-offset-1"></div>
</div>
</div>
Try this,, this may help you
DEMO
Since you want to have dynamic number of columns, flexbox is the best way to go.
As you required, it supports IE10+
.row {
border: 1px solid gray;
display: flex;
justify-content: space-between;
/* Adding for cross browser support */
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.col-sm-1 {
border: 1px solid lightblue;
background: lightblue;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-1">1</div>
<div class="col-sm-1">2</div>
<div class="col-sm-1">3</div>
<div class="col-sm-1">4</div>
</div>
<br>
<div class="row">
<div class="col-sm-1">1</div>
<div class="col-sm-1">2</div>
<div class="col-sm-1">3</div>
<div class="col-sm-1">4</div>
<div class="col-sm-1">5</div>
<div class="col-sm-1">6</div>
<div class="col-sm-1">7</div>
</div>
</div>
Yo can do this just with bootstrap and css pushing the columns.
One possible solution can be:
Html:
<div class="container">
<div class="row col-sm-10 col-sm-push-1">
<div class="col-sm-1"></div>
<div class="col-sm-1 col-sm-push-1"></div>
<div class="col-sm-1 col-sm-push-2"></div>
<div class="col-sm-1 col-sm-push-3"></div>
</div>
</div>
css:
body {
margin: 10px;
}
.row {
border: 1px solid red;
padding: 0 4%;
}
.col-sm-1 {
border: 1px solid blue;
padding: 50px;
}
Demo
Related
I am writing components in react and for now trying to style using index.css(I know that is not the right way).So here is the structure
Also I want to display certain number of productContainer components(let us say 3) out of a total 24. Right now everything gets displayed in the same line. I tried flex-wrap but it does not work correctly.Width also pushes everything in the same line.
I know we can fix it by using inline block or grid but I wanted a flexbox way of doing the same.
CSS:
.productlist {
display: flex;
}
.productContainer {
padding: 10px;
width: 340px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-items: flex-start;
border-style: ridge;
border-color: black;
border-width: 1px;
}
.item {
width: 100px;
word-wrap: break-word;
}
You need both wrap and basis to achieve the result you want. flex-basis is the equivalent of width in flex, and flex-wrap will make the elements not overflow. Not specifying flex-grow will maintain the same size for the last elements that do not fit neatly into row (if you had odd elements, like in this example).
.productlist {
display: flex;
flex-wrap: wrap; /* wrap items in container */
}
.productContainer {
padding: 10px;
box-sizing: border-box;
flex-basis: 33%; /* 3 containers per row */
display: flex;
flex-direction: column;
align-items: flex-start;
border: 1px ridge black;
}
<div class="productlist">
<div class="productContainer">
<div class="item title">Title-1</div>
<div class="item price">Price</div>
<div class="item company">Company 1</div>
</div>
<div class="productContainer">
<div class="item title">Title-2</div>
<div class="item price">Price</div>
<div class="item company">Company 2</div>
</div>
<div class="productContainer">
<div class="item title">Title-3</div>
<div class="item price">Price</div>
<div class="item company">Company 3</div>
</div>
<div class="productContainer">
<div class="item title">Title-4</div>
<div class="item price">Price</div>
<div class="item company">Company 4</div>
</div>
</div>
It is kind of tricky situation I am in now.
I have two templates that need to be displayed based on ng-switch like:
<div class="summary-card" ng-repeat="cardData in summaryCardsCtrl.summaryDetails">
<div ng-switch ="cardData.uniqueCardsDataFlag">
<div ng-switch-when=true>
<div style="background-color: #ccc !important;">
11111 my custom div
</div>
</div>
<div ng-switch-default>
<div class="card">
<div class="card-title" style="text-align: left;" id="{{cardData.label}}">{{cardData.label}}</div>
<div class="card-data">
.....
</div>
</div>
</div>
</div>
</div>
So, the first div when ng-switch is set to true needs to be aligned side by side with the others that get generated by ng-repeat.
something like a css-grid.
The problem is <div class="summary-card" that sets the items to display flex. I cannot modify or change it but I only need this style for the divs generated by ng-repeat.
But now it gets applied to all the divs, like:
div.summary-card {
display: inline-block;
margin: 5px 10px 15px 0px;
display: flex;
}
How can I fix the same?
you should follow dom structure like this
<div class="summary-card">
<div>
<div style="background-color: #ccc !important;">
11111 my custom div
</div>
</div>
<div class="cool-grid">
<div class="card">
<div class="card-title" style="text-align: left;">{{cardData.label}}</div>
<div class="card-data">
.....
</div>
</div>
<div class="card">
<div class="card-title" style="text-align: left;">{{cardData.label}}</div>
<div class="card-data">
.....
</div>
</div>
<div class="card">
<div class="card-title" style="text-align: left;">{{cardData.label}}</div>
<div class="card-data">
.....
</div>
</div>
<div class="card">
<div class="card-title" style="text-align: left;">{{cardData.label}}</div>
<div class="card-data">
.....
</div>
</div>
</div>
</div>
and your css should be something like
.summary-card {
display: flex;
width: 350px
}
.cool-grid {
display: flex;
flex-wrap: wrap;
}
check this out :- https://codepen.io/anon/pen/gzomoN
This is not the complete answer but it will give you some idea
you can also use grid layout if you want
.summary-card {
display: grid;
grid-template-columns: 200px auto;
grid-coloumn-start: 1;
grid-column-end: 1;
}
.cool-grid {
grid-template-columns: 200px auto;
grid-coloumn-start: 1;
grid-column-end: 3;
display: inline-grid;
flex-wrap: wrap;
}
I got a bootstrap grid where the content is loaded dynamically.
If the last element is alone in the row it should be centered.
What i want:
A B
C D
E F
G
HTML Code:
div {
border: 1px solid red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-6">a</div>
<div class="col-md-6">b</div>
<div class="col-md-6">c</div>
<div class="col-md-6">d</div>
<div class="col-md-6">e</div>
<div class="col-md-6">f</div>
<div class="col-md-6">g</div>
</div>
What i get:
A B
C D
E F
G
I tried it with the css selector :nth-last-of-type(), but with this selector every 'last element' gets the properties.
Anyone know how to do this? I hope i could explain it in a way you can understand it.
It's simple, you can use display:flex and text-align: center.
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
<ul class="flex-container">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
<li class="flex-item">7</li>
</ul>
Combining last-child and nth child would work, then you can position your element centrally. This example uses left 50% transform:translateX(-50%);
https://codepen.io/anon/pen/zPNWxK
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
<div class="col-md-6"></div>
<div class="col-md-6"></div>
<div class="col-md-6"></div>
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
div {
height:20px;
box-sizing:border-box;
background-color:blue;
border:1px solid #fff;
}
div:last-child:nth-child(odd) {
background-color:red;
left:50%;
transform:translateX(-50%);
}
When you actually do this don't use the div as the actual selector of course
You can combine :nth-child(odd) and :last-child to check if the element is the last in the row by itself like this:
CSS:
.row {
width: 200px;
}
.col-md-6 {
width: 50%;
float: left;
text-align: center;
}
.col-md-6:nth-child(odd):last-child {
width: 100%;
}
HTML:
<div class="row">
<div class="col-md-6">a</div>
<div class="col-md-6">b</div>
<div class="col-md-6">c</div>
<div class="col-md-6">d</div>
<div class="col-md-6">e</div>
<div class="col-md-6">f</div>
<div class="col-md-6">g</div>
</div>
Here's a Codepen.
if you are sure that the last one is odd (so it will be alone in that row) you can use bootstrap offsetting system and write it like:
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
<div class="col-md-6"></div>
<div class="col-md-6"></div>
<div class="col-md-6"></div>
<div class="col-md-6"></div>
<div class="col-md-6 col-md-offset-3"></div>
ref: Bootstrap OffSet
Just text-align: center the last-child div, as below.
Open the snippet in full page mode to see the result as you wanted
div:last-child{
text-align: center;
}
<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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
<div class="col-md-6">A</div>
<div class="col-md-6">B</div>
<div class="col-md-6">C</div>
<div class="col-md-6">D</div>
<div class="col-md-6">E</div>
<div class="col-md-6">F</div>
<div class="col-md-6 ">G</div>
</div>
It is quite simple in that way:
<div class="col-md-6 mx-auto"></div>
I think you are looking for :last-child selector
I wanted to get a center aligned grid list in Angular Material.
This is my code:
<md-content layout-padding>
<md-grid-list md-cols-gt-md="10" md-cols-md="8" md-cols-sm="6" md-cols="4" md-cols-xs="3" md-row-height-gt-md="1:1" md-row-height="1:1" md-row-height-xs="110px" md-gutter-gt-md="10px" md-gutter="2px">
<md-grid-tile ng-repeat="item in homeTilesNavigation">
<div class="compas-home-text">{{item.name}}</div>
</md-grid-tile>
</md-grid-list>
</md-content>
I am getting a result like this:
But I wanted like this:
I wanted the same grid list to be center aligned.
Here is the fiddle code.
You can use CSS Flexbox.
Make your parent (i.e. md-grid-list) a flex container using display: flex & use justify-content: center to align its children (i.e. md-grid-tile) horizontally center. Like:
md-grid-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
I've used div's instead of regular md- type components for demonstration:
md-grid-list is equivalent to .list
md-grid-tile is equivalent to .tile
Have a look at the example snippet below (updated fiddle according to your requirements):
.list {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.tile {
width: 100px;
height: 100px;
border: 1px solid #777;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}
<div class="list">
<div class="tile">
<div class="compas-home-text">Grid Title</div>
</div>
<div class="tile">
<div class="compas-home-text">Grid Title</div>
</div>
<div class="tile">
<div class="compas-home-text">Grid Title</div>
</div>
<div class="tile">
<div class="compas-home-text">Grid Title</div>
</div>
<div class="tile">
<div class="compas-home-text">Grid Title</div>
</div>
<div class="tile">
<div class="compas-home-text">Grid Title</div>
</div>
</div>
Hope this helps!
Goodmorning developers,
I am new in frontend development. I'm stuck with the following problem:
I want to have a head div with 4 sub divs inside the head one. How can I do it with fitting the screen? (see sketch)
Kind regards
I think you need this please check:
See Fiddle Demo
.container {
border: 3px solid;
float: left;
width: 100%;
}
.custom_box {
float: left;
width: 100%;
}
.custom_box1 {
border: 3px solid;
float: left;
margin: 2%;
text-align: center;
width: 35%;
}
.custom_box2 {
border: 3px solid;
float: left;
margin: 2%;
text-align: center;
width: 55%;
}
<div class="container">
<div class="custom_box">
<div class="custom_box1">
<h1>1</h1>
</div>
<div class="custom_box2">
<h1>2</h1>
</div>
</div>
<div class="custom_box">
<div class="custom_box1">
<h1>1</h1>
</div>
<div class="custom_box2">
<h1>2</h1>
</div>
</div>
</div>
Here is the fiddle: https://jsfiddle.net/9Lum94me/
There are other ways as well with CSS floats, flexbox and table-cell which you can explore.
HTML:
<div class="container">
<div class="row">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
</div>
<div class="row">
<div class="column">Column 3</div>
<div class="column">Column 4</div>
</div>
</div>
CSS:
.container{
border: 1px solid gray;
}
.row{
padding: 10px;
}
.row .column{
display: inline-block;
min-width: 45%; min-height: 150px; border: 1px solid gray; margin: 0 4% 0 0;
}
EDIT:
You will have to manage the widths of the columns as per needs.
A bootstrap responsive example without any style...(Except bordering).
Fiddle example
.content{
border:2px solid green;
height:100px;
width:92%;
margin:20px;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" style="border:1px solid blue;">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="row no-gutter-2">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="content">Header1</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="content">Header2</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="content">Header3</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="content">Header4</div>
</div>
</div>
</div>
</div>
To test the responsiveness, plz re-size the browser window.
Above example is responsive on small, medium and large scale.
Please run the snippet on full page.