I was wondering what the best approach would be to create a 5 column layout in Bootstrap and give those divs a border and spacing.
I've created a new class to make the grid suitable for 5 columns, like so:
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
position: relative;
min-height: 1px;
}
.col-xs-15 {
width: 20%;
float: left;
}
#media (min-width: 768px) {
.col-sm-15 {
width: 20%;
float: left;
}
}
#media (min-width: 992px) {
.col-md-15 {
width: 20%;
float: left;
}
}
#media (min-width: 1200px) {
.col-lg-15 {
width: 20%;
float: left;
}
}
<div class="item col-md-15">
<div class="item-wrap">
.....
</div>
</div>
What I try to do is to give each column 10px margin on the right (except for last column offcourse). Further I want to give each column or item-wrap a 1px border.
Whatever I try I always end up with no margin.
.item {
border: 1px solid #efefef;
padding:10px;
}
.item.last {
margin-right: 0;
}
See my fiddle
Currently, 5, 7 and 9 column layouts are not supported in native Bootstrap, as the default 12 column structure isn't evenly divisible by those numbers. In order to get a 5 column layout, you would need to visit http://getbootstrap.com/customize/#grid-system and modify the #grid-columns value to 15 (or really, anything that is evenly divisible by 5).
After customizing and downloading your personal version of Bootstrap, you could then implement a 5 column layout using:
<div class="col-xs-3">Column 1</div>
<div class="col-xs-3">Column 2</div>
<div class="col-xs-3">Column 3</div>
<div class="col-xs-3">Column 4</div>
<div class="col-xs-3">Column 5</div>
And you wouldn't have to mess with CSS to try and mimic the existing Bootstrap classes and styles. Just be cautious using this approach, as any existing columnar layouts may be affected by this change.
If you want to give all columns a margin for spacing, you can use pseudo classes to achieve this:
.item:not(:last-child) {
margin-right:10px;
}
Basically this will give all elements with the .item class a right margin, except for the last element. Here is your updated fiddle.
With the release of bootstrap-4, we saw lots of new features and changes it came up with. One such change was dropping floats and percentages, and using the flex-box for layouts in bootstrap-4.
Bootstrap-4 is built on top of the flex-layout.
So whenever we have such a requirement where our layout is not fitting to the usual 12-grid layout of our bootstrap-4 ,we can use our customized CSS (using flexbox properties) to create any number column responsive layout(in your case which is a 5 column layout), since flexbox gives us so much flexibility in doing so. Use the below code that I've wrote to achieve this.
HTML5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./style.css" />
<title>5 column layout in flexbox</title>
</head>
<body>
<main class="flex-container">
<div class="flex-item col1">col1</div>
<div class="flex-item col2">col1</div>
<div class="flex-item col3">col3</div>
<div class="flex-item col4">col4</div>
<div class="flex-item col5">col5</div>
</main>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding-top: 1rem;
}
/* --- This much code will do it for you --- */
.flex-container {
display: flex;
}
.flex-item {
min-height: 400px;
border: 4px solid #03a503;
margin: 0 0.5rem;
display: flex;
align-items: center;
justify-content: center;
flex: 1;
}
.flex-item:first-of-type,
.flex-item:last-of-type {
margin-right: 1rem;
}
/* ----- Basic break-point ----- */
#media screen and (max-width: 768px) {
.flex-container {
flex-direction: column;
}
.flex-item {
min-height: 100px;
margin: 0.5rem;
}
.flex-item:first-of-type,
.flex-item:last-of-type {
margin: 0.5rem;
}
}
Here is the full code https://jsfiddle.net/cLmq0otv/3/
Hope this code solves the problem.
You have to use Auto-layout columns, column classes without an explicit numbered. You may use predefined grid classes, grid mixins, or inline widths to set the width of one column and have the sibling columns automatically resize.
.col{
padding:1rem;
}
.col div{
border:1px solid red;
min-height:5rem;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col">
<div>content column 1</div>
</div>
<div class="col">
<div>content column 2</div>
</div>
<div class="col">
<div>content column 3</div>
</div>
<div class="col">
<div>content column 4</div>
</div>
<div class="col">
<div>content column 5</div>
</div>
</div>
</div>
Related
I'm building a website in which I'm trying to create a row of 2 column cards. I'd also like it to become just one row cards when the screen size shrinks.
Instead, it stays stuck on the one row format.
I've included a picture of what I'm trying to do (the colors don't matter)
Here is the HTML:
<div class="row">
<div class="column">Box 1</div>
<div class="column">Box 2</div>
</div>
Here is the CSS:
.column {
background-color: black ;
float: left;
width: 50%;
padding: 50px;
text-align: center;
font-size: 25px;
color: white;
}
Please note that the padding interferes with the width and because of that the .column div expands more than 50% of the screen width.
Unless you're trying to learn, what I would recommend you is to use a CSS framework such as Bootstrap. They make the life very easy when it comes to managing layouts.
.column {
background-color: black ;
width: calc(50% - 100px);
padding: 50px;
text-align: center;
font-size: 25px;
color: white;
display: block;
}
#media (min-width: 102px) {
.column {
float: left;
}
}
<div class="row">
<div class="column">Box 1</div>
<div class="column">Box 2</div>
</div>
You can use media queries for this purpose, you will need to find the limit, I have given 102px for the sake of the example, but you will need to find the pixel limits that works best for your case, probably in sync with mobile screen sizes.
The reason that it was stuck with the boxes one below the other was that you had a padding of 50px, so the whole width was 2 * (50% + 50px) = 100% + 100px and if you add any positive value to 100%, then the two items will not fit into a single row. Then, float: left is only needed if we are to display them in an inline manner. So, float: left is only needed in a case, you need a calc calculation to extract the 100px pixels from the divs. Finally, I have added display: block. Happy coding!
What you want could be achieved with a media query and CSS grid layout:
.column {
background-color: black;
padding: 50px;
margin: 5px;
text-align: center;
font-size: 25px;
color: white;
}
.row {
display: grid;
grid-template-columns: 1fr 1fr;
}
#media(max-width: 500px) {
.row {
grid-template-columns: 1fr;
}
}
<div class="row">
<div class="column">Box 1</div>
<div class="column">Box 2</div>
</div>
I need my two blocks to go in a row one after another, but when the screen resolution decreases, they are placed under each other, that is, in the column
<div>
<div>
<h1>Block1</h1>
</div>
<div>
<h1>Block2</h1>
</div>
</div>
We can use flex (by default flex-direction is row so we don't need any other styling in css) -:
<div class="container">
<div>
<h1>Block1</h1>
</div>
<div>
<h1>Block2</h1>
</div>
</div>
.container{
display: flex;
}
Also this is one way of doing things, flex is not supported everywhere so you can go for inline-block also -:
<div>
<div class="inline">
<h1>Block1</h1>
</div>
<div class="inline">
<h1>Block2</h1>
</div>
</div>
.inline{
display: inline-block;
}
As the div element is known as a block element, you need to use display:inline-block. This means 'if there is space next to the element, place the next inline block element next to it' (in essence).
div {
display: inline-block;
background:tomato;
}
#media only screen and (max-width: 600px) {
div{
display:block;
background:green;
}
<div>
<div>1
</div>
<div>2
</div>
</div>
For your width to then turn back into a block element, you will need to use the media query - something like above.
You should use CSS grid:
<div class="wrapper">
<div>
<h1>Block1</h1>
</div>
<div>
<h1>Block2</h1>
</div>
</div>
Css:
.wrapper{
diplay: grid;
grid-template-columns: 1fr;
}
Try using display:flex and use flexbox to place next to each other when the width is high. When the width reduces the div cols will go down.
.row {
width: 100vw;
display: flex;
flex-wrap: wrap;
}
.cols {
height: 400px;
width: 400px;
margin: 5px 5px 5px 5px;
background-color: blue;
}
<div class="row">
<div class="cols">
</div>
<div class="cols">
</div>
</div>
Like this:
#media all and (max-width: 480px) {
div{
float: left;
width: 98%;
margin-left: 1%;
overflow: hidden;
border: 1px solid #000;
box-sizing: border-box;
padding: 5px;
}
}
Or with class
.wrapper div{
...
}
More about #media
https://developer.mozilla.org/pl/docs/Web/CSS/Media_Queries/Using_media_queries
I have a 3 column layout in my HTML which looks like this
[ [leftdiv] [centerdiv] [rightdiv] ]
I'm not really a UI guy so I need help to deal with this stuff in css
for responsive design. The HTML layout below represents the above sketch.
<div class="container">
<div class="leftdiv" style="width:25%;height:auto;float:left; background-color:white">
</div>
<div class="centerdiv" style="width:50%;height:auto;float:left; background-color:white">
</div>
<div class="rightdiv" style="width:25%;height:auto;float:right;background-color:white;margin-top:15px">
</div>
</div>
I need to make my 3 column divs to be responsive based on the screen width of the browser. So let's say if I resize
my browser's width to a lesser width like a screen width of a smart phones or tablet, the 3 divs should realign themselves
relatively like this below
[
[leftdiv]
[centerdiv]
[rightdiv]
]
How do I achieve this? Thanks
With a #media query
.col {
width: 25%;
height: auto;
float: left;
background: white;
}
.centerdiv {
width: 50%;
}
.rightdiv {
float: right;
margin-top: 15px
}
#media (max-width: 640px) {
.col {
float: none;
width: auto;
}
}
<div class="container">
<div class="leftdiv col">left
</div>
<div class="centerdiv col">center
</div>
<div class="rightdiv col">right
</div>
</div>
To do this in bootstrap, just utilize the grid column classes.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-3">left</div>
<div class="col-sm-6">center</div>
<div class="col-sm-3">right</div>
</div>
</div>
They're called #media queries and they are the underlying principle of responsive design. They are basically wrappers around CSS delarations applying only if the #media query condition is true.
.leftdiv, rightdiv, centerdiv {
background-color: white;
}
.right-div {
margin-top:15px
}
#media (min-width: 600px) {
.leftdiv {
width:25%;
float:left;
}
.centerdiv {
width:50%;
float:left;
}
.rightdiv {
width:25%;
float:right;
}
}
<div class="container">
<div class="leftdiv">Left div</div>
<div class="centerdiv">Right div</div>
<div class="rightdiv">Center div</div>
</div>
I've placed your inline styles in CSS, where they belong (you can't use media queries without either a <style> tag or a stylesheet - .css file); I also streamlined them a bit.
Since what you want is default <div> behavior, I only placed the rules making them behave like columns (floats and widths) in a media query that applies on devices wider than 600px (CSS pixels).
Of course, you can change 600px to whatever you like and you can have as many #media queries as you like.
You can also use display:flex with media queries to adjust the layout.
See fiddle: https://jsfiddle.net/xdr9fhh1/
html
<div class="container">
<div class="leftdiv">left</div>
<div class="centerdiv">center</div>
<div class="rightdiv">right</div>
</div>
css
.container{
display: flex;
justify-content: space-between;
}
.leftdiv, .rightdiv{
flex-grow: 1;
background-color: red;
}
.centerdiv{
flex-grow: 2;
}
#media (max-width: 800px) {
.container{
flex-direction: column;
}
}
I am trying to make something like this:
|--------------------------------------------------------|-------------|
| | |
| DIV 1 | |
| | DIV 3 |
|--------------------------------------------------------| |
| DIV 2 | |
|--------------------------------------------------------|-------------|
I can't use a table for this. And I don't know if there's a way to just let them stack like that?
I tried it with the code below, but DIV 3 is not all the way at the top. It is actually exactly div2.height lower from the top.
#DIV_1 {
height: 125px;
width: 80%;
display: block;
float: left;
}
#DIV_2 {
width: 80%;
height: 15px;
display: block;
}
#DIV_3 {
display: block;
float: left;
height: 140px;
width: 20%;
}
<div class="row" style="width: 1024px; height: 140px;">
<div>
<div id="DIV_1"></div>
<div id="DIV_2"></div>
</div>
<div id="DIV_3">
</div>
</div>
The layout is relatively simple with CSS flexbox:
.row {
display: flex; /* establish flex container */
height: 140px; /* height from original code */
width: 1024px; /* width from original code */
}
.row > div:first-child {
flex: 0 0 80%; /* width from original code */
display: flex;
flex-direction: column; /* stack first div children vertically */
}
.row > div:first-child > div {
flex: 1; /* items in first div distribute space equally */
border: 1px dashed black;
}
.row > div:last-child {
flex: 0 0 20%;
border: 1px dashed black;
}
<div class="row">
<div>
<div id="DIV_1">DIV #1</div>
<div id="DIV_2">DIV #2</div>
</div>
<div id="DIV_3">DIV #3</div>
</div>
Benefits of flexbox:
minimal code; very efficient
centering, both vertically and horizontally, is simple and easy
equal height columns are simple and easy
multiple options for aligning flex elements
it's responsive
unlike floats and tables, which offer limited layout capacity because they were never intended for building layouts, flexbox is a modern (CSS3) technique with a broad range of options.
Browser support:
Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.
Try this. I removed float and width from DIV_1 and DIV_2 and put it on the parent.
#DIV_0 {
width: 80%;
float: left;
}
#DIV_1 {
height: 125px;
}
#DIV_2 {
height: 15px;
}
#DIV_3 {
float: left;
height: 140px;
width: 20%;
}
<div class="row" style="width: 1024px; height: 140px;">
<div id="DIV_0">
<div id="DIV_1">div1</div>
<div id="DIV_2">div2</div>
</div>
<div id="DIV_3">
div3
</div>
</div>
Do not use floating with #DIV_1. Instead use float: left, width: 80% with the parent of #DIV_1.
I would highly recommend using Bootstrap Grid.
Something like this:
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row">DIV 1</div>
<div class="row">DIV 2</div>
</div>
<div class="col-md-4>DIV 3</div>
</div>
</div>
You can accomplish this with twitter's bootstrap. Link to the bootstrap online:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Then you can use the below code to accomplish that:
<div class="row">
<div class="col-lg-8">
<div class="row"></div>
<div class="row"></div>
</div>
<div class="col-lg-4"></div>
</div>
Try this one:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#one img, #two img{width: 300px;
height: 300px;}
#three img{height: 600px;
width: 600px;}
div#onetwo, div#three{display: inline-block;}
</style>
</head>
<body>
<div id="onetwo">
<div id="one"><img src="image1.jpg" alt=""></div>
<div id="two"><img src="image2.jpg" alt=""></div>
</div>
<div id="three"><img src="image3.png" alt=""></div>
</body>
</html>
or use bootstrap
This can also be achieved using pure CSS with CSS Grid.
main {
display: grid;
grid-template-columns: 1fr 1fr;
}
<main>
<div class="col-1">
<div class="row-1">
row 1
</div>
<div class="row-2">
row 2
</div>
</div>
<div class="col-2">
column 2
</div>
</main>
The benefit I find of using CSS grid is that it takes very few CSS rules if your HTML is defined well.
CSS Tricks has an in-depth Guide to CSS Grid which includes browser support information (now implemented in most modern browsers).
I'm facing a bootstrap problem.
In my html page, I used different containers but I'm not able to re-arrange and re-organize them as I want in mobile screens.
Here my Bootply.
And to be more clear, I want it to look like this:
Containers 1 and 5 are fluid, instead 2, 3, 4 are not.
How can I move container 1 and 2 after 3 and 4 in small screens?
Thank you in advance for your reply!
Cheers!
This is not possible without rearranging your content.
One way is to make two versions of the area you want to rearrange and hide them based on the width of the browser. This is bad practice, especially if you have a whole website you want to rearrange on resize, but for a small div with 5 divs inside it would be an acceptable solution.
Here is the adapted HTML
<div class="desktopwrapper"> <!-- added a desktop wrapper -->
<div class="container-fluid green"></div>
<div class="container red"></div>
<div class="container ">
<div class="row">
<div class="col-sm-8 yellow"></div>
<div class="col-sm-4 fuxia"></div>
</div>
</div>
<div class="container-fluid blue"></div>
</div>
<div class="mobilewrapper"> <!-- added a mobile wrapper and rearranged content -->
<div class="container ">
<div class="row">
<div class="col-sm-8 yellow"></div>
<div class="col-sm-4 fuxia"></div>
</div>
</div>
<div class="container-fluid green"></div>
<div class="container red"></div>
<div class="container-fluid blue"></div>
</div>
And I have added these lines to CSS:
#media screen and (max-width: 766px) {
.desktopwrapper {
display:none;
}
}
#media screen and (min-width: 767px) {
.mobilewrapper {
display:none;
}
}
What this basically does, is hide one arrangement when the screen gets resized to 766px wide and will display the other. And of course the other way around.
You can try it out here.
Another way would be to put everything in a wrapper, position the wrapper relative, all the divs inside absolute and just place them with using px. This is however really not useful when divs have changing heights depending on the content. The best way would be to do like the example I have.
flexbox proof of concept.
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
color: white;
text-align: center;
}
body {
height: 100%;
}
h2 {
display: inline-block;
background: #000;
padding: .25em;
}
.page {
min-height: 100%;
display: flex;
flex-direction: column;
}
header {
flex: 0 0 75px;
background: darkgreen;
}
.banner {
flex: 0 0 100px;
width: 80%;
margin: auto;
background: darkred;
}
main {
flex: 1;
width: 80%;
margin: auto;
display: flex;
}
.content {
width: 75%;
background: yellow;
}
aside {
width: 25%;
background: fuchsia;
}
footer {
flex: 0 0 100px;
background: lightblue;
}
#media screen and (max-width: 768px) {
.banner,
main {
width: 100%;
}
main {
flex-direction: column;
order: -1;
}
.content,
aside {
flex: 1;
width: 100%;
}
aside {
flex: 0 0 150px
}
}
<div class="page">
<header>
<h2>1</h2>
</header>
<div class="banner">
<h2>2</h2>
</div>
<main>
<div class="content">
<h2>3</h2>
</div>
<aside>
<h2>4</h2>
</aside>
</main>
<footer>
<h2>5</h2>
</footer>
</div>
Codepen Demo