I've created a jsfiddle to illustrate what I'm trying to do. When you resize the window smaller, the boxes overlap. Another problem that I'm having is getting the "read more" text to go the bottom right of each box.
https://jsfiddle.net/natetg/dhaqzy29/1/
<header>header</header>
<div id='main'>
<leftCol>left
<div class="bottom">
<div class="right">read more</div>
</div>
</leftCol>
<middleCol>middle
<div class="bottom">
<div class="right">read more</div>
</div>
</middleCol>
<rightCol>right
<div class="bottom">
<div class="right">read more</div>
</div>
</rightCol>
</div>
<footer>footer</footer>
#box-container
{
display:flex;
flex-wrap:wrap;
justify-content:space-around;
}
.box
{
display:flex;
flex-direction:column;
flex:1;
min-width:250px;
height:300px;
border:1px solid black;
}
.box-title
{
font-weight:bold;
}
.box-text
{
flex:1;
}
.box-read-more
{
align-self:flex-end;
}
<div id="box-container">
<div class="box">
<div class="box-title">
Box #1 title
</div>
<div class="box-text">
Text content for the box goes here.
</div>
<div class="box-read-more">
Read more...
</div>
</div>
<div class="box">
<div class="box-title">
Box #2 title
</div>
<div class="box-text">
Text content for the box goes here.
</div>
<div class="box-read-more">
Read more...
</div>
</div>
<div class="box">
<div class="box-title">
Box #3 title
</div>
<div class="box-text">
Text content for the box goes here.
</div>
<div class="box-read-more">
Read more...
</div>
</div>
</div>
Related
I have a simple footer with contact information that contains of three rows. The first two appear at the top, the last one should be placed on the very bottom of the container.
So what I did was using an absolute positioning:
footer .verybottom {
position: absolute;
bottom: 0px;
background-color: grey;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<footer id="kontakt">
<div class="container">
<div class="row">
<div class="col md-12">
<h2>Contact</h2>
</div>
</div>
<div class="row">
<div class="col-md-6">
Adress
</div>
<div class="col-md-6">
something else
</div>
</div>
<div class="row verybottom">
<div class="col-md-6">
some more Text
</div>
<div class="col-md-6">
some more Text
</div>
</div>
</div>
</footer>
The positioning works fine, but whatever I do - the last row is only a wide as the col above it. can someone help me align the content with the rows above?
You need to put a container inside to get it to work... and then introduce another .row since we want the col-md-XX classes to work
working snippet:
footer .verybottom {
position: absolute;
bottom: 0px;
background-color: grey;
padding-left: -15px;
}
.row {
border: 1px dotted red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<footer id="kontakt">
<div class="container">
<div class="row">
<div class="col md-12">
<h2>Contact</h2>
</div>
</div>
<div class="row">
<div class="col-md-6">
Adress
</div>
<div class="col-md-6">
something else
</div>
</div>
<div class="row">
<div class="container verybottom">
<div class="row">
<div class="col-md-6">
some more Text
</div>
<div class="col-md-6">
some more Text
</div>
</div>
</div>
</div>
</div>
</footer>
HTML:
<div class="item">
首页
<div class="item">
项目
<div class="item">
招贤
<div class="item">
联系
</div>
</div>
</div>
</div>
SCSS:
.item{
background-color:skyblue;
#for $i from 1 through 4{
&:nth-child(#{$i}){
margin-left:$i * 10px;
}
}
}
The nth-child(3) doesn't select that.
I try to use nth-of-type, but it's only take nth-of-type(1).
Do I need to add a class in every .item ?
The correct way is to use the space since you are talking about children and not siblings
div div div {}
div div div{
background: red
}
<div class="item">
首页
<div class="item">
项目
<div class="item">
招贤
<div class="item">
联系
</div>
</div>
</div>
</div>
To use nth-child you will have to change the markup structure
div:nth-child(3){
background: red
}
<div class="item">
首页
</div>
<div class="item">
项目
</div>
<div class="item">
招贤
</div>
<div class="item">
联系
</div>
<div class="wrapper">
<div class="phoo">
<div class="thing">
hello
</div>
</div>
</div>
<div class="wrapper">
<div class="bar">
<div class="thing">
hello
</div>
</div>
</div>
I want to hide "hello" when the class is bar.
I thought I needed to add a & sign like this but it doesn't work. It's frustrating because I know the documentation is there somewher, but I just don't know what to call this situation.
.wrapper {
.bar & {
.thing {
display:none;
}
}
}
.wrapper > .bar > .thing
{
display:none;
}
<div class="wrapper">
<div class="phoo">
<div class="thing">
hello
</div>
</div>
</div>
<div class="wrapper">
<div class="bar">
<div class="thing">
hello
</div>
</div>
</div>
Worked for me.
Would it be possible to achieve the attached grid in bootstrap? Each of the squares would probably be an image... or perhaps text!
I've had a go, but hit a wall when it comes to the top-left box for example that spans over two rows.
Grid:
Use nested blocks whenever you need your grid to span several rows.
Something like this:
<div class="row">
<div class="col-sm-6"></div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
</div>
<div class="row">
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
</div>
</div>
<div class="col-sm-8">
<div class="row">
<div class="col-sm-8"></div>
<div class="col-sm-4"></div>
</div>
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-8"></div>
</div>
</div>
<div class="col-sm-4"></div>
</div>
Then you can set the height for your blocks and your grid is good to go.
A newbie here.
So I was learning to make nested grids when I stumble on this question.
My Rules for making nested grids:
1.The entire grid will be in parent container .row (parent wrapper)
2.Columns are always nested in columns, however all nested columns must have a .row(column wrapper) wrapper to align items horizontally e.g.:
<div class='col-md-12'>
<div class='row'>This is the column wrapper.
<div class='col-md-9'></div>
<div class='col-md-3'></div>
</div>
</div>
3.Breakpoints are very key
4.You may have to use custom css to fine tune your grid.
This is my solution to the problem:
<div class='row parent-wrap'>
<div class='col-sm-6 big-left'>Top Left big</div>
<div class='col-sm-6 quarter-grid'>
<div class='row top-wrap'>
<div class='col-sm-6 top-left'>top-left</div>
<div class='col-sm-6 top-right'>top-right</div>
<div class='col-sm-6 bottom-left'>bottom-left</div>
<div class='col-sm-6 bottom-right'>bottom-right</div>
</div>
</div>
<div class='col-sm-12'>
<div class='row mid-wrap'>
<div class='col-sm-3 mid-start'>mid-start</div>
<div class='col-sm-6 mid-center'>mid-center</div>
<div class='col-sm-3 mid-end'>mid-end</div>
</div>
<div class='col-sm-9'>
<div class='row bottom-wrap'>
<div class='col-sm-8 bottom-start'>bottom-start</div>
<div class='col-sm-4 bottom-center'>bottom-center</div>
</div>
</div>
</div>
Rudimentary custom css:
.parent-wrap{
margin:100px;
}
.big-left{
background-color: aqua;
height:300px;
}
.top-left{
background-color:black;
height:150px;
}
.top-right{
background-color: blue;
height:150px;
}
.bottom-left{
background-color:brown;
height:150px;
}
.bottom-right{
background-color:crimson;
height:150;
}
.mid-start{
background-color:grey;
height:200px;
}
.mid-center{
background-color: red;
height:200px;
}
.mid-end{
background-color: pink;
height:400px;
}
.bottom-start{
background-color:blueviolet;
margin-left:-15px;
height:200px;
margin-top:-200px;
}
.bottom-center{
background-color:burlywood;
height:200px;
margin-top:-200px;
}
how to put content in column horizontally like below,
(column1) (column2) (column3)
1.asd 2.asd 3.asd
4.asd 5.asd
this flow is required in the website
For columns in css3, you have to have a div structure for that...
Html:-
<div class="table">
<div class="column">
<div class="row">1</div>
<div class="row">4</div>
<div class="row">7</div>
</div>
<div class="column">
<div class="row">2</div>
<div class="row">5</div>
<div class="row">8</div>
</div>
<div class="column">
<div class="row">3</div>
<div class="row">6</div>
<div class="row">9</div>
</div>
</div>
Css:-
.table { columns:3; -webkit-columns:3; -moz-columns:3; text-align:center }
.column { }
.row { background-color:red; }
Demo:- http://jsfiddle.net/5P9c4/1/