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
Related
Current Behavior
I have the following basic structure:
<section id="containers">
<div class="box" id="box1">
<div class="collapsible"><h2>Box 1</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box2">
<div class="collapsible"><h2>Box 2</h2></div>
<div class="content">Content</div>
</div>
<!-- ... dozens of .boxes ... -->
</section>
#containers is .display: flex; flex-wrap: wrap, so the number of boxes on any one row is dynamic. This is an important feature that must be maintained.
Here's a minimal working example:
$(document).ready(function() {
$(".collapsible").click(function() {
$( this ).next().slideToggle();
});
});
#containers {
display: flex;
flex-wrap: wrap;
gap: 1em;
}
.box {
min-width: 15em;
background: #888;
border: #555 1px solid;
overflow: hidden;
border-radius: 0.5em;
}
.collapsible {
background: #ccc;
cursor: pointer;
}
.collapsible h2 {
margin: 0;
margin-left: 16px;
font-size: 2rem;
}
.collapsible:hover {
background: #aaf;
}
.content {
margin: 0.5em;
margin-left: 16px;
display: none; /* Initially collapsed */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p id="status"></p>
<section id="containers">
<div class="box" id="box1">
<div class="collapsible"><h2>Box 1</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box2">
<div class="collapsible"><h2>Box 2</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box3">
<div class="collapsible"><h2>Box 3</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box4">
<div class="collapsible"><h2>Box 4</h2></div>
<div class="content">Content</div>
</div>
<div class="box" id="box5">
<div class="collapsible"><h2>Box 5</h2></div>
<div class="content">Content</div>
</div>
</section>
</body>
I can easily use .slideToggle() to toggle visibility of a sibling (.content) underneath one of the clickable .collapsible divs:
$(".collapsible").click(function() {
$( this ).next().slideToggle();
});
Desired Behavior and Remarks
What I'd like is, on click of any .collapsible div in a row, the entire row will be toggled. That is, every .content div on the same horizontal row as displayed in the current viewport.
This must handle rows with dynamic number of columns, including viewport resizing. I'm flexible on the precise behavior, though.
Is this possible? And how much will it hurt?🙂 Changes to the document structure (such as adding some sort of row container) are OK, and I don't mind using some JS/jQuery code of course. The main thing I can't do is hard code the number of columns, as I need my site to remain responsive on vertical phones and fullscreen desktop browsers.
Maybe the jQuery slideToggle() function is not the best method.
Since a row will be the same height , you may look at a method to set size from 0 to another value. anybox resized will stretch other boxes on the same row.
here an example of the idea, setting a max-height from 0 to 200px and a transition.
it toggles a class.
$(document).ready(function() {
$(".collapsible").click(function() {
this.classList.toggle('slide');// plain javascript to toggle a class
});
});
*{box-sizing:border-box}
#containers {
display: flex;
flex-wrap: wrap;
gap: 1em;
}
.box {
min-width: 15em;
background: #888;
border: #555 1px solid;
overflow: hidden;
border-radius: 0.5em;
}
.collapsible {
background: #ccc;
cursor: pointer;
}
.collapsible h2 {
margin: 0;
margin-left: 16px;
font-size: 2rem;
}
p{margin-top:0;}
.collapsible:hover {
background: #aaf;
}
.content {
margin:0 0.5em;
margin-left: 16px;
max-height:0; /* Initially collapsed */
transition:0.5s
}
.slide + .content{max-height:400px;/* which one got the class*/ color:darkred}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p id="status"></p>
<section id="containers">
<div class="box" id="box1">
<div class="collapsible"><h2>Box 1</h2></div>
<div class="content"><p>Content</p></div>
</div>
<div class="box" id="box2">
<div class="collapsible"><h2>Box 2</h2></div>
<div class="content"><p>Content</p><p>Content</p></div>
</div>
<div class="box" id="box3">
<div class="collapsible"><h2>Box 3</h2></div>
<div class="content"><p>Content</p></div>
</div>
<div class="box" id="box4">
<div class="collapsible"><h2>Box 4</h2></div>
<div class="content"><p>Content</p><p>Content</p><p>Content</p></div>
</div>
<div class="box" id="box5">
<div class="collapsible"><h2>Box 5</h2></div>
<div class="content"><p>Content</p></div>
</div>
</section>
</body>
What you are missing here , is to set the height of the row to the height of the taller box, unless they will all be the same height.
For this, you can look for every box at the same top offset that the one clicked, and look for the tallest innercontent of the .contents and use this height .
Here comes the idea looking where each are standing and resets a max-height rule, you can inspire from too:
// defaut : supposed to be with no class 'slide' set on html elements
$(document).ready(function () {
let boxes = document.querySelectorAll(".collapsible");
let contents = document.querySelectorAll(".content");
$(".collapsible").click(function (event) {
let arrayContent = [];//reset
let hide=false;
for (i = 0; i < contents.length; i++) {
contents[i].style.maxHeight = "min-content";
let index = i;
let heightC = contents[i].offsetTop;
let boxOffset = contents[i].parentNode.offsetTop + 1;
// a few infos .add/remove what is needed
arrayContent.push({
index,
heightC,
boxOffset
});
contents[i].setAttribute("style", "");// resets inline style
}
let rowOffset = this.offsetTop;
if(this.classList.contains('slide')) {
hide=true;
}
let classState = this.classList;
arrayContent.forEach(function (obj) {
if (obj.boxOffset == rowOffset) {
if(hide == true) boxes[obj.index].classList.add('slide');/* reset needed if window resized => rows reorganized ? */
boxes[obj.index].classList.toggle("slide");
} else {
boxes[obj.index].classList.remove("slide");
}
});
});
});
* {
box-sizing: border-box
}
#containers {
display: flex;
flex-wrap: wrap;
gap: 1em;
}
.box {
min-width: 15em;
background: #888;
border: #555 1px solid;
overflow: hidden;
border-radius: 0.5em;
}
.collapsible {
background: #ccc;
cursor: pointer;
}
.collapsible h2 {
margin: 0;
margin-left: 16px;
font-size: 2rem;
}
p {
margin-top: 0;
}
.collapsible:hover {
background: #aaf;
}
.content {
margin: 0 0.5em;
margin-left: 16px;
max-height: 0;
/* Initially collapsed */
transition: max-height 0.5s!important
}
.slide~.content {
max-height: 400px;
/* which one got the class*/
color: darkred;
}
.collapsible:before {
content: attr(class)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p id="status"></p>
<section id="containers">
<div class="box" id="box1">
<div class="collapsible">
<h2>Box 1</h2>
</div>
<div class="content">
<p>Content</p>
</div>
</div>
<div class="box" id="box2">
<div class="collapsible">
<h2>Box 2</h2>
</div>
<div class="content">
<p>Content</p>
<p>Content</p>
</div>
</div>
<div class="box" id="box3">
<div class="collapsible">
<h2>Box 3</h2>
</div>
<div class="content">
<p>Content</p>
</div>
</div>
<div class="box" id="box4">
<div class="collapsible">
<h2>Box 4</h2>
</div>
<div class="content">
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
<div class="box" id="box5">
<div class="collapsible">
<h2>Box 5</h2>
</div>
<div class="content">
<p>Content</p>
</div>
</div>
</section>
</body>
I have a profile image with a text next to it. I'm trying to format it in such a way, that there is a profile image with a text next to it which follows that in a grid format.
I'm not really handy in CSS, so aligning items is not really my thing XD. Any help would be appreciated.
Here's the html code.
<div class="col-sm-3">
<div class="cardearnings" style="height:89%;">
<div class="card-body">
<h2 class="card-title">Activity</h2>
<div class="contents">
<img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg" style="width:70px; height:70px;" class="image--cover"><i>Someone followed you</i>
<img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg" style="width:70px; height:70px;" class="image--cover"><i>Me followed you</i>
</div>
</div>
</div>
</div>
Heres the CSS
.image--cover {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
object-position: center right;
}
This is how it currently looks
Adding to above answer. We can also use flexbox property of CSS in order to achieve such layout.
Please follow below code snippets for reference:
<!DOCTYPE html>
<html>
<head>
<!-- CSS style -->
<style>
.container1 {
display: flex;
}
.container2 {
display: flex;
}
p {
margin-left: 10px;
}
img {
margin-top: 5px;
}
</style>
</head>
<body>
<div class="container1">
<img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg"
style="width:70px;
height:70px;" class="image--cover">
<p> Someone followed you </p>
</div>
<div class="container2">
<img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg"
style="width:70px;
height:70px;" class="image--cover">
<p> Me followed you </p>
</div>
</body>
</html>
References:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/#background
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
If i undesrtand you correctly:
.card-body {
display: grid;
justify-items: center;
}
.contents {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 1em;
}
.image--cover {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
object-position: center right;
}
<div class="col-sm-3">
<div class="cardearnings" style="height:89%;">
<div class="card-body">
<h2 class="card-title">Activity</h2>
<div class="contents">
<img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg" style="width:70px; height:70px;" class="image--cover">
<i>Someone followed you</i>
<img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg" style="width:70px; height:70px;" class="image--cover">
<i>Me followed you</i>
</div>
</div>
</div>
</div>
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.
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
I want to make an HTML page that contains a box at the top and a certain number of boxes being dynamically generated using jquery, the number of boxes at the bottom of top box can be 4 at max.
I want to align these boxes dynamically and symmetrically in the html page. I am using angularjs's ng-repeat to generate boxes. I want the sizes of the boxes to remain same but arrange them symmetrically on the html page.
currently i am using angular js to dynamically create boxes and align them using col-md class of bootstrap. but this makes the size of boxes to change when the number of boxes change.
html code
<div id="header-wrapper" class="container vscrolling_container">
<div id="header" class="container vscrolling_container">
<div id="logo">
<h1 class="page-head-line" id="visionh"><a>Vision</a></h1>
<p id="visionp"><a rel="nofollow">{{visiontext}}</a></p>
</div>
</div>
</div>
<div class="row" id="missionstart">
<div ng-class="missioncount[missions.length]" ng-repeat="mission in missions" style="opacity: 0.9">
<div class="dashboard-div-wrapper" ng-class="bkclr[$index]">
<h1 id="{{mission.id}}" style="color: #000">{{mission.missionInfo}}</h1>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
</div>
<ul>
<li id="{{missioncontent.id}}" ng-repeat="missioncontent in mission.missionContent">
<p style="text-align: left">{{missioncontent.info}}</p>
</li>
</ul>
</div>
</div>
</div>
java script code
'use strict';
var mission_vision_mod = angular.module('myApp.mission_vision', ['ngRoute']);
mission_vision_mod.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/mission_vision', {
templateUrl: 'partials/mission_vision/mission_vision.html',
controller: 'mission_visionCtrl'
});
}]);
mission_vision_mod.controller('mission_visionCtrl', ['$scope','$http', function($scope, $http) {
$scope.visiontext = "Here is the content of vision";
$scope.bkclr = ['bk-clr-one','bk-clr-two','bk-clr-three','bk-clr-four'];
$scope.progressbar = ['progress-bar-warning','progress-bar-danger','progress-bar-success','progress-bar-primary'];
$scope.missioncount = ['col-md-0','col-md-12','col-md-6','col-md-4','col-md-3','col-md-2.5','col-md-2'];
$http.get('m_id.json').success(function(data){
$scope.missions = data;
$scope.len = data.length;
});
}]);
I have created a quick jsfiddle
HTML Content:
<div class="container">
<div class="header"></div>
<div class="content">
<div class="contentBox"></div>
<div class="contentBox"></div>
</div>
</div>
<br/><br/><br/>
<div class="container">
<div class="header"></div>
<div class="content">
<div class="contentBox"></div>
<div class="contentBox"></div>
<div class="contentBox"></div>
<div class="contentBox"></div>
</div>
</div>
Related CSS:
.container div {
height: 100px;
}
.header {
border: 1px solid black;
width: 75%;
margin: 5px auto;
}
.content {
text-align: center;
}
.contentBox {
border: 1px solid black;
width: 20%;
display: inline-block;
box-sizing: border-box;
}
Caution: I have used plain CSS for this demo.
Hope this helps you.
flexbox can do this
.wrap {
width: 80%;
margin: auto;
border: 1px solid black;
margin-bottom: 25px;
}
.top,
.item {
width: 100px;
height: 50px;
background: red;
}
.top {
display: inline-block;
}
.flex {
display: flex;
justify-content: space-around;
}
<div class="wrap">
<div class="flex">
<div class="top"></div>
</div>
<div class="flex">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
JSfiddle Demo