I've read the docs and watched some tutorials but can't figure out how to get exactly what I need. I will try to explain. I tried to post screen shots, but it said you have to have 10 reputation.
So for a large screen it should be 3 rows with 4 columns each. The third column in the second row should be divided into another grid that is identical to the big grid, 3 rows, 4 columns.
On mobile it should be one big column with the seventh one being the smaller grid.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<script src="lib/js/jquery-1.11.2.min.js"></script>
<title>Untable</title>
</head>
<body>
<div class="container">
<h3>Untable</h3>
<p>Convert this 'table-based' design into a 'responsive bootstrap grid' design.</p>
<p>Add whatever css and javascript you need to accomplish this.</p>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">One</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">Two</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">Three</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">Four</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">Five</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">Six</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="row">
<div class="col-xs-3 col-md-3 col-lg-3 col-sm-3">One</div>
<div class="col-xs-3 col-md-3 col-lg-3 col-sm-3">Two</div>
<div class="col-xs-3 col-md-3 col-lg-3 col-sm-3">Three</div>
<div class="col-xs-3 col-md-3 col-lg-3 col-sm-3">Four</div>
</div>
<div class="row">
<div class="col-xs-3 col-md-3 col-lg-3 col-sm-3">One</div>
<div class="col-xs-3 col-md-3 col-lg-3 col-sm-3">Two</div>
<div class="col-xs-3 col-md-3 col-lg-3 col-sm-3">Three</div>
<div class="col-xs-3 col-md-3 col-lg-3 col-sm-3">Four</div>
</div>
<div class="row">
<div class="col-xs-3 col-md-3 col-lg-3 col-sm-3">One</div>
<div class="col-xs-3 col-md-3 col-lg-3 col-sm-3">Two</div>
<div class="col-xs-3 col-md-3 col-lg-3 col-sm-3">Three</div>
<div class="col-xs-3 col-md-3 col-lg-3 col-sm-3">Four</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">Eight</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">Nine</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">Ten</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">Eleven</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">Twelve</div>
</div>
</div>
</body>
</html>
Additional CSS:
.container-fluid {
text-align: center;
border-style: solid;
}
.container {
text-align: center;
padding: 5px;
}
Edit: Well my reputation is 10 now (haha). So here is what I am trying to accomplish.
Mobile
Desktop
So what you're trying to do is totally possible - and you're on the right track to do it!
The most important thing to remember with bootstrap is to treat every 'col' as a brand-new section to work within. With that in mind, you can design with bootstrap on different levels and it will usually work as intended.
So in your case, the two levels to consider would be:
The top-level 12 columns, no matter what is in each one
Whatever is inside the 7th column
So for 1, you've approached it correctly! Simple set up your rows with the maximum number of columns you even plan to have in them as child-elements. As your greatest number is four in a row, you can totally do three rows with four columns in each (exactly as you did)!
For 2, again, you have the right approach. You would once again define three rows with three columns. However, this time you need to remember that you want those to STILL be in a 4-column per row configuration on xs size. As it is now, you have them re-sizing just like the top level columns, so when they are on an xl screen, they will each be full width. Instead, just give each column element in the second element a col-xs-3 class. That way they will always be aligned in the 'table format' you're looking for - even on a small screen size.
Example:
<div className="container-fluid">
<div className="row">
<div className="col-xs-12 col-md-3">
One
</div>
<div className="col-xs-12 col-md-3">
Two
</div>
<div className="col-xs-12 col-md-3">
Three
</div>
<div className="col-xs-12 col-md-3">
Four
</div>
</div>
<div className="row">
<div className="col-xs-12 col-md-3">
Five
</div>
<div className="col-xs-12 col-md-3">
Six
</div>
<div className="col-xs-12 col-md-3">
<div className="row">
<div className="col-xs-3">
Sub One
</div>
<div className="col-xs-3">
Sub Two
</div>
<div className="col-xs-3">
Sub Three
</div>
<div className="col-xs-3">
Sub Four
</div>
</div>
<div className="row">
<div className="col-xs-3">
Sub One
</div>
<div className="col-xs-3">
Sub Two
</div>
<div className="col-xs-3">
Sub Three
</div>
<div className="col-xs-3">
Sub Four
</div>
</div>
</div>
<div className="col-xs-12 col-md-3">
Eight
</div>
</div>
</div>
And that's it! You've got this :)
Related
I've been trying a lot of things but couldn't find the solution to my problem.
I want to align 3 different parts in a certain way for all kind of screens but col-sm and col-xs from bootstrap are not working.
I've tried this :
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
a
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
b
</div>
<div class="col-lg-4 col-md-4 col-sm-2 col-xs-2">
c
</div>
</div>
</div>
But it only displays on the same line for large and medium screens, not on small screens.
The only way I've found to make it work was to write col instead of col-sm-4 but if I do so, I can't manipulate the grid exactly as I would like
To solve the problem when the width is less than 576px, you should apply the col-4 style.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
a
</div>
<div class="col-4 col-sm-4 col-md-4 col-lg-6 col-xl-6">
b
</div>
<div class="col-4 col-sm-4 col-md-4 col-lg-2 col-xl-2">
c
</div>
</div>
</div>
Is there a way to stack a various number of divs in multiple rows when theres not enough space to show them in a single row?
So what I mean is, imagine you have 20 divs but only 5 fit in the first row. Then there should be 4 rows with 5 items.
On the other hand when we only have 3 items then there should only be one row with 3 items.
Flexbox makes this easy. Have a look here.
The Bootstrap has 12 columns per rows. You can nest columns/rows but not recommend that you nest containers.
With that being said, you can have up to 12 columns per row. To control how it is 'stacked' you classify which type of columns it belongs to. See the demo.
https://codepen.io/pkshreeman/pen/LLYZqm
Resize the window, and you will see what it does for different settings.
Hope this helps.
This is the code used in demo:
<div class="container">
<div class="row">
<div class="col-md-6"> col-md-6 </div>
<div class="col-md-6"> col-md-6 </div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6"> col-md-6 col-sm-6 </div>
<div class="col-md-6 col-sm-6"> col-md-6 col-sm-6 </div>
</div>
<div class="row">
<div class="col-md-6 col-sm-2"> col-md-6 col-sm-2 </div>
<div class="col-md-6 col-sm-2"> col-md-6 col-sm-2 </div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6">col-md-4 col-sm-6
</div>
<div class="col-md-4 col-sm-6">col-md-4 col-sm-6
</div>
<div class="col-md-4 col-sm-6">col-md-4 col-sm-6
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-2">col-md-4 col-sm-2
</div>
<div class="col-md-4 col-sm-2">col-md-4 col-sm-2
</div>
<div class="col-md-4 col-sm-2">col-md-4 col-sm-2
</div>
</div>
</div>
I'm using Bootstrap right now and i'm having an issue.
This is my code:
<div id="calendario" class="col-xs-12 col-sm-4 col-md-3 col-lg-3">...</div>
<div id="seccion" class="col-xs-12 col-sm-8 col-md-9 col-lg-6">...</div>
<div id="fotos" class="col-xs-12 col-sm-4 col-md-3 col-lg-3">...</div>
<div id="secciondos" class="col-xs-12 col-sm-8 col-md-9 col-lg-6 col-lg-push-3">...</div>
My layouts look like this:
But when my calendar height is bigger, this is what happens:
What can I do to fix it?.
I have fixed it! :)
<div id="calendario" class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
CALENDAR
</div>
<div id="seccion" class="col-xs-12 col-sm-8 col-md-9 col-lg-6">
SECTION 1
</div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div id="fotos" class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
PICTURES
</div>
<div class="clearfix visible-lg-block"></div>
<div id="secciondos" class="col-xs-12 col-sm-8 col-md-9 col-lg-6 col-lg-push-3">
SECTION 2
</div>
Just putting clearfix class where before the layout that is moved worked!
Thanks for the answers!!.
I can't vote up your comments because I don't have enough reputation :(.
Using containers and rows as the Bootstrap team intended, it's easy to keep things aligned:
<div class="container-fluid">
<div class="row">
<div id="calendario" class="col-xs-12 col-sm-4 col-md-3 col-lg-3">Calendar
<br>Calendar</div>
<div id="seccion" class="col-xs-12 col-sm-8 col-md-9 col-lg-6">Section One</div>
</div>
<div class="row">
<div id="fotos" class="col-xs-12 col-sm-4 col-md-3 col-lg-3">Section Two</div>
<div id="secciondos" class="col-xs-12 col-sm-8 col-md-9 col-lg-6 col-lg-push-3">Section Three</div>
</div>
</div>
Demo
You should use a wrapper around your calendar and make it .col-md-6 and then another around your second section and add the .col-md-6 class also. Like this, you would make sure that both your section will always talke half the screen. (You can also use other classes sm, xs and etc depeding on the layout you want to have)
For example:
<div class="col-md-6">
<div id="calendario" class="col-xs-12 col-sm-4 col-md-3 col-lg-3">...</div>
</div>
<div class="col-md-6">
<div id="seccion" class="col-xs-12 col-sm-8 col-md-9 col-lg-6">...</div>
</div>
This way, you'd have to review also for example your seccion and calendar, because now the whol col-md-6 will contains 12 columns also. Hope it helped. You might want to review the Grid system in there also:
http://getbootstrap.com/css/#grid
I have a Boostrap layout that has four centred columns when the screen is large, two columns when small, and one column when extra small. This works ok except when viewed at the small screen size when the columns do not wrap how I want them to.
On a large screen it looks like:
>zzz xxx yyy aaa
On an extra small screen it looks like:
>zzz
>xxx
>yyy
>aaa
But on a small screen it looks like:
> zzz
>xxx yyy
>aaa
I need it to look like:
zzz xxx
yyy aaa
My Boostrap code is:
<div class="row text-center">
<div class="col-xs-12 col-sm-6 col-md-2 text-center">
</div>
<div class="col-xs-12 col-sm-6 col-md-2">
<div class="text-center">zzz</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-2">
<div class="text-center">xxx</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-2">
<div class="text-center">yyy</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-2">
<div class="text-center">aaa</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-2 text-center">
</div>
</div>
Any suggestions as to how I can achieve what I want?
What you have is actually:
(empty) zzz xxx yyy aaa (empty)
Your md allows for all 6 columns in a row (2 cols each), so that works fine (offsetting the first seemingly by 2 columns due to it being empty)
Your xs makes all of them 12 columns wide so this will also seemingly work as they all stretch across (with a blank column on top and below).
Your sm is working correctly but it looks as though it is not due to the extra columns you have.
Either remove these empty divs or if you really need them do this:
<div class="row text-center">
<div class="col-xs-12 col-sm-12 col-md-2 text-center">
</div>
<div class="col-xs-12 col-sm-6 col-md-2">
<div class="text-center">zzz</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-2">
<div class="text-center">xxx</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-2">
<div class="text-center">yyy</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-2">
<div class="text-center">aaa</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-2 text-center">
</div>
</div>
[EDIT - using offsets]
If you are simply looking for offsets at the md value, this should work instead of cluttering your mark-up with empty divs.
<div class="row text-center">
<div class="col-xs-12 col-sm-6 col-md-2 col-md-offset-2">
<div class="text-center">zzz</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-2">
<div class="text-center">xxx</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-2">
<div class="text-center">yyy</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-2">
<div class="text-center">aaa</div>
</div>
</div>
You have a blank div. Remove that and it will work as intended.
<div class="col-xs-12 col-sm-6 col-md-2 text-center"> </div>
Class col-md-* have a minimal space. If you use min-height: 0px;, it will may help you.
<div class="col-xs-12 col-sm-6 col-md-2 text-center" style="min-height: 0px;">
I'm new to Bootstrap and i have a six columns contact form, when I'm looking it on my smartphone i see the button on top, or in general i see the order in revers to what i need, this is the code:
i see samples of push,
<div class="row"> <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> </div>
but how to do it with six columns?
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="row">
<div class="col-sm-12 col-md-6" >div1</div>
<div class="col-sm-12 col-md-6" >div2</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="row">
<div class="col-sm-12 col-md-6" >div3</div>
<div class="col-sm-12 col-md-6" >div4</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="row">
<div class="col-sm-12 col-md-6" >div5</div>
<div class="col-sm-12 col-md-6" >div6</div>
</div>
</div>
how can i reverse the ordering
What you are doing is much simpler when written with right way in Bootstrap.
Try the following snippet:
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-4">div1</div>
<div class="col-md-2 col-sm-4">div2</div>
<div class="col-md-2 col-sm-4">div3</div>
<div class="col-md-2 col-sm-4">div4</div>
<div class="col-md-2 col-sm-4">div5</div>
<div class="col-md-2 col-sm-4">div6</div>
</div>
</div>
When on medium size screen the divs will show in a single line, but when you go on small screen, then will stack up to show 3 divs in a row, when you go on extra small screen the divs will stack up to show only one in a row.
Try this and inform me, if you are able to achieve the right layout or not.
Updated Code:
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-4 visible-lg visible-md visible-sm">div1</div>
<div class="col-md-2 col-sm-4 visible-lg visible-md visible-sm">div2</div>
<div class="col-md-2 col-sm-4 visible-lg visible-md visible-sm">div3</div>
<div class="col-md-2 col-sm-4 visible-lg visible-md visible-sm">div4</div>
<div class="col-md-2 col-sm-4 visible-lg visible-md visible-sm">div5</div>
<div class="col-md-2 col-sm-4">div6</div>
<div class="col-md-2 col-sm-4 visible-xs">div5</div>
<div class="col-md-2 col-sm-4 visible-xs">div4</div>
<div class="col-md-2 col-sm-4 visible-xs">div3</div>
<div class="col-md-2 col-sm-4 visible-xs">div2</div>
<div class="col-md-2 col-sm-4 visible-xs">div1</div>
</div>
</div>
You can't reverse the order but you can use some extra divs to achieve this functionality. Lets take extra 5 divs below 6th div and put them in reverse order. These divs will only show up on mobile screen. At the same time hide the above 5 divs at mobile screen. So now on mobile screen you are seeing divs in reverse order.
As users in comments said, please move your CSS to external .css file, that way it it easier to read and help,
Please use Plunkr or similar so people can better understand your question.
Try removing dir=rtl from outer div,
also you might want to read about Twitter Bootstrap's Helper Classes
This is a simple bootstrap grid example,
where on 'xs' screen each div will take 6 (1/2) of available space.
<div class="container">
<div class="row">
<div class="col-sm-8 col-xs-6">.col-md-1</div>
<div class="col-sm-4 col-xs-6">.col-md-2</div>
</div>
</div>
see this plunkr for example