Bootstrap 3 shopping cart contains product tree in left side and product images in right side:
<body>
<div class="container">
<section class="row">
<!-- Left column: product tree -->
<div class="col-lg-3 col-md-4 col-sm-5">
<div id="LeftPane" class="site-leftpane custom-collapse">
<button class="collapse-toggle visible-xs" type="button" data-toggle="collapse" data-parent="custom-collapse" data-target="#side-menu-collapse">
<span class="">Tootepuu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class='tree list-group collapse' id="side-menu-collapse">
<li>
Product tree item 1
</li>
<li>
Product tree item 2
</li>
...
</div>
</div>
</div>
<!-- right column: product images -->
<div class="col-lg-9 col-md-8 col-sm-7">
<div class="site-maincolumn">
...
If printed from Chrome in landscape mode, there are only two product image columns and empty space appears in left side.
How to remove empty space in left so that product images appear in this area ?
If printed using portrait orientation everything is OK: four product image columns appear and there is no empty space.
Update
according to pbenard comment I added hidden-print class to left column
<div class="col-lg-3 col-md-4 col-sm-5 hidden-print">
This only makes two image columns centered.
How to print more image columns in landscape mode ?
You can create a special class to make the column wider during the printing.
For example: http://glebkema.ru/tasks/so-38413455.html
#media print {
.col-print-12 {
width: 100% !important;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-5 hidden-print">
<img src="//placehold.it/450x450/c69/f9c/?text=Left" width="100%" alt="">
</div>
<div class="col-lg-9 col-md-8 col-sm-7 col-print-12">
<img src="//placehold.it/900x300/69c/9cf/?text=Right" width="100%" alt="">
</div>
</div>
</div>
Related
I have a col-4 | col-8 layout in Bootstrap 4 Beta 3.
The first col contains a pic, the second col should contain a pic and text aside.
At the moment I have divided the second col into another row with two cols.
I need to have these to cols stick together (e.g. class=no-gutters). But the image inside gets larger than the one in the first col as soon as I remove the gutters. I cannot remove all gutters on all three cols, as there should be a margin remaining between main col 1 and 2.
Codepen:
https://codepen.io/SchweizerSchoggi/pen/mpjgLP
<div class="container mt-3">
<div class="row">
<!-- Teaser 1 -->
<div class="col-12 col-md-4" id="teaser_Umzug">
<div class="teaser-img teaser-stick">
<img src="https://placeimg.com/640/480/tech" alt="Bild XY Company Umzug" class="img-fluid z-1 mr-1" />
<div class="teaser-overlay pt-2 pl-4 z-2">
<div class="teaser-txt">
<h2 class="mb-3"></h2>
<p class="mb-4">
<span class="bold clearfix">Settelen –</span> ist Ihr Partner<br/>für regionalen und nationalen Umzug.
</p>
<button type="button" class="teaser">Mehr erfahren</button>
</div>
</div>
</div>
</div>
<!-- Teaser 2 -->
<div class="col-12 col-md-8" id="teaser_AutoService">
<div class="row">
<!-- Teaser 2 Img -->
<div class="col-12 col-md-6 bg-box-light">
<div class="ml-0 mr-0"><img src="https://placeimg.com/640/480/tech" alt="Bild XY Company Auto und Service" class="img-fluid" /></div>
</div>
<!-- Teaser 2 Text -->
<div class="col-12 col-md-6 bg-box-light">
<div class="teaser-txt pt-4 pl-4">
<p class="mb-4">
<span class="bold clearfix">XY Company –</span> Ihr starker Partner in Sachen Auto und Service.
</p>
<button type="button" class="teaser">Services</button>
</div>
</div>
</div>
</div>
</div>
Well, here's a solution I came up with...
Add the pl-md-0 class to the column for the teaser 2 image. (that removes the left padding for medium screens)
Then put the contents of the first column (that includes the teaser 1 image) into a new row-column pair.
Then add the pl-md-0 class to the inner column for the teaser 1 image.
I believe this is the effect you were going for. (I didn't touch the right paddings because I thought it wasn't necessary but you certainly could remove both the left and right paddings with the px-md-0 class.)
Here's the code:
.bg-box-light {
background-color: #eee; /* TBD ! */
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div class="container mt-3">
<div class="row">
<!-- Teaser 1 -->
<div class="col-12 col-md-4" id="teaser_Umzug">
<div class="row">
<div class="col pl-md-0">
<div class="teaser-img teaser-stick">
<img src="https://placeimg.com/640/480/tech" alt="Bild XY Company Umzug" class="img-fluid z-1 mr-1" />
<div class="teaser-overlay pt-2 pl-4 z-2">
<div class="teaser-txt">
<h2 class="mb-3"></h2>
<p class="mb-4">
<span class="bold clearfix">Settelen –</span> ist Ihr Partner<br/>für regionalen und nationalen Umzug.
</p>
<button type="button" class="teaser">Mehr erfahren</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Teaser 2 -->
<div class="col-12 col-md-8" id="teaser_AutoService">
<div class="row">
<!-- Teaser 2 Img -->
<div class="col-12 col-md-6 pl-md-0 bg-box-light">
<div class="ml-0 mr-0"><img src="https://placeimg.com/640/480/tech" alt="Bild XY Company Auto und Service" class="img-fluid" /></div>
</div>
<!-- Teaser 2 Text -->
<div class="col-12 col-md-6 bg-box-light">
<div class="teaser-txt pt-4 pl-4">
<p class="mb-4">
<span class="bold clearfix">XY Company –</span> Ihr starker Partner in Sachen Auto und Service.
</p>
<button type="button" class="teaser">Services</button>
</div>
</div>
</div>
</div>
</div>
</div>
Here is my header setup (bootstrap 4):
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="navbar-brand"><img src="..."></div>
</div>
<div class="col-md-6 text-right">
<div class="header-btn-grp">
<div class="header-call-us">Get a Quote, Call Today!</div>
<a role="button" class="btn btn-danger btn-lg header-btn" href="tel:123">Ph : <strong>...</strong></a>
<div class="header-address">XXX</div>
</div>
</div>
</div>
As expected on desktop the logo sits on the left and the button sits on the right.
When on smaller devices I would like the logo and button to align in the center.
I have tried to add a .text-md-center class to both columns but this caused both elements to center in there columns at all widths (desktop and mobile).
What is the correct way to do this?
An alternate to #cwanjt answer is using the text-center. You just then need to use text-md-left and text-md-right to keep the desired alignment on larger widths.
<div class="container">
<div class="row">
<div class="col-md-6 text-md-left text-center">
<div class="navbar-brand"><img src="//placehold.it/140x30"></div>
</div>
<div class="col-md-6 text-md-right text-center">
<div class="header-btn-grp">
<div class="header-call-us">Get a Quote, Call Today!</div>
<a role="button" class="btn btn-danger btn-lg header-btn" href="tel:123">Ph : <strong>...</strong></a>
<div class="header-address">XXX</div>
</div>
</div>
</div>
</div>
https://www.codeply.com/go/Ijl31XHfRT
#TimothyAURA, if I'm understanding you question correctly, it's how to center the content of your header on smaller screens. If that's the case, you can look at the code in this codeply project to get an idea of how to do that. It seems like you have some familiarity with Bootstrap, but here's a reference to Bootstraps utilities for justifying content.
It uses a justify-content-center class for device sized medium and below, and a justify-content-lg-between on larger displays.
<header class="d-flex justify-content-center justify-content-lg-between">
<a class="navbar-brand" href="#">
<img src="http://via.placeholder.com/65x65" alt="">
</a>
<div class="header-btn-grp">
<div class="header-call-us">Get a Quote, Call Today!</div>
<a role="button" class="btn btn-danger btn-lg header-btn" href="tel:123">Ph : <strong>...</strong></a>
<div class="header-address">XXX</div>
</div>
</header>
I have a grid of images. Within this grid I have albums. The albums are displayed as a single image (images-album-cover) until they are expanded, after which the entire album is displayed among the rest of the images (images-album-images).
Both images-album-cover and images-album-image have the class images-image-col. images-image-col is also the class of the rest of the non-album images.
I've added a border (with a div, not an actual border) to the bottom of each album image to indicate which images are part of an album.
I need to be able to do a few things:
select each images-album-cover OR images-album-image that is on the left side of the grid.
select each images-album-cover OR images-album-image that is on the right side of the grid.
select each images-album-image that is the last image in an album.
So far I have been able to select the left images and right images when the grid has only non-album images, but I'm at a loss of how to handle this with the albums which is when I actually need it. Not only am I unable to select the nth-child only when it matches a certain class, but when the grid has any albums in it at all nth-child stops working as it was with no albums even though I'm trying to target all images (images-image-col)
Heres a fiddle of it working (on large screens) without albums.
As soon as I started with the albums, I haven't even been able to select just the first images-album-cover, which i tried with this:
&:nth-child(2n+1) {
.images-album-cover {
outline: 1px dashed mediumvioletred;
}
}
and that doesn't seem to do anything
here is the HTML for the album
<div class="col-xs-6 col-sm-4 images-image-col images-album-cover open">
<a class="thumbnail image images-image-thumbnail">
<img>
<div class="album-label">
<figcaption>asdfasf <span>(5)</span></figcaption>
</div>
</a>
<div class="images-album-cover-bar"></div>
</div>
<span id="gallery-detail-22">
<div class="col-xs-6 col-sm-4 images-image-col images-album-image">
<a class="thumbnail image images-image-thumbnail">
<img>
</a>
<div class="images-album-image-bar"></div>
</div>
<div class="col-xs-6 col-sm-4 images-image-col images-album-image">
<a class="thumbnail image images-image-thumbnail">
<img>
</a>
<div class="images-album-image-bar"></div>
</div>
<div class="col-xs-6 col-sm-4 images-image-col images-album-image">
<a class="thumbnail image images-image-thumbnail">
<img>
</a>
<div class="images-album-image-bar"></div>
</div>
<div class="col-xs-6 col-sm-4 images-image-col images-album-image">
<a class="thumbnail image images-image-thumbnail">
<img>
</a>
<div class="images-album-image-bar"></div>
</div>
<div class="col-xs-6 col-sm-4 images-image-col images-album-image">
<a class="thumbnail image images-image-thumbnail">
<img>
</a>
<div class="images-album-image-bar"></div>
</div>
</span>
I'm open to a JS solution if you guys think that would be better but in any case i'd still like to know if this is possible.
Try this:
:nth-child(2n+1).images-album-cover {
outline: 1px dashed mediumvioletred;
}
Have you tried to use something like:
&:nth-child(2n+1) {
&.images-album-cover {
outline: 1px dashed mediumvioletred;
}
}
BTW, per your code seems that you're using SASS, I'm answering taking that for granted.
The problem is the wrapper
<span id="gallery-detail-22"></span>
which is messing up the nth-child numbering. I suggest you take that out. If you need to identify which album images are associated with an album cover so that you can show/hide them, perhaps add a data attribute to each one, such as
data-album="gallery-detail-22"
so your album html would be
<div class="col-xs-6 col-sm-4 images-image-col images-album-cover open">
<a class="thumbnail image images-image-thumbnail">
<img>
<div class="album-label">
<figcaption>asdfasf <span>(5)</span></figcaption>
</div>
</a>
<div class="images-album-cover-bar"></div>
</div>
<div data-album="gallery-detail-22" class="col-xs-6 col-sm-4 images-image-col images-album-image">
<a class="thumbnail image images-image-thumbnail">
<img>
</a>
<div class="images-album-image-bar"></div>
</div>
<div data-album="gallery-detail-22" class="col-xs-6 col-sm-4 images-image-col images-album-image">
<a class="thumbnail image images-image-thumbnail">
<img>
</a>
<div class="images-album-image-bar"></div>
</div>
<div data-album="gallery-detail-22" class="col-xs-6 col-sm-4 images-image-col images-album-image">
<a class="thumbnail image images-image-thumbnail">
<img>
</a>
<div class="images-album-image-bar"></div>
</div>
<div data-album="gallery-detail-22" class="col-xs-6 col-sm-4 images-image-col images-album-image">
<a class="thumbnail image images-image-thumbnail">
<img>
</a>
<div class="images-album-image-bar"></div>
</div>
<div data-album="gallery-detail-22" class="col-xs-6 col-sm-4 images-image-col images-album-image">
<a class="thumbnail image images-image-thumbnail">
<img>
</a>
<div class="images-album-image-bar"></div>
</div>
All divs with the class images-image-col would be siblings of each other, so .images-image-col:nth-child(2n+1) will work.
I must be missing something really simple here:
<div class="row">
<div class="col-lg-12">
<a href="/add" class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add User
</a>
</div>
</div>
<div class="row">
<div class="col-lg-12" ng-show="users.busy">
<div class="spinner-loader center-block"></div>
</div>
</div>
I've used the bootstrap classes, including center-block. Yet it always looks like this:
Why isn't the spinner icon in the centre of the page?
There is a work around to your problem by changing some HTML as follows
<div class="row">
<div class="col-lg-12 text-center" ng-show="users.busy">
<span class="spinner-loader">Loading</span>
</div>
</div>
instead of <div> for spinner I took a <span> which will be centered horizontally because of text-center class to parent <div>.
You can try this:
<div class="row">
<div class="col-lg-12">
<a href="/add" class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add User
</a>
</div>
</div>
<center>
<div class="row">
<div class="col-lg-12" ng-show="users.busy">
<div class="spinner-loader"></div>
</div>
</div>
</center>
Instead of using center-block, add text-center class
I ve been using the bootstrap col-md-offset css to center my divs. For example:
<div class=container>
<div class=row>
<div class=form-horizontal>
<div class="col-md-offset-4 col-md-4">
<div class="your div">
</div>
</div>
</div>
</div>
Your div will be responsive, thus as you resize the window the div will remain in the center of the window.
I'm using Twitter Bootstrap (latest version - 2.3.2) for a site I'm building, and want to achieve the following while keeping the site responsive, and also applying best practices for it.
Here's a very rough sketch of what I want to have:
The site has a basic header with fixed navbar, a content-fluid div which has three inner divs: a span5, span6, and span1 (for a total of 12 columns). After the content div, a sticky footer with company/copyright info and such.
The problem I'm having is with the span1 column. It is basically decorative (it has 4 vertical color bars, sized at 25% width each), but I'd like to have:
Social link icons vertically-centered in the column (Twitter, Facebook, LinkedIn, etc), as shown by the black boxes.
Text rotated 90 degrees counter-clockwise inside each colored bar. It's only one word each, and is not a priority.
Each bar stretching to fill the full height of the parent container (in this case, the content div), since the height of the page is currently set by the highest div, whether it's span5 or span6.
I know there are probably lots of ways to achieve this (pure CSS, javascript, background-image tiling), but I'm looking for the best practices: avoiding extra markup, using right techniques, in order to learn as much as possible. I've tried setting the parent container (and inner bars) to height: 100%; and playing with min-height as well, but min-height doesn't (seem to) work with percentages.
Any help and/or constructive criticism is very welcome.
Edit: JSFiddle and full code added: JSFiddle
Also, link to the original site (in case JSFiddle screws something up): Original page
<!-- Part 1: Wrap all page content here -->
<div id="wrap">
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="brand" href="#">Geología y Telecomunicaciones, C.A.</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>Inicio
</li>
<li>Acerca de
</li>
<li class="active">Contacto
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<div>
<div class="decorative-lightblue"></div>
<div class="decorative-purple"></div>
<div class="decorative-orange"></div>
<div class="decorative-lightorange"></div>
</div>
</div>
<!-- Begin page content -->
<div class="container-fluid">
<div class="row-fluid content clearfix" style="margin-top: 60px;">
<div class="span5">
<div class="row-fluid">
<div class="span5">
<div class="span12 logo"></div>
<div class="sidebar-intro">Construcción, Adaptación,
<br/>Adecuación y Remodelación
<br/>de <span class="emphasis-red">
locales<br>comerciales<br>empresariales
</span>
</div>
</div>
<div class="span7">
<!-- Responsive iFrame -->
<div class="Flexible-container">
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/?ie=UTF8&ll=8.561755,-71.204721&spn=0.004716,0.006571&t=m&z=18&output=embed"></iframe>
<br /><small>Ver mapa más grande</small>
</div>
</div>
</div>
<div class="row-fluid">
<div class="contact-wrapper well">
<form>
<div class="control-group">
<label class="control-label" for="inputName"><i class="icon-user"></i> Nombre</label>
<div class="controls controls-row">
<input type="text" class="span12 input-xlarge " id="inputName" placeholder="Su nombre completo">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail"><i class="icon-envelope"></i> Correo electrónico</label>
<div class="controls">
<input type="text" class="span12 input-xlarge" id="inputEmail" placeholder="nombre#sudominio.com">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail"><i class="icon-question-sign"></i> Asunto</label>
<div class="controls">
<input type="text" class="span12 input-xlarge" id="inputSubject" placeholder="Asunto de su mensaje">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail"><i class="icon-pencil"></i> Mensaje</label>
<div class="controls">
<textarea rows="6" class="span12 input-xlarge" placeholder="Haganos llegar sus comentarios, sugerencias, consultas, etc."></textarea>
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn btn-success">Enviar Mensaje</button>
</div>
<br class="clear">
</div>
</form>
</div>
</div>
</div>
<div class="span6">
<div class="row-fluid span12">
<img class="span9 offset2" src="http://geotelca.com/sitio/assets/img/examples/flyer_back.png">
</div>
<div class="row-fluid">
<div class="row-fluid span12 address"> <address>
Zona Industrial Los Curos, Calle 1, Edif. Geotelca No. A-8, Mérida, Edo. Mérida
</address>
</div>
<div class="row-fluid e-mail">
<div class="span4 offset6"> direccion#geotelca.com
</div>
</div>
</div>
</div>
<div class="span1 social-links">
<div class="row-fluid vertical-bars">
<div class="span3 bar bar-lightblue"></div>
<div class="span3 bar bar-purple"></div>
<div class="span3 bar bar-orange"></div>
<div class="span3 bar bar-lightorange"></div>
</div>
</div>
</div>
</div>
<!--/.container-fluid-->
<div id="push"></div>
</div>
<!--/#wrap-->
<div id="footer">
<div>
<div class="decorative-lightblue"></div>
<div class="decorative-purple"></div>
<div class="decorative-orange"></div>
<div class="decorative-lightorange"></div>
</div>
<div class="container">
<p class="muted credit">Diseñado, codificado y mantenido por #kenshin23
</p>
</div>
</div>
I would say your best bet here would be one of the jQuery plug-in out there to accomplish this ... eqHeight.coffee seems to be pretty well documented:
https://github.com/jsliang/eqHeight.coffee/
As for centering those social links in that vertical space, you'd likely have to use more Javascript to do that. Although, honestly I'd probably put them in a div container with position: fixed; and let them slide up and down that column as the user scrolls.
EDIT:
Just noticed you added your HTML file ... in the case of the first plug-in I linked to, you would need to add a class (perhaps 'eq-height') to each of the columns whose heights you wanted to match (that first outer span5 and span6 and then all the bar column divs individually). Then on jQuery document ready, use:
$(document).ready(function() {
$(".content").eqHeight(".eq-height");
});