In the code below for Bootstrap 3, I am attempting to get the 3rd column to not stack. I want it to always stay top right just as the left most column stays top left. Is there a simple way? I thought about just excluding that section from bootstrap and just apply css to float right, but surely in Bootstrap, I can do this.
<header id="t3-header" class="container t3-header">
<div class="row">
<!-- LOGO -->
<div class="col-xs-12 col-md-2 logo"> I stay always top left</div>
<div class="col-xs-12 col-md-8"> I should stackunder 1st column as browser resizes </div>
<!-- I want this column to not stack below column 2 as the browser resizes. -->
<div class="col-xs-12 col-md-2">
I should always stay top right
<div class="row">
<div class="col-lg-6"> </div>
<div class="col-lg-6"> </div>
</div>
</div>
</div>
If I've understood you correctly, you've got to make the "top right" div, appear first in the cascade. To do this, first it as the first column, then you can use pull-left and pull-right helper classes to trick the first two columns:
Secondly, you could remove the col-xs-12 alike in the example:
<header id="t3-header" class="container t3-header">
<div class="row">
<div class="col-md-2 pull-right">
I should always stay top right
<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div>
</div>
<!-- LOGO -->
<div class="col-sm-12 col-md-2 logo pull-left">
I stay always top left
</div>
<div class="col-sm-12 col-md-8 pull-left">
I should stackunder 1st column as browser resizes
</div>
</div>
</div>
Example: http://www.bootply.com/ee3E67pujY
Related
I'm using bootstrap 4 and trying to create a layout. The problem I'm having is with the responsive.
When the page size gets smaller I want the right-nav to go under the left-nav. The problem I run into is when the main body runs longer than the left nav. The right nave always goes under the main body, is there a way to force it under the left-nav without the space in between?
<div class="container-fluid">
<div class="row pt-5 pl-3 pr-3">
<div id="left-nav" class="d-none d-sm-none d-md-block col-md-4 col-lg-3 col-xl-2">
...
</div>
<div id="main-body" class="col-12 col-sm-12 col-md-8 col-lg-9 col-xl-8">
...
</div>
<div id="right-nav" class="d-none d-sm-none d-md-block col-md-3 col-lg-3 col-xl-2">
...
</div>
</div>
<section id="footer" class="footer">
<div class="container">
<div class="row">
</div>
</div>
</div>
</div>
Since Bootstrap 4 uses flexbox, cols across a row are always going to be the equal height (set by the height of the tallest).
You can workaround this by "disabling" flexbox at certain breakpoints using d-(breakpoint)-block on the row. By making the row display:block instead display:flex, floats can now be used to float cols to the right or left.
<div class="container-fluid">
<div class="row pt-5 d-md-block d-xl-flex">
<div id="left-nav" class="d-sm-none d-md-block col-md-4 col-lg-3 col-xl-2 border float-left">
left
</div>
<div id="main-body" class="col-md-8 col-lg-9 col-xl-8 border taller float-right">
main
</div>
<div id="right-nav" class="d-sm-none d-md-block col-md-4 col-lg-3 col-xl-2 border">
right
</div>
</div>
</div>
Demo: https://www.codeply.com/go/A0oYUlPOud
Related:
How to fix unexpected column order in bootstrap 4?
How to make this column ignore the vertical space
I have a logo that I want place it in right of my container in first row. First I wrote this code:
<div class="container">
<div class="row">
<div class="col-md-3">
<img src="../Images/logo.png" alt="Logo"/>
</div>
<div class="col-md-9">
</div>
</div>
</div>
and the logo IS shown in left side of first row with some margins. Now I add pull-right class to my div like this:
<div class="col-md-3 pull-right">
<img src="../Images/logo.png" alt="Logo"/>
</div>
and the logo aligns to right side of the browser window without any margins. How I place logo on right side of first row like left side?
Thanks
If you want to pull the image to the right you need to pull the image, not the row:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-6">
<img src="../Images/logo.png" alt="Logo" class="pull-right"/>
</div>
<div class="col-xs-6">
Column 2
</div>
</div>
</div>
If you want to the columns to switch places without changing the order of the <div>s you should use .col-*-pull-* and .col-*-push-*. They will respect the column gutters:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-6 col-xs-push-6">
<img src="../Images/logo.png" alt="Logo"/>
</div>
<div class="col-xs-6 col-xs-pull-6">
Column 2
</div>
</div>
</div>
You can of course combine the two as well.
(By the way, don't set the alt-text to "Logo" in your final design, set it to something useful, like the company name).
I have a screen split in two, using two columns.
<div class="row">
<div class="col-md-6 well">
Left Box
</div>
<div class="col-md-6 well">
Right
</div>
</div>
I need a small (approx 10px) gap between the two columns.
http://www.bootply.com/vaOb1WdR5I
Can this be done?
Both boxes would need to reduce by 5 pix (in the above example), as I need the total width to remain.
Edit: Some ideas nearly work, but I am getting an extra Well that I don't want. With this:
<div class="row">
<div class="col-md-6">
#Html.Action("ShowDuePayments", "Transaction")
</div>
<div class="col-md-6">
#Html.Action("ShowRecentTransactions", "Transaction")
</div>
</div>
I get this:
The 'under' well div shouldn't be visible.
A couple of points:
You shouldn't add extra classes to the Bootstrap columns (that's not a hard and fast rule, but a good recommendation)
You are missing the container wrap.
Make changes using those rules and it looks like this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="well">Left Top Box</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="well">Left Bottom Box</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="well">Right Box</div>
</div>
</div>
</div>
How about this?
<div class="row">
<div class="col-md-6" style='padding-right:5px'>
<div class='well'>
Left Box
</div>
</div>
<div class="col-md-6" style='padding-left:5px'>
<div class='well'>
Right
</div>
</div>
</div>
http://www.bootply.com/Ogrte6IQzw
If you remove the inline styling, you will have the natural spacing provided by bootstrap, which is 15px padding.
You can change the class of col-md-6 and add width:49%, and to the 2nd div add pull-right class like:
HTML:
<div class="row">
<div class="col-md-6 well">
Left Box
</div>
<div class="col-md-6 well pull-right">
Right
</div>
</div>
CSS:
.col-md-6{
width:49%;
}
You can also try to add padding to the two div tags ie:
.col-md-6{
padding:5px;
}
This would add a bit of padding to all the sides - unless you use padding-left & padding-right and assign different class names to the divs - depending on how you want your code to be layed out.
You could also use an additional class so you only modify special column-6 elements and not all on your site. This example also uses percentage based widths as Flopet17s. You could tweak the percentage number to better fit your desired gap width.
.withgap {
width: 49%;
margin-right:1%;
}
<div class="row">
<div class="col-md-6 well withgap">
Left Box
</div>
<div class="col-md-6 well">
Right
</div>
</div>
I have the code below in Bootstrap 3. It all works perfectly except if you are on the tablet the logo drops down and doesn't stay top left. It works great on phone and works great on desktop.... What am I missing?
http://www.bootply.com/K3G0VtD0OS
<!-- always Stay top right and maintain the same size-->
<div class="col-xs-6 col-sm-2 pull-right">
<div class="row">
<div class="pull-right"> sharing icons </div>
<div class=""> account login </div>
</div>
<!-- LOGO Always stay top left no matter what size-->
<div class="col-xs-2 col-sm-12 col-md-2 logo pull-left"> logo image </div>
<!-- Always stay to the right of logo but at tablet, drop below the 1st and second column -->
<div class="col-xs-12 col-md-8 pull-left">
<div class="row">
<div class="col-xs-12 col-md-1"> </div>
<div class="col-xs-12 col-md-11"> Search bar goes here </div>
</div>
I believe that this is occurring because you only allow 2 bootstrap columns for BOTH "sharing icons" and "account login". So when you get to tablet size, 2 columns is not enough room and it wraps the "account login" (it does not wrap "sharing icons" because that element has the pull-right class on it).
You can fix this by reducing the unnecessary 8 columns for the search bar to 7 when in col-sm (tablet size), so that the wrapper for "sharing icons" and "account login" can have 3 columns instead of 2, while allowing it to still be 8 in col-md and higher.
Updated bootply
Change One:
<div class="col-xs-6 col-sm-3 col-md-2 pull-right"> <!-- Change col-sm-2 to col-sm-3 and add col-md-2 -->
<div class="row">
<div class="pull-right"> sharing icons </div>
<div class=""> account login </div>
</div>
</div>
Change Two:
<div class="col-xs-12 col-sm-7 col-md-8 pull-left"> <!-- Add col-sm-7 -->
<div class="row">
<div class="col-xs-12 col-md-1"> </div>
<div class="col-xs-12 col-md-11"> Search bar goes here </div>
</div>
</div>
Problem:
Trying to create a layout using Bootstrap 3 that consist of two columns on the left of the page and one main column to the right of the two columns. The two columns on the left should be on top of each other.
Code:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="widget">
<div class="widget-header">
<h3>Left column 1</h3>
</div>
<div class="widget-content" id="gallery"></div>
</div>
</div>
<div class="col-md-4">
<div class="widget">
<div class="widget-header">
<h3>Left column 2</h3>
</div>
<div class="widget-content" id="gallery"></div>
</div>
</div>
<div class="col-md-8">
<div class="widget">
<div class="widget-header">
<h3>Main column</h3>
</div>
<div class="widget-content">
<div id="map_canvas" style="height: 280px;"></div>
</div>
</div>
</div>
</div>
</div>
Output:
Current code produce two columns next to each other on top the main column.
Desired output:
You should use a div with class .col-sm-4 and .col-sm-8 respectively as the parent div for the two column layout you want to use and then create the desired widgets within those divs.
Check out my JSFiddle: http://jsfiddle.net/nJtX9/9/
Please make sure to enlarge the results window to see the correct layout. Otherwise it will stack the div containers for responsive purposes.
You are using 2 col-md-4 meaning is taking 8 columns already + using col-md-8 = 16 columns, bear in mind bootstrap can contain 12 columns per row,
so the way to go around this is use col-md-2 instead of col-md-4
Hope i make this clear.
<div class="container">
<div class="row">
<div class="col-sm-6" style="background-color:gray">
<div class="row" style="background-color:aliceblue">
<h1>col1----row1</h1>
</div>
<div class="row">
<h1>col1----row2</h1>
</div>
</div>
<div class="col-sm-6" style="background-color: aqua">
<h1>col2-----row<br />col2---row<br />col2---row</h1>
</div>
</div>
</div>