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.
Related
I am trying to make a responsive design on the page using bootstrap grid.
Here is my HTML:
<div class="row row-2">
<div class = "col-sm-4 col-sm-offset-2">
<img class="img-responsive header-notebookImg" src="Images/header/notebook.png" alt="">
</div>
<div class="col-sm-4 body-slogan">
<p class="body-slogan"> Save<span class="body-slogan-word">your</span> ideas with this application</p>
</div>
</div>
The css file only contains fonts and sizes. My question is: When I resize the page to trigger bootstrap extra small column class is it possible to put the second column on the top?
With code above the second column goes on the bottom. I can't interchange the content of the columns as I want first column to be on the left on the bigger screen.
Thanks in advance!
If you're using Bootstrap 4 it's pretty simple with flex-direction: column-reverse;.
Here's a simple example with Bootstrap 4. Just wrap the row's into a container with display: flex; and give it a flex-direction: column-reverse;`.
.row {
background: #f8f9fa;
margin-top: 20px;
}
.reverse {
display: flex;
flex-direction: column-reverse;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
/* Desktop View */
#media (min-width: 1281px) {
.reverse {
flex-direction: column;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="reverse">
<div class="row">
<div class="col">
Row 1
</div>
</div>
<div class="row">
<div class="col">
Row 2
</div>
</div>
</div>
</div>
you can do something like this if you don't want use bs4 or don't know how to use display:flex.
don't forget to change the class names as you want
.row-2 {
direction: rtl;
}
.row-2 .col {
direction: ltr !important;
border: 1px solid #eee;
background: #fefefe;
padding: 1rem;
}
.row-2 .col-md-offset-2{
margin-left: 0;
margin-right: 16.66666667%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row row-2">
<div class="col col-md-4 col-sm-12 col-md-offset-2">
<img class="img-responsive header-notebookImg" src="https://artbees-themes-artbees1.netdna-ssl.com/wp-content/uploads/2018/10/jupiter-x-bootstrap-logo.jpg" alt="">
</div>
<div class="col col-md-4 col-sm-12 body-slogan">
<p class="body-slogan"> Save<span class="body-slogan-word">your</span> ideas with this application</p>
</div>
</div>
I see many custom css classes here, bootstrap has built-in css classes for that, no need to write custom ones.
<div class="row">
<div class="col-md-6 col-md-push-6">B</div>
<div class="col-md-6 col-md-pull-6">A</div>
</div>
In my application, there's a login page having a bootstrap customized well containing login form. Looks like this
Code was like
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<div class="animated fadeInDown">
<div class="well no-padding">
<!-- Content Of Login Form -->
</div>
</div>
</div>
<div class="col-lg-4"></div>
</div>
Now, I have to put this on the center of the page. horizontally and vertically. So I removed the and all the bootstrap column grids. Put the well inside the custom container having display flex property.
<div class="login-container">
<div class="animated fadeInDown">
<div class="well no-padding">
<!-- Content Of Login Form -->
</div>
</div>
</div>
CSS of .login-container
.login-container {
position: fixed;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
Now, the login form looks like this
How to get the same responsive width as I have previously inside the bootstrap col-lg-4 grid of the well. I tried to give the grids inside the container but that didn't work for me. I want the login form something like this without hardcoding width, something like this.
This I have done just for the question purpose by hardcoding width of the well.
The property position: fixed does not respect the width of the parent box if you want it to take up the full width, so one solution would be to calculate the width of the parent box using jQuery code and apply it to the child box. Here is an example:
let parentWidth = parseInt($('.col-sm-4.login-container').css('width'));
let parentPadding = parseInt($('.col-sm-4.login-container').css('padding').split(' ')[1]) * 2;
let childWidth = parentWidth - parentPadding;
$('.login').css('width', childWidth);
.container {
background: black;
}
.col-sm-4 {
background: #eee;
height: 100vh;
}
.login-container {
display: flex;
align-items: center;
}
.login {
width: 100%;
height: 100px;
background: red;
position: fixed;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4 login-container">
<div class="login"></div>
</div>
<div class="col-sm-4"></div>
</div>
</div>
I hope it helps you.
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%;
}
}