I currently have a VIEW button to the right of this layout but want to add another ADD button to the right.
You can see an example of this on https://www.fireworkscrazy.co.uk/store_v8/shopdisplayproducts.asp?id=5&cat=Barrages+%2F+Cakes+-+Single and then select the GRID VIEW icon
<div class="desktop_view product-view grid-list-row-view hide" style="">
<div class="col-lg-3 col-md-4 col-sm-4 col-xs-6">
<div class="featured-prod-widget">
<div class="nailthumb">
[formatimage sub]
[CC_ADD_NEW_FLAG]
</div>
<div class="row product-details">
<div class="col-sm-12">
<h6 class="widget-product-title">[translate cname]</h6>
</div>
<div class="row"></div>
<div class="col-sm-12">
$ <span class="widget-prod-price">[FORMATCUSTOMERPRICE cprice]</span>
</div>
<div class="col-sm-12">
</div>
</div>
**<a href="[formatshopexdlink][add_websesslink]" class="submitbtn pull-left">
VIEW
</a>**
</div>
</div>
</div>
the style .grid-list-row-view .featured-prod-widget .submitbtn affecting your button. it has absolute position. so with same style if you create button with pull-left or pull-right , it will display on same position instead of left or right. you will need to implement some workaround to overcome or remove absolute style.
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'm using Bootstrap to build a Dashboard, but I'm rather new to Bootstrap and I'm having issues getting the final grid layout in the image below. The problem is that when I add the 4th column (Table), which will vertically house more data than the other 3 columns on the left (Widgets), is pushing down the bottom row content (Chart) like in this image. It looks easy, and I guess it has something to do with the 'colspan' or 'rowspan' features, but I can't figure it out.
Why is my chart getting pushed down like this, and how can I fix it?
You have to nest to achieve that.
For example:
<div class="container"
<div class="row">
<div class="col-md-9 not-right-table-content">
<!--nest content here, it's like a new grid-->
<div class="row">
<div class="col-md-4">
widget 1
</div>
<div class="col-md-4">
widget 2
</div>
<div class="col-md-4">
widget 3
</div>
<div class="col-md-12">
chart
</div>
<div class="col-md-12">
other content
</div>
</div>
</div>
<div class="col-md-3">
right table html here
</div>
</div>
</div>
#Nuno - Use below "HTML Code Snippet" or see my JS Fiddle (you might need to scroll boundaries to extend Result pane.)
<div class="container">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-9 not-right-table-content">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">widget 1</div>
<div class="col-lg-4 col-md-4 col-sm-4">widget 2</div>
<div class="col-lg-4 col-md-4 col-sm-4">widget 3</div>
<div class="col-lg-12 col-md-12 col-sm-12">chart</div>
<div class="col-lg-12 col-md-12 col-sm-12">other content</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">right table html here</div>
</div>
You can use below resources to know more about bootstrap:
Bootstrap - Approach to better, faster, stronger web development
Blasting off with Bootstrap
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
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>
I'm trying to bulid grids like the photo below
IMG LINK: http://postimg.org/image/qo3b4nof1/
But i'm getting the DIV E in almost next to the D-DIV
here's my code
<div class="container">
<div class="row">
<div class="col-md-1">
<div class="col-md-1">A</div><br/>
<div class="col-md-1">B</div><br/>
<div class="col-md-1">C</div>
</div>
<div class="col-md-11">D<br/>
<div class="col-md-1">E</div>
</div>
</div>
</div>
The break-lines i added because DIV-A and DIV-B become one piece without breaklines.
is it better to do it with table ?
You do not need to use container and row with bootstrap 3.*
I changed you code to match the provided screenshot, see this http://jsfiddle.net/Sd2zw/ .
I just use xs columns because the small screen of jsfiddle, you can replace it back by md :
<div>
<div class="col-xs-1">
<div class="col-xs-12">A</div>
<div class="col-xs-12">B</div>
<div class="col-xs-12">C</div>
<span class="clearfix"></span>
</div>
<div class="col-xs-11">
<div class="col-xs-12 d-container">D</div>
<div class="col-xs-12">
<div class="col-xs-1">E</div>
<span class="clearfix"></span>
</div>
</div>
<span class="clearfix"></span>
</div>
Also, use some clearfix tags to clear the float.