I am new to responsive design.
I have 4 floating left divs. but what I want to do is reverse the divs so that will look more responsive.
So the page currently displays
FirstSecondThirdFourth
What I want is:
FourthThirdSecondFirst
Fiddle
#block-1,
#block-2,
#block-3 {
float: left;
}
<div id="example">
<div id="block-1">First</div>
<div id="block-2">Second</div>
<div id="block-3">Third</div>
<div id="block-4">Fourth</div>
</div>
you can use flex-direction: row-reverse and justify-content:flex-end (this is optional given what you want to do)
#example {
display: flex;
flex-direction: row-reverse;
justify-content:flex-end
}
<div id="example">
<div id="block-1">First</div>
<div id="block-2">Second</div>
<div id="block-3">Third</div>
<div id="block-4">Fourth</div>
</div>
Related
How can I go about splitting the screen like in the screenshot? The website in the screenshot is mine and I've designed it in Elementor but now I want to code it. How can I do that with css and maybe Boostrap?
Visit mateusrdesign.com to check it for yourself.
Screenshot
Screenshot #02 (notice how the screen is smaller and there is no horizontal scroll bar
Here's what I've tried:
<div class="container">
<div class="row">
<div id="left" class="col-3">
<p>Place holder</p>
</div>
<div id="right" class="col-9">
<p>Place holder</p>
</div>
</div>
</div>
You can achieve this with a flex box:
.row {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.row #left {
background: yellow; /** Just to emphasize vertical split visually. You can remove this */
width: 50%;
}
.row #right {
background: green; /** Just to emphasize vertical split visually. You can remove this */
flex: 1;
}
<body style="height: 100vh;">
<div class="row w-100 h-100">
<div class="col bg-info">Left side</div>
<div class="col bg-dark">Right side</div>
</div>
</body>
This is one of the bootstrap way. Dont forget to import bootstrap cdn to html.
I try to make a layout with a right column with bootstrap. However, I don't know how to do it in order to have a disposition like this.
I've tried different things but the right column doesn't have the size of the content of the left. I'm on bootstrap 3.
This is what've tried but has you can see the right column doesn't have the height of the 3 left content.
bootply
Can you help me?
You can do it using bootstrap rows/cols, and add flexbox on top. You could do this with bootstrap alone if you used bootstrap 4, since it utilizes flex instead of floats for the rows/cols.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
.flex {
display: flex;
}
.wrap {
flex-wrap: wrap;
}
.red {
background: red;
}
.blue {
background: blue;
}
.yellow {
background: yellow;
}
.green {
background: green;
}
</style>
<div class="container">
<div class="row flex">
<div class="col-xs-8">
<div class="row flex wrap">
<div class="col-xs-6 red">1</div>
<div class="col-xs-6 yellow">2</div>
<div class="col-xs-12 blue">3</div>
</div>
</div>
<div class="col-xs-4 green">4</div>
</div>
</div>
Looks like what you are wanting to do is something like:
<div class="row equal-height-cols">
<div class="col-md-8">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
<div class="col-md-12"></div>
</div>
</div>
<div class="col-md-4"></div>
</div>
.equal-height-cols{
display: flex;
flex-wrap: wrap;
justify-content: stretch;
}
You will need to pus some content in there to see it in action, but that should set you up with what you are looking for.
*edit: misunerstood exact meaning of questions, updated
You can use flexbox, it is the best approach for this, or your can use your right column as a absolute position and make it height: 100% and width: 100%, providing a max-width size, please see: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Here you have a codepen demo :D
https://codepen.io/johuder33/pen/awYoBo
I'm trying to center two div Horizontally, and align one at the Middle of the parent container, and the second one at the Bottom of the parent container. I'm using Foundation 6, with the Flexbox version.
Html
<section id="hero">
<div class="row align-middle align-center">
<h1>Welcome</h1>
</div>
<div class="row align-bottom align-center">
<p>Some text</p>
</div>
</section>
Css
#hero {
height: 100vh;
display: flex;
flex-wrap: wrap;
}
The problem is that every div in the flex container (#hero) appear on the same line.
Thank's for helping !
Pretty sure you have to add the class column to the sub element of row like so:
id="hero">
<div class="row align-middle align-center">
<h1 class="column">Welcome</h1>
</div>
<div class="row align-bottom align-center">
<p class="column">Some text</p>
</div>
</section>
I finally found how to align vertically 3 divs using a Flexbox. Foundation wasn't really in the problem.
I made a Js Fiddle for those who have the same question:
.wrapper {
display: flex;
flex-direction: column;
height:90vh;
}
.center {
width: 100%;
flex-grow: 1;
align-items: center;
display:flex;
}
.a {
width: 100%;
}
<div class="wrapper">
<div class="a">Header</div>
<div class="center">Body</div>
<div class="a">Footer</div>
</div>
JSFiddle: https://jsfiddle.net/ek38ff5r/20/
im trying to use bootstrap for a site, but what i am trying to achieve to have to columns within a row col-sm-6. Where i want one column to be in an ordinary container and the other to have container fluid effect.
So it would one column as normal and the other column as full width. So far this has been difficult to do:
<div class="container">
<div class="row">
<div class="col-sm-6 first">
</div>
<div class="col-sm-6 second">
</div>
</div>
</div>
http://jsfiddle.net/8fyjtn09/
i think i figured it out, instead of using a normal container i would have to use container fluid as i said before but just an offset
<div class="container-fluid">
<div class="row">
<div class="col-sm-offset-2 col-xs-4 first">
</div>
<div class="col-sm-6 second">
</div>
</div>
</div>
Do you know flex-box layout in CSS ?
As i understand your question, i believe that on wider screens you want to have first column fixed and second column should be responsive. And for a smaller screen you want the default bootstrap behaviour. If this is what you are looking for, i have created a simple fiddle. Please check that and let me know if this is helpful.
Here is the link : https://jsfiddle.net/YameenYasin/7zaxx06z/23/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div class="container">
<div class="row flexbox">
<div class="first">
</div>
<div class="second">
</div>
</div>
</div>
.flexbox {
display: -webkit-flex;
-webkit-flex-flow: row; // Children elements will be in rows
-webkit-flex-wrap: wrap;
width: 100%;
}
.first
{
border:1px solid red;
height:50px;
width:200px;
}
.second{
border:1px solid green;
width:100%;
-webkit-flex: 1;
height:50px;
}
#media (max-width: 767px) {
.flexbox {
-webkit-flex-flow: column;
}
.first,.second{
width:100%;
}
}
// Excuse my beginner's English
Hello!
Can i implement follow construction:
<div class="flex-container-1">
<div class="flex-element-1 flex-container-2">
<div class="flex-element-2">...</div>
<div class="flex-element-2">...</div>
</div>
<div class="flex-element-1 flex-container-2">
<div class="flex-element-2">...</div>
<div class="flex-element-2">...</div>
</div>
</div>
My simple attempt:
.flex-container-1, .flex-container-2 {
display: flex;
}
.flex-element-1, .flex-element-2 {
flex: auto;
}
... is not correct.
Making this more flatten is not way for me, because i need grouping container.
Have any ideas?
Thanks!
I don't know what you want to do, but in your example you only use display: flex on the container. Flex box has more possibilities, and you can read about them here: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
For example if you use flex-direction: column on the flex-container-2 you will get something like this:
.flex-container-1, .flex-container-2 {
display: flex;
}
.flex-container-2 {
flex-direction: column;
}
.flex-element-1, .flex-element-2 {
flex: auto;
}
<div class="flex-container-1">
<div class="flex-element-1 flex-container-2">
<div class="flex-element-2">1...</div>
<div class="flex-element-2">1...</div>
</div>
<div class="flex-element-1 flex-container-2">
<div class="flex-element-2">2...</div>
<div class="flex-element-2">2...</div>
</div>
</div>