I am modifying my website that uses a style sheet with a sixteen column grid layout. I am trying to make a custom page where the left side is big, and the right side is more or less a narrower sidebar:
http://tecinfrared.com/the-backyard-development-ii/
screen shot:
Here is my simple html so far:
<div class="sixteen columns"><!-- Sixteen Columns Layout Start -->
<div class="twelve columns" style="background-color:#ff9900;">
left
</div>
<div class="four columns" style="background-color:#99ff00;">
right
</div>
</div><!-- Sixteen Columns Layout End -->
What I expect to happen is that the "right" div (lime colored) lines up to the right of the "left" or orange div. I have made a page that uses floats, but the problem is it's not responsive, so on mobile devices the sidebar div has to push below the left column div.
I thought this css & html should work similar to Zurb's Foundation responsive framework, where the divs will drop vertically for smaller screens, but line up horizontally for wider screens.
add this CSS
.columns {
display: inline-block;
}
in order to allow side-by-side display of these elements.
And if you don't like the margins between the elements, also add margin: 0 !important; to that rule.
Related
My Goal is to view bootstrap page on mid to large screen as col-screen-8 (screen-lg-md,sm,xs) as image to left. col-screen-4 as form to right in single row and on next row col-screen-12 as content at center eg. Banking.For mobile view or small screens I want to view Image at top -> Banking at middle -> Form as bottom in mobile view vertically.I am able to achive the mobile view as expected and see result by shrinking window. push pull demo.When it comes to mid or big screen it is not working as expected.When i played using push-pull bootstrap classes they are just moving left to right.
What is happening:
When i increase screen size Image column is getting bigger and Form and Banking remain at bottom
What is expected:
When i increase screen size Image should move to left side with size col-screen-8 as Image, Form col-screen-4 at right and content Banking col-screen-12 as Banking to the next row at bottom. Mobile view must not affected.
Thanks.
As far as I make of it, .col-XX-pull-N and .col-XX-push-N classes only
add left and right negative margins, which means you can only use them to offset columns left and right on the same .row. You can't push a column on the next row. You're only pushing it outside the layout. It won't magically wrap.
You should add a class to your special row and use flexbox's order property to re-order columns at desired widths:
.reorder-md {
display: flex;
flex-wrap: wrap;
}
#media (min-width: 992px) {
.reorder-md-last {
order: 2;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row reorder-md">
<div class="col-xs-12 col-md-8">
<div class="alert alert-danger">Image</div>
</div>
<div class="col-xs-12 reorder-md-last">
<div class="alert alert-info text-center">Banking</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="alert alert-success">Form</div>
</div>
</div>
</div>
Please note .reorder-md and .reorder-md-last are custom classes I added. So don't expect .reorder-lg to work in Bootstrap. You need to add the CSS for reordering yourself, as well as match Bootstrap's responsive breakpoints.
I need a section in bootstrap where there are two columns (6 and 6) in a row.
The left 6 column div needs to have the fluid effect where its contains stretch to the browser window's left edge.
The right 6 column div needs its contents to match/be kept within the right-side confines of the other sections of the page that have a normal (non-fluid) container class (which has a width of 1170px).
How can I best achieve this effect?
This is for 1170px wide container, you need media queries for the rest of the sizes. Hopefully helps.
CSS:
.stretch-left {
margin-left: calc((100vw - 1170px) / -2);
}
HTML:
<div class="container">
<div class="row">
<div class="col-md-6 stretch-left">
content
</div>
<div class="col-md-6">
content
</div>
</div>
</div>
I am trying to share the navbar across all devices, but I want it to format differently on small screens than on large. I am new to Bootstrap so this might be obvious, but I am having trouble getting the menu right with a single set of code and not trying to do it with different rows and col-* settings.
Bootply Sample
I want two things actually. I would like the win and loss to be on the same line (which is close without the navbar-right) except they are not even in vertical position.
EDIT: I am able to correct this when removing navbar-right etc..., but do not get the navbar-right when the menu is condensed.
Secondly, I wanted the navbar-right, so when on a small display, all the badges align on the right hand side of the menu.
Is there a way to keep the menu smaller as well, so on a tablet it is not the whole width of the screen while on a phone it might be?
When the navbar normally draws, I want the badges beside the labels to keep the menu items smaller/closer together. Only on the pull down menu do I want them to go to the right.
Do I need to create two copies of the navigation to achieve this?
First, the badges seem aligned to me if you remove those navbar-right classes. If you are using that class just to float them right, you should be using pull-right but in this case there's no need.
Second, if you wrap your badges inside another span, then you can use media queries to float the container right on mobile devices.
<span class="badges">
<span class="badge alert-success">Win: 3</span>
<span class="badge alert-danger">Loss: 1</span>
</span>
/* Note that you can use Bootstrap's '#screen-sm-min' variable if using LESS.*/
#media (max-width: 767px) {
.badges {
float: right;
}
}
If you want your navbar to be full width on mobile but not any other device, you could try something like this:
#media (min-width: 768px) {
.navbar {
width: 80%;
margin: 0 auto;
}
}
Demo
Edit
For the changing width you can use Bootstrap's col-*-* classes like this:
<div class="wrap">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
...
</div>
</div>
</div>
That means for mobile it'll be full width, but anything from portrait tablet upwards will take up 10 of the 12 grid.
Demo
I'm using Bootstrap 3 with a fixed width.
My footer exist of two colums (left & right) with each a different background color.
I want the content of my footer to be wrapped in the '.container' so it aligns with the rest of the content on my website.
Now here is the thing I can't get to work:
I want to make it look like the footer has a full width. So left of the '.container' should be one color and the right an other.
Plus when the resolution gets below a certain point the two colums should shift under each other but with the background colors still fullwidth.
See picuture to make it all more clear.
picture
My first thought was using a background image on '.container-wrapper' and then on the mobile version a different background aligned from the middle. Like this:
CSS
.kleur {
background:url(img/test-bg.jpg);
background-repeat:repeat-y;
background-position:center; }
#media (max-width: 992px) {
.kleur {
background:url(img/test-bg2.jpg);
background-repeat:repeat-x;
background-position:center; }
}
HTML
<div class="fullwidthcontainer kleur">
<div class="kleur-links" style="background:#cfcfcf; height:100%; width:100%"></div>
<div class="container">
<div class="row">
<div class="col-md-8" style="background:#feff8b;"> <br/><br/><br/> <br/><br/><br/> </div>
<div class="col-md-4" style="background:#8bd7ff;"> <br/><br/><br/> <br/><br/><br/> </div>
</div>
</div>
Link to working example, scroll down
This works fine for Desktop, but for Mobile it only works if the two columns have exactly the same height. I really like the height to be variable, but don't have any idea how...
Anyone any thought?
This is a fluid solution:
Fluid solution without backgrounds
But I rather have a solution with a fixed width
Im using the newest twitter bootstrap to construct a responsive grid website. i have three divs across a responsive grid like so:
<div class="row-fluid">
<div class="span4">...</div>
<div class="span4">...</div>
<div class="span4">...</div>
</div>
...and this works as intended via the bootsrap documentation. However I have a separate background color on these divs from the html body background color, and when i drag the browser window to a smaller width to "collapse" the divs to show on top of each other, the gutter space between them disappears (creating a look of one big div versus three separate ones) is there anything i can do to create some gutter space between the divs when the width gets small enough to cause them to stack vertically?
You have a couple options...
(1) You could define a class and apply it to any divs you want to have a bottom margin.
In your application.css (or similar):
.mb10 {margin-bottom:10px;}
In your html page:
<div class="row-fluid">
<div class="span4 mb10">....</div>
<div class="span4 mb10">....</div>
<div class="span4 mb10">....</div>
</div>
OR
(2) You could make sure you wrap your div.span4 content in <p></p> tags.
<div class="row-fluid">
<div class="span4"><p>....</p></div>
<div class="span4"><p>....</p></div>
<div class="span4"><p>....</p></div>
</div>
From the Bootstrap - Typography section:
http://twitter.github.io/bootstrap/base-css.html#typography
In addition,
<p> (paragraphs) receive a bottom margin of half their line-height
(10px by default).