basically what I'm trying to achieve using bootstrap is something like this
(https://ibb.co/mBB9P6P). When it's resized to smaller screens it should like
(https://ibb.co/0XnDy2S). Of course with the code I'm using, what happens is that second image goes behind second paragraph
My idea was using Bootstrap's order-first and order-last classes to achieve this and while it works for mobile, on desktop both pictures are on left. What I thought would work was removing a class from a div on different media query but I'm not sure if that's even an option.
<div class="row">
<div class="col-md-3">
<img src="img1.png">
</div>
<div class="col-md-9">
<p>Text</p>
</div>
</div>
<div class="row">
<div class="col-md-9">
<p>Text</p>
</div>
<div class="col-md-3">
<img src="img1.png">
</div>
</div>
Bootstrap divides the screen up into 12 column grid. If you choose md-3 then you will get four cols max going across. You can specify multiple column formats all in the class attribute. https://getbootstrap.com/docs/4.0/layout/grid/ Hope this helps.
If you're using Bootstrap 4, then you can take advantage of its flex based layout and use the order property. Here is an example:
#media (max-width: 768px) {
.col-md-9 {
order: 2;
}
.col-md-3 {
order: 1;
}
}
img {
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row">
<div class="col-md-3">
<img src="https://placehold.it/250x150">
</div>
<div class="col-md-9">
<p>Text</p>
</div>
</div>
<div class="row">
<div class="col-md-9">
<p>Text</p>
</div>
<div class="col-md-3">
<img src="https://placehold.it/250x150">
</div>
</div>
Here is a fiddle to play with: https://jsfiddle.net/2mwxeor5/1/
Drop Bootstrap (it will cause more issues anyway) and use flexbox. The order property will help you.
Related
I am looking for a technique to handle responsivity in html pages that have column-like structures with multiple items.
Here is an example:
Codepen
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row" style="width:200;">
<div class="col-sm-6">
<div class="item">
First
<br><br>
</div>
<div class="item">
Second Second Second Second Second Second Second
<br><br>
</div>
<div class="item">
Third<br><br>
</div>
</div>
<div class="col-sm-6">
<div class="item">
First First First First First<br><br>
</div>
<div class="item">
Second<br><br>
</div>
<div class="item">
Third<br><br>
</div>
</div>
</div>
I would like it to look like this:
The height of each "item" needs to grow and shrink dynamically according to the length of its text and browser-window width, while staying aligned with the other column.
I also need that when the screen is narrow enough, the right column should move under the left column.
My problem is that for Bootstrap, I seem to need to place each column into a separate div.
On the other hand, when the columns appear side by side, if I want corresponding items to appear at the same height, I need to separate them into rows and not columns.
PS. I tried display:flex but could not find a way that works.
Any ideas?
Thanks
Arie
If you use BS3 but are willing to use flex aside, you can consider grid instead inside a mediaquerie and a custom class :
Your comment I react to:
Thanks G-Cyrillus. Is it possible to do that with Flex and Bs3? This is a large website which is built entirely with BootStrap3, and upgrading to Bs4 is currently not an option.
possible example with BS3, using a custom class inside a mediaquerie:
/*see us, demo purpose */
.row div {
box-shadow: 0 0 0 1px
}
/* custom class for the breakpoint where rows are drawn into columns with matching rows */
#media screen and (max-width: 992px) and (min-width:768px) {
:before,
:after {
grid-row: -1
}
.grid-md-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-flow: row dense;
}
.grid-md-2 [class^="col"] {
width: 100%;
grid-column: 1;
}
/*.grid-md-2 [class^="col"]:nth-child(3)~[class^="col"]*/
/* update for a repeating pattern */
.grid-md-2 [class^="col"]:nth-child(6n -2),
.grid-md-2 [class^="col"]:nth-child(6n -1),
.grid-md-2 [class^="col"]:nth-child(6n) {
grid-column: 2;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row grid-md-2">
<div class="col-sm-6 col-md-4 col-xs-12">
First
</div>
<div class="col-sm-6 col-md-4 col-xs-12">
Second
</div>
<div class="col-sm-6 col-md-4 col-xs-12">
Third
</div>
<div class="col-sm-6 col-md-4 col-xs-12">
First First First
<br><br> First First
</div>
<div class="col-sm-6 col-md-4 col-xs-12">
Second<br>Second
</div>
<div class="col-sm-6 col-md-4 col-xs-12">
Third
</div>
</div>
</div>
The Bootstrap Grid layout is already dynamic in nature, so you don't need the style attribute for row width.
For the right column to go under the left column in the mobile view, use the bootstrap grid for mobile view. So just add the mobile view grid layout class name for each column div element.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-sm-6 col-xs-12">
<div class="item">
First
<br><br>
</div>
<div class="item">
Second Second Second Second Second Second Second
<br><br>
</div>
<div class="item">
Third<br><br>
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="item">
First First First First First<br><br>
</div>
<div class="item">
Second<br><br>
</div>
<div class="item">
Third<br><br>
</div>
</div>
</div>
For more visit Visit Here.
I am working on a Bootstrap 3 grid (unfortunately, the CMS is not allowing me to use Bootstrap 4). At the moment I cannot link to the page, so maybe this question is too hard to answer.
Here is how the row containing 5 columns is looking in the CMS:
The max-width is 1200px.
The problem is that every time I add a column containing an image, the image height is not the same. In this example I set a height on 255px on all images, but the image in the first column is much taller than the others.
When I enter the code in a JSfiddle it is looking normal
See jsfiddle here
So it must be something in the CMS there is doing it? Is there some kind of clue what I could look after?
Best regards
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.padding-y {
padding: 20px;
background-color: #fff;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="section padding-y">
<div class="row">
<div class="col-sm-4">
<img src="http://placehold.it/348x255">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255">
</div>
</div>
</div>
Step 1. Let's reproduce the problem
We don't need the bootstrap-theme.min.css. This file uses for the decoration only. First of all wee need bootstrap.min.css.
The 3.0.0 version is too old. Let'use the 3.4.1. instead. It's the latest Bootstrap 3 version.
Bootstrap assumes the row is inside the container. Sometimes the CMS has its own containers, and then you can get by with them, but to reproduce the problem, we need the correct code with the container.
Looking at your screenshot, I dare to assume that something on your site adds the max-width: 100%; restriction to all images. This is a fairly common solution for different themes.
I removed the block with the section padding-y classes, because the problem was reproduced without it.
So we get an example of a code that reproduces your screenshot.
img {
max-width: 100%;
}
<div class="container">
<div class="row">
<div class="col-sm-4">
<img src="https://via.placeholder.com/348x255/69c/fff">
</div>
<div class="col-sm-2">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
<div class="col-sm-2">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
<div class="col-sm-2">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
<div class="col-sm-2">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
Step 2. What's happened
4 small images are wider than their columns. With a total content width of 1200 pixels, a column in one sixth of the width is 200 pixels. In addition, each column also has a horizontal padding of 15 pixels. There are 170 pixels left for the 233-pixel wide image.
And something adds a limit for the maximum width of images. Because of this, these images become smaller and their height becomes smaller too.
Step 3. What can be done
Since we do not know your layouts for screens of different widths, I can only fantasize.
Suppose you want to put 5 pictures of different sizes in one line on the desktop so that their heights coincide.
Variant with backgrounds
For example you can replace the images with blocks and use the images as a background. Then the height can be set in the CSS, the gaps between the pictures will be the same, but the visible part of the pictures can decrease.
.image-box {
background-repeat: no-repeat;
height: 255px;
}
#media (min-width: 768px) {
.image-box {
background-position: center;
background-size: cover;
}
}
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="image-box" style="background-image:url(https://via.placeholder.com/348x255/69c/fff)"></div>
</div>
<div class="col-sm-2">
<div class="image-box" style="background-image:url(https://via.placeholder.com/233x255/c69/fff)"></div>
</div>
<div class="col-sm-2">
<div class="image-box" style="background-image:url(https://via.placeholder.com/233x255/c69/fff)"></div>
</div>
<div class="col-sm-2">
<div class="image-box" style="background-image:url(https://via.placeholder.com/233x255/c69/fff)"></div>
</div>
<div class="col-sm-2">
<div class="image-box" style="background-image:url(https://via.placeholder.com/233x255/c69/fff)"></div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
Variant with flexbox
You can also make Bootstrap 3 columns behave like a flexbox. This solution is suitable if the sizes of the images are known in advance and you can calculate which part of the row each of them occupies.
In the comments you have wrote that you wish to stretch the images on mobile. So I use this info in the new solution.
.row-of-images img {
width: 100%;
}
#media (min-width: 768px) {
.row-of-images {
display: flex;
}
.row-of-images > div {
box-sizing: content-box;
/* images will be resized taking into account the padding of the columns */
flex: 1 1 18.203125%;
/* 18.203125% = 100% * 255px / (348px + 4 * 255px) */
}
.row-of-images > div:first-child {
flex-basis: 27.1875%;
/* 27.1875% = 100% * 348px / (348px + 4 * 255px) */
}
}
<div class="container">
<div class="row row-of-images">
<div class="col-xs-12">
<img src="https://via.placeholder.com/348x255/69c/fff">
</div>
<div class="col-xs-12">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
<div class="col-xs-12">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
<div class="col-xs-12">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
<div class="col-xs-12">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
The reason the images are different heights on the problem page "(domain) dot com slash da-dk/page/sbp" (but not in the posted source above) is because the images on the problem page have the .img-responsive class:
<div class="row">
<div class="col-sm-4">
<img src="http://placehold.it/348x255" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255" class="img-responsive">
</div>
</div>
From the Bootstrap 3.3 documentation, .img-responsive applies:
max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.
The first image is scaling to the width of the first column, which is col-sm-4. The other images are scaling to the width of a col-sm-2 column. So it's clear why the images are different height.
The simplest fix is to remove .img-responsive from all the images.
But if you want to keep the images responsive, you'll need to adjust the image aspect ratios so the wider and narrow images end up the same height.
Example with the aspect ratios adjusted:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-sm-4">
<img src="http://placehold.it/348x255" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/153x255" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/153x255" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/153x255" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/153x255" class="img-responsive">
</div>
</div>
I have 3 div in my html. div1, div2,div3. Now in mobile version I want to change the alignment of those div. Please see the below images for better understand.
HTML
<div class="row">
<div class="col-md-12">
Div1
</div>
<div class="col-md-9" style="float:right;">
Div3
</div>
<div class="col-md-3" style="float:left;">
Div2
</div>
</div>
NOTE: I am using bootstrap 3
How to do that?
Anybody help please ?
You need to use Grid: column ordering
According to the mobile-first concept you need to define default view for mobile first in the right order.
section 1
section 3
section 2
Then assign col-md-push-3 for section 3 and col-md-pull-9 for section 2 and define its width using col-md- class.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div>section 1</div>
</div>
<div class="col-xs-12 col-md-9 col-md-push-3">
<div>section 3</div>
</div>
<div class="col-xs-12 col-md-3 col-md-pull-9">
<div>section 2</div>
</div>
</div>
</div>
I answered something similar to this question before. reordering col-12 are not possible with bootstrap-3 (push/pull). You can use grid together with a media query to do this.
<div class="row reordered">
<div class="col-md-12">
Div1
</div>
<div class="col-md-3">
Div2
</div>
<div class="col-md-9">
Div3
</div>
</div>
css
#media screen and (max-width: 992px) { //col-md breakpoint
.reordered {
display: grid;
}
.reordered.col-md-3 {
order: 2;
}
.reordered.col-md-9 {
order: 1;
}
}
use col-sm-12 hopefully it will work
try this:
#media only screen and (max-width: 400px) {
.row {
display: grid !important;
grid-template-columns: auto !important;
}
}
I have some simple html at this fiddle that shows the the following in a wide desktop (simple row stuff and this is the desired behavior I want):
Here is the code that produces the above output:
<div class="container">
<div class="row">
<div class="col-md-4"><img class="img-responsive" src="http://placehold.it/800x400"></div>
<div class="col-md-8">
<h1>Random decisions for emacs, with functions and a minor mode.</h1>
<p>Random decisions for emacs, with functions and a minor mode.
Roll various types of dice, generate random numbers from
</p>
</div>
</div>
In mobile (when I reduce the width of the page), I see this:
What I want to see instead is the header ("Random decisions..") show up above the pic in mobile only (Do not want to change anything in the desktop). It seems like I am changing the order of the rows in mobile, but I would like some direction on how I could go about doing this in a clean fashion.
Flexbox can do that.
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
#media (max-width: 768px) {
.row {
display: flex;
flex-direction: column;
}
.top {
order: 2;
}
.bottom {
order: 1;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4 top">
<img class="img-responsive" src="http://placehold.it/800x400">
</div>
<div class="col-md-8 bottom">
<h1>Random decisions for emacs, with functions and a minor mode.</h1>
<p>Random decisions for emacs, with functions and a minor mode. Roll various types of dice, generate random numbers from
</p>
</div>
</div>
Or even easier (no order values required). This just reverses the order.
#media (max-width: 768px) {
.row {
display: flex;
flex-direction: column-reverse;
}
}
Codepen Demo
You can use Bootstraps Push/Pull classes. You need to reorder your content so your image is second in your stack (Bootstrap is mobile first) so when on mobile your image starts below the header then shifts to the left as you expand the viewport.
See Column Reordering
Working Example;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-8 col-md-push-4">
<h1>Random decisions for emacs, with functions and a minor mode.</h1>
<p>Random decisions for emacs, with functions and a minor mode. Roll various types of dice, generate random numbers from
</p>
</div>
<div class="col-md-4 col-md-pull-8">
<img class="img-responsive" src="http://placehold.it/800x400">
</div>
</div>
</div>
You can achieve this with bootstrap's col-**-push-* and col-**-pull-* classes. The trick is to reverse the order of the elements (like you want to see on mobile in this instance) and "push" the first element and "pull" the second by the number of columns the other element is assigned. Here, you'd place the col-md-8 div on TOP, adding a col-md-push-4 class to it, and conversely add a col-md-pull-4 to the (now) second div.
Here is what worked for me. I accepted #vanburen answer since that is what led me to this..
<div class="container">
<div class="row">
<div class="col-md-8 col-md-push-4">
<h1>Random decisions for emacs, with functions and a minor mode.</h1>
</div>
<div class="col-md-4 col-md-pull-8">
<img class="img-responsive" src="http://placehold.it/800x400">
</div>
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
<p>Random decisions for emacs, with functions and a minor mode. Roll various types of dice, generate random numbers from</p>
</div>
</div>
</div>
One of our designers has created a layout where the footer content order changes from desktop to mobile. I'm using bootstrap and would like to do it as simply as possible. I believe the following is the correct markup but it doesn't seem to work for full width columns?
HTML
<div class="container">
<div class="row">
<div class="col-sm-12 col-sm-push-12">
<div class="row">
<div class="col-md-12">
<p>Ooo content</p>
</div>
</div>
</div>
<div class="col-sm-12 col-sm-pull-12">
<div class="row">
<div class="col-md-12">
<p>Ooo more content</p>
</div>
</div>
</div>
</div>
</div>
Example: https://jsfiddle.net/rwydcepc/
The aim of the above is to switch the top column with the bottom column when the sm is applied. This doesn't seem to happen though and everything screws up?
Is there another way to do this using bootstrap or with some simple additional css, ideally I'd like to avoid duplicate content and showing / hiding or relying on Javascript.
There is a similar question here but it doesn't answer the question: Change the order of col-*-12 columns in Bootstrap 3 by using push/pull
There is already a solution using Bootstrap reordering but not for 100% width columns, the below solution uses Flexbox method.
#media (max-width: 768px) {
.reorder .row {
display: flex;
display: -ms-flex;
flex-direction: column;
}
.reorder .row .item1 {
order: 2;
}
.reorder .row .item2 {
order: 1;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container reorder">
<div class="row">
<div class="col-sm-12 item1">
<p>Ooo content</p>
</div>
<div class="col-sm-12 item2">
<p>Ooo more content</p>
</div>
</div>
</div>