I have this html code that uses bootstrap:
<div class="row">
<div class="col-sm-12 col-xs-6"><h1>DIV1</h1></div>
<div class="col-xs-12"><h1>DIV2</h1></div>
<div class="col-sm-12 col-xs-6"><h1>DIV3</h1></div>
<div>
It is working fine for all devices except xs. On extra small devices I want DIV1 and DIV3 on same row (on first row).
I want to maintain the layout as it is for all other devices.
You may have to add additional styling to achieve this as the divs will generally follow after each other. You could set positioning to absolute and with additional bottom margins for the other two place the middle one below.
I managed it via css and bootstrap classes:
<div class="row">
<div class="col-sm-12 col-xs-6"><h1>DIV1</h1></div>
<div class="col-xs-12"><h1>DIV2</h1></div>
<div class="col-sm-12 col-sm-offset-0 col-xs-6 col-xs-offset-6" id="div3"><h1>DIV3</h1></div>
</div>
And the css for third div:
#media (max-width: 767px) {
#div3{
position:absolute;
top:0px;
}
}
Related
I'm trying to reorder the columns on my website via Bootstrap's method of reordering columns depending on the screen size which works fine for most of the responsive layouts I'm testing apart from 1.
The layout having problems is the Tablet Landscape Layout (1024 x 768) which displays like this:
Every other screen displays the blue div and the right div either with the red div on top if the screen is too small or on the right with the blue div aligning itself exactly next to it if the screen is large enough.
This is the code I'm using right now:
<div class="container">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="row clearfix">
<div class="col-xs-12 col-sm-12 col-md-push-8 col-md-4 col-lg-push-8 col-lg-4 col-xl-push-8 col-xl-4" style="background: red">
Basket
</div>
<div class="col-xs-12 col-sm-12 col-md-pull-8 col-md-8 col-lg-pull-4 col-lg-8 col-xl-pull-8 col-xl-8" style="background: blue">
News
</div>
</div>
</div>
</div>
Does anyone know why the blue div is so far to the right on the Tablet Landscape layout rather than touching the red div like it should?
Some general markup issues:
First of all, there's no col-xl-*, so you can get rid of those.
Secondly, you don't need col-xs-12, since the default is for it take up the whole width unless otherwise specified.
Third, Bootstrap is mobile first, so larger sizes will override the existing smaller sizes, meaning if you don't intend on changing something, there's no need to specify the larger size again.
The actual issue is that col-*-pull-* is relative to where the element would be placed. Bear in mind, you haven't changed anything in the document flow. So the elements are positioned normally and then phase shifted with left or right. Since the blue container would normally start 4 columns over, you only need to pull it back by 4 columns, instead of 8.
The whole thing can be rewritten like this:
.red { background: red }
.blue { background: blue }
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row ">
<div class="col-md-4 col-md-push-8 red"> Basket </div>
<div class="col-md-8 col-md-pull-4 blue"> News </div>
</div>
</div>
I have been looking over other questions posted on SO and tried the CSS however I cannot seem to align the "box" HxV within the container.
What is the best way to get it to display HxV responsive?
HTML:
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 center-block">
box
</div>
</div>
</div>
Create an class like .centred-col and write an rule like
.centred-col{ float: none; margin:auto;}add this after ur .col classes.
Using .container centers and auto margins your grid to begin with, there should be no need for offsets:
<div class="container">
<div class="row">
<div class="col-xs-12">
box
</div>
</div>
</div>
Note: .col-xs-12 will set your column to the full width after container margins from the XS size to the LG size.
Documentation: Bootstrap CSS Documentation under "Containers".
I have box in my HTML page. The box width responsive. on desktop it should take 540px width and in mobile the box should take 100% width. the is centre align in desktop. The problem I am facing is that on mobile view the box width is not touching the device width because of container class. This problem can be fixed for using .row class but when I use class it is also expending the width of box on desktop. Can this require be achieved without writing extra media query. fiddle
<div class="container">
<div class="col-xs-12 col-md-6 box">
<div class="col-md-12" style="background:#022243">
content....
</div>
</div>
</div>
Using media queries is the fastest and most reliable way to attain what you need here I think but If you do not want to then for me my approach is this..
<div class="container hidden-xs visible-sm-block">
<div class="col-xs-12 col-md-6 box">
<div class="col-md-12" style="background:#022243">
content....
</div>
</div>
</div>
<div class="row visible-xs-block hidden-sm">
<div class="col-xs-12 col-md-6 box">
<div class="col-md-12" style="background:#022243">
content....
</div>
</div>
</div>
Not tried yet but I think this will satisfy your problem.
Hope it helps
See js fiddle:
Fiddle
Did a new mobile class to remove padding on mobile from container, also added padding:0; on col-xs-12
.col-xs-12 {
padding:0;
}
#media (max-width : 480px) {
.mobile_fix {
padding:0;
}
}
As a beginner user of Bootstrap's grid system, I need to keep two divs side-by-side using a float:left regardless of device. This is so that a jQuery animation moves a parent div right and left to bring either div into view. How to structure the HTML of the green boxes to achieve this effect? Or it purely a css media query matter?
Disregard the blue box.
This is what I have so far:
<div class="container">
<div class="col-xs-12 col-md-7 view">
<div id="panelviewer">
<div class="row">
<div class="col-xs-12 col-md-6 panel1">one</div>
<div class="col-xs-12 col-md-6 panel2">two</div>
</div>
</div>
</div>
</div>
Jsfiddle
There are other ways to keep the divs side by side and achieve what you need:
#panelviewer .row {white-space:nowrap;}
.panel1 {display:inline-block;float:none;background:#aaa;}
.panel2 {display:inline-block;float:none;background:#eee;}
Demo http://jsfiddle.net/7HcQ8/3/
No matter what unless you implicitly specify in a media query and your cells are too wide to fit in mobile it will force onto two lines. In this case when it hits the mobile breakpoint decrease the size of the content so it will fit. Place a unique class on those DIVs such as class="sizeSmaller" and this might help out:
#media (max-width: 768px) {
.sizeSmaller {
height:50%;
width:50%;
}
}
Adjust the width of the media query to suit your neds.
I have a struggle with bootstrap framework.
I want to create a simple box with image on the left side and some text and other elements on the right side. But having issue when it is displayed on small screens.
This is my current code.
<div class="col-md-8" style="margin-top: 3px;">
<div class="feed-box">
<div class="row">
<div class="col-md-1">
<img style="max-width: 52px;" src="http://0.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=250">
</div>
<div class="col-md-11">
<div class="row">
<p>John Doe announced something</p>
</div>
<div class="row">
<p>
Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.
</p>
</div>
<div class="row">
Comment
Share
</div>
</div>
</div>
</div>
</div>
I will explain it through images:
Desktop (it's fine this padding is not important here):
Small screen (bad):
What I am trying to make (in small screens):
You need to also specify the cols for smaller screens...i.e - you don't need to put in for md
<div class = "row">
<div class = "col-sm-1">
</div>
<div class = "col-sm-11">
</div>
</div>
Use media queries to style the elements for small screen.
For example check this fiddle(resize to see the difference)
CSS used
#media (max-width: 800px){
.feed-box .col-md-1{
float:left;
margin-bottom:8px;
}
.feed-box .col-md-11{
margin-top:15px;
}
}