I am using bootstrap 3 and I would like to create three divs that change their position depending on the current viewport. I think this should be possible, but somehow i cannot conclude how this can be established using bootstrap. So I have 3 divs, lets call them img text and ex.
I would like them to work for the different viewports as the following image suggests.
I have played around with pull and push, but that does not seems to solve my problem. I am looking for a “pull-up class” so that i can move for example a div to the right (using push) and then be able to move it up.
This is an example that still does not work..
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-push-6 col-md-6 col-md-push-6">
img
</div>
<div class="col-xs-12 col-sm-6 col-sm-pull-6 col-md-6 col-md-pull-6">
text
</div>
<div class="col-xs-12 col-sm-6 col-sm-push-6 col-md-6 col-md-push-0">
exp
</div>
</div>
EDIT 1: This code is one of the answers to this question that exactly targets the core of the problem. I updated the example image and added another one to illustrate the problem.
This code produces this behaviour (Notice the empty space on the right side of the sm view)
EDIT 2: The accepted answer provides a solution for a fixed size text, img, exp.
For the behavior you want, you need to use the bootstrap push and pull classes.
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-push-6 col-md-6 col-md-push-6">
img
</div>
<div class="col-xs-12 col-sm-6 col-sm-pull-6 col-md-6 col-md-pull-6">
text
</div>
<div class="col-xs-12 col-sm-6 col-sm-push-6 col-md-6 col-md-push-0">
exp
</div>
</div>
You can see it in action here: http://www.bootply.com/CNGe5KxWxK
More info about pushing and pulling can be found here: http://getbootstrap.com/css/#grid-column-ordering
Related
I am trying to get a Highcharts pie chart to display correctly.
<div id="chart">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div id="row-electric" class="row row-chart">
<div id="divPieSubst" class="col-xs-6 col-sm-6 col-md-6 col-lg-6"></div>
<div id="divPieFeedr" class="col-xs-6 col-sm-6 col-md-6 col-lg-6"></div>
</div>
<div class="row row-chart">
<div id="divPieCycle" class="col-xs-6 col-sm-6 col-md-6 col-lg-6"></div>
<div id="divPieRoute" class="col-xs-6 col-sm-6 col-md-6 col-lg-6"></div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div id="divBarDays"></div>
</div>
</div>
row-chart is something I tried to do with some CSS I found:
<style>
div.row-chart {
height: auto;
}
</style>
Currently, I am struggling with the CCS, which I think is caused by bootstrap v3.3.7.
Why is it always coming back as a tall rectangle?
I included the Highcharts tag, because this could be something that Highcharts is doing.
In Highcharts API we can read:
height: null, number, string
...
By default (when null) the height is calculated from the offset height
of the containing element, or 400 pixels if the containing element's
height is 0. Defaults to null.
So yes - the height is set by the chart.
API Reference: https://api.highcharts.com/highcharts/chart.height
What I understand that you want to resize the rectangles height?
have you took a look at this page ?
https://getbootstrap.com/docs/4.0/utilities/sizing/
The full snippet is needed I think what you posted is only a small part of it . I don't see any link to an external or internal bootstrap stylesheet .
another option is to resize the div tags with the css height property
so take a look at this link too
https://www.w3schools.com/cssref/pr_dim_height.asp
peace!
I'm trying to follow the guide here: http://getbootstrap.com/css/
and I just can't seem to understand what the "row" class is doing. I was trying some of the examples in the guide such as:
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
I tried it with the row div and without it, and I was trying to place everything inside a container, and there was no difference at all, they all looked the same.
Could anyone explain what the meaning of the "row" class is ?
In Bootstrap, the "row" class is used mainly to hold columns in it. Bootstrap divides each row into a grid of 12 virtual columns. In the following example, the col-md-6 div will have the width of 6/12 of the "row"s div, meaning 50%. The col-md-4 will hold 33.3%, and the col-md-2 will hold the remaining 16.66%.
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-4"></div>
<div class="col-md-2"></div>
</div>
I like to think of the row as a container that can contain X many columns equal to 12. You would use the row class to separate different stacked element (columns).
The columns as you defined them col-xs-12 col-md-8 mean that on a medium sized screen and above the div will span 8/12 of the page and on a xs small screen (mobile) it will span the full 12 columns. This works with the col-xs-12 col-md-4 class because 8 + 4 = 12.
If your entire site is split this way (8/12 and 4/12) then all you really would need is one row! Other wise you'd create another row for different column width. An example would be:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8"></div>
<div class="col-xs-12 col-sm-4"></div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4"></div>
<div class="col-xs-12 col-sm-2"></div>
<div class="col-xs-12 col-sm-6"></div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-3"></div>
<div class="col-xs-12 col-sm-3"></div>
<div class="col-xs-12 col-sm-3"></div>
<div class="col-xs-12 col-sm-3"></div>
</div>
</div>
The container class is used to create a nice margin around your entire site, but if you have a portion of your site you want to span across the entire width, you would need to close the container and create a container-fluid class. Then create another container to get the margin back. Hope that all makes since! Just how I think about it as.
The difference can be seen here with row class. Row like container is a class applied to the element.
P.S: run the snippet in full view
.color {
background: #cfcfcf
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class='color container'>
Container only
</div>
<p>
<div class='color container-fluid'>
<div class=row>
Fluid Container & row
</div>
</div>
<p>
<div class='color container'>
<div class=row>
Container & Row
</div>
</div>
I have some html content that I want to align and distribute as two columns beneath each other, of equal content.
But on mobile divices, I'd like the content to be stacked as one column.
How could I achieve this using bootstrap css?
I tried as follows, which did not work:
<div class="row">
<div class="col-lg-2">
//the content to distribute
</div>
</div>
Additionally, I cannot use css columns as I have to support IE8+9.
<div class="row">
<div class="col-xs-12 col-sm-6">
//first half
</div>
<div class="col-xs-12 col-sm-6">
//second half
</div>
</div>
The col-xs-12 tell the column to be at full screen when using mobile phones (or small screens).
The col-sm-6 tell the column to be at half size of the row when using any higher size devices.
I suggest reading bootstrap docs
----Edit----
If you want to use columns css- also for ie8,9 you can check this js plug in:
http://welcome.totheinter.net/columnizer-jquery-plugin/
hi you can use this i think please take a look
.tt{
border : 2px solid grey;
}
<div class="container">
<div class="row-fluid">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 tt">
first half
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 tt">
second half
</div>
</div>
</div>
and here is the working demo code..
Demo code
I have three divs that i need to position based on screensize. Im using bootstrap's grid system on my page, but i have encountered a small issue with the placement
Can anyone help me accomplish this?
Thanks in advance!
PS: let me know if any more details are needed.
Here is the code:
<div class="row">
<div id="div1" class="col-xs-6 col-sm-12 col-md-8"><h2>Some header text here DIV1</h2></div>
<div id="div2" class="col-xs-3 col-sm-6 col-md-2"><span>Some span here DIV2</span></div>
<div id="div3" class="col-xs-3 col-sm-6 col-md-2"><span>Some other span here DIV3</span></div></div>
The fiddle:
Fiddle
And an image of how i want it to work:
To get the layout and order you want, you'll need to use nesting along with push pull like this..
<div class="row">
<div class="col-md-6 col-md-push-6 col-xs-12">
<div class="row">
<div id="div2" class="col-xs-7">div2</div>
<div id="div3" class="col-xs-5">div3</div>
</div>
</div>
<div id="div1" class="col-md-6 col-md-pull-6 col-xs-12">div1</div>
</div>
I used col units col-7 and col-5 for div's 2 and 3 (based on your picture) but you may need to change those to the actual units you want for those columns.
Demo: http://bootply.com/jFfCKhkuR3
You need to use column ordering, see the bootstrap docs here
Using col-xs-push-12 in div1 and pull consequently the other two divs.
Here you have a small snippet showing the effect of the col push and pull
I have html markup like below,
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
Some contents
</div>
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-12" >
Some Content
</div>
<div class="col-lg-5 col-md-5 col-sm-4 col-xs-12" >
Some Content
</div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12 text-right" >
<div class="company-add-btn">+ Add more companies</div>
</div>
</div>
In large display's it works fine as single row structuring four divs in columns.
But in small displays I like to re-arrange the layout,
First div will get a complete row with full width
Third div will come before 2nd div and take a complete row with center aligned
2nd and 4th div will take a complete row with 2nd row stays at left, and 4th floated right.
Using bootstrap col-md-pull-* or col-md-push-* will just do the reordering inside a row. So that will not work.
One possible solution will be duplicating the markup for each media break points, but Isn't there any better approach then this ?
Can anyone suggest any way ? or point me a good place to start looking for solution ?
I recommend (even though it's dirty) adding your view twice, once in a
<div class="hidden-lg hidden-md hidden-sm">Your content for the XS-grid.</div>
and for the other 'layout
<div class="hidden-xs">Your content for everything but XS-grid.</div>
Hope that helps (looking forward to a better solution ;)).
what you are talking is placing third column before second column and assign it the complete width, bootstrap will not do this.
This can be done only if these columns are to be shown as a single row with pull-let and pull-right. The only option you have is to duplicate the markup in this case, or write down your own css for placing third column before the second one(but this would be not a good idea).
You could hide the second div on small screens; the third div would then be in second position. You would then have to duplicate just the second div after the third and show on small screens only, then do the pull-left and right on the last two divs. Something similar this might work (this example is for small):
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
Some contents 1
</div>
<div class="col-lg-1 col-md-1 hidden-sm col-xs-12" >
Some Content 2
</div>
<div class="col-lg-5 col-md-5 col-sm-12 col-xs-12" >
Some Content 3
</div>
<div class="visible-sm col-sm-9 lefty" >
Some Content 2 - duplicate
</div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12 righty" >
<div class="company-add-btn">+ Add more companies</div>
</div>
</div>
The use of col-xs-12 is really unnecessary in this case, and in most cases, the column will be 100% below the last col class used.
DEMO: https://jsbin.com/nuhoba
It would be better if you had a graphic to describe what you want. If I followed correctly, then you would order your html in the order it is on a small viewport then -- if the column is in the same .row and the .row is no more than 12 columns, you can push and pull left and right. You have to add up to 12 columns per row at any given column class, I've used col-sm-X for simplicity. If you play around with col-md and/or large that means that you have to use those columns on the others but it need to add to 12 at that min-width.
HTML:
<div class="container">
<div class="row">
<div class="col-sm-3">
A
</div>
<div class="col-sm-4 col-sm-push-2 text-center-xs">
C
</div>
<div class="col-sm-2 col-sm-pull-4">
B
</div>
<div class="col-sm-3 text-right">
<div class="company-add-btn">+ D</div>
</div>
</div>
</div>
CSS
#media (max-width:767px) {
.text-center-xs {text-align:center;}
}