Bootstrap- Change grids based on orientation - html

I wish to create a page which would display in two columns in landscape mode but switch to one column in portrait mode. Below is what I wish for:
Landscape:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6">image goes here</div>
<div class="col-xs-6">text goes here</div>
</div>
</div>
</body>
Portrait:
<body>
<div class="container-fluid">
<div class="row">
image goes here
</div>
<div class="row">
text goes here
</div>
</div>
</body>
How can I achieve this using Bootstrap?

If the bootstrap columns not works, you can use media
#media screen and (orientation:portrait) { … } // Define width 100%
#media screen and (orientation:landscape) { … } // Define width 50%

Related

Keep row of images at same height

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>

Changing order of columns on different screens

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.

How do i create custom grid class in Bootstrap for lg as well as xs screen size?

Here's the link to the page, check the columns.
I have been working on CSS for a while and have felt dire need of custom size bootstrap columns. Please consider this situation, I have a two column design for the body of my website.
<body style="background-color : grey" style="padding-right : 2% ; padding-left : 2%">
<div class="row">
<div id="col1" class="col-lg-9 style="background-color : white">
<p> Some content here</p>
</div>
<div id="col2" class="col-lg-1" style="background-color : grey"></div>
<div id="col3" class="col-lg-2" style="background-color : white">
<p>Some content here for the right column</p>
</div>
</div>
</body>
Although, I want some space between the left major column and the right major column which is done by col2, the space is too much. If i style col2 with custom width the right column shifts along breaking the standard margin from right of 2% which is clearly visible because of my footer. Therefore i need to change the widths of both col2 as well as col3.
I intend to use custom column class for lg screen size so that design stays intact on the mobile screen as well.
How do i create one? A short example would be appreciated
Thank you
How to make a space between two Bootstrap columns (on the large screen only)
Remain only two columns.
Increase the margin-left of the right column.
Decrease the width of the right column by the same value.
Use #media (min-width: 1200px).
Please check the result:
/* heart of the matter */
#media (min-width: 1200px) {
#col2 {
margin-left: 4%;
width: 21%; /* = 25% (width of .col-lg-3) - 4% (margin-left) */
}
}
/* decorations */
* {
font-size: 1.2em;
font-weight: bold;
}
#col1, #col2, #header, #footer {
margin-top: 15px;
min-height: 100px;
}
#col1, #col2 { background-color: #ccc; }
#header, #footer { background-color: #999; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div id="header" class="col-lg-12"> Header </div>
</div>
<div class="row">
<div id="col1" class="col-lg-9"> Main content </div>
<div id="col2" class="col-lg-3"> Right column </div>
</div>
<div class="row">
<div id="footer" class="col-lg-12"> Footer </div>
</div>
</div>
I think what you're asking is simply you want to display two columns on your body which your body design is basically contains.
Other than using customized css i think bootstrap has the in-build classes to show this in view.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<body style="background-color : grey" style="padding-right : 2% ; padding-left : 2%">
<div class="row">
<div id="col1" class="col-lg-9 style="background-color : white">
<p> Some content here</p>
</div>
<div id="col2" class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background-color : #e8e8e8">
<p>
Some content goes here </p>
</div>
<div id="col3" class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background-color : white">
<p>Some content here for the right column</p>
</div>
</div>
</body>
Just checkout the snippet here. ids which named col2,col3 are according to your requirements. I have changed the bg.color for an instance.
And, do some customization using css for the margin, padding and other style stuffs.
And, have a look on these bootstrap grid systems and read them. They'll get the idea how to do these.
http://getbootstrap.com/css/#grid
And also you can make your web apps responsive using media queries.
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Hope answered your question. Happy coding!

Bootstrap - Second Column Top Padding?

I have a page with two columns. All works great and responsive however, i noticed when i resize to mobile view, the second columns stacks underneath (great!) however the content is right below the content of the first column so looks terrible.
Is there a way to create this spacing? Tried targeting with classes and ID's and playing with margins and paddings but nothing seems to make a difference.
<div class="container">
<div class="row">
<div class="col-sm-5">
<h1>Title</h1>
<p>Little bit of content</p>
</div>
<div class="col-sm-6 col-sm-offset-1">
<h1>Title</h1>
<p>Little bit of content</p>
</div>
</div>
</div>
Is there a way to create this spacing?
Yes there is. It could be achieved by using #media queries to apply some styles to the 2nd, 3rd, ... columns on specific break points. For instance:
/* Extra small devices (phones, less than 768px) */
#media (max-width: 767px) {
[class*="col-"] + [class*="col-"] {
padding-top: 1em; /* for instance */
}
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-5">
<h1>Title</h1>
<p>Little bit of content</p>
</div>
<div class="col-sm-6 col-sm-offset-1">
<h1>Title</h1>
<p>Little bit of content</p>
</div>
</div>
</div>

Bootstrap 3 Column Reordering On Mobile

I would like to know how easilly achieve this layout with Bootstrap 3.
You can achieve that layout using bootstrap 3 pretty easy, you just have to arrange your columns in a proper order. The orange~red block I believe its a sidebar, and the other two blocks have the same width (seems bound to the same container), and I think there you have your content.
So, put the sidebar block, in a container with the desired width from the bootstrap grid, like col-md-4, and the content block in a container say col-md-8; add to both these containers col-xs-12 class(will add 100% width on 768px and bellow), we'll need it because we're gonna use pull-left/right(float rule) class to swap them around.
Check out the demo and bellow the markup/css used
The markup:
<div class="container">
<div class='row cf'>
<div class='col-sm-4 col-xs-12 pull-right'>
<div class='orange'>One good lookin sidebar</div>
</div>
<div class='col-sm-8 col-xs-12 pull-left'>
<div class='content-entry orchid'>
Some content here
</div>
<div class='content-entry cyan'>
And some other content here
</div>
</div>
</div>
</div>
And the css:
.orange{
background: orange;
}
.orchid{
background: orchid;
}
.cyan{
background: cyan;
}
**Note: if you want that sidebar to expand it's height to the height of the other 2 blocks combined, that's a different story, but this should get you started.
UPDATE 2
OK since you have a layout a bit tricky on mobile, I guess your safest bet would be to make the sidebar absolute positioned, and on mobile(bellow and 767px), switch it to static position, to make em fall into a natural flow. There are some more other methods out there like flexbox, or maybe some fancy table tricks, but this one should get you going.
Check out the demo, and the changed markup/css bellow:
<div class="container">
<div class='row content-wrapper'>
<div class='col-sm-8 col-xs-12'>
<div class='content-entry orchid'>
Some content here
</div>
</div>
<div class='col-sm-4 col-xs-12 sidebar-wrapper'>
<div class='orange'>One good lookin sidebar</div>
</div>
<div class='col-sm-8 col-xs-12'>
<div class='content-entry cyan'>
And some other content here
</div>
</div>
</div>
</div>
.orange{
background: orange;
}
.orchid{
background: orchid;
}
.cyan{
background: cyan;
}
/*added rules*/
.content-wrapper{
position: relative;
}
.sidebar-wrapper{
position: absolute;
top: 0; right: 0;
}
#media all and (max-width: 767px){
.sidebar-wrapper{
position: static;
}
}
Have a look here, I think the .col-md-8 and .col-md-4 classes will be interesting for you.
Since stack Overflow will not do any project i posted you simple and easy step
Bootstrap use media-queries
example
#media screen and (max-width: 500px) {
div {
width: 80%
}
}
this above query works if screen is bellow 500px div width will be 80%
try this example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgreen;
}
#media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<p>Resize the browserwindow. When the width of this document is less than 300 pixels, the background-color is "lightblue", otherwise it is "lightgreen".</p>
</body>
</html>
Above example will show when screen size is bellow 600px page color will change from lightgreen to lightblue
<body class="container">
<div class="row">
<div class="col-sm-6 col-xs-12">orange</div>
<div class="col-sm-6 col-xs-12">
<div class="row">violet row</div>
<div class="row">light blue</div>
</div>
</div>
</body>
I used xs-12 for the mobile. Please post your example code next time.
Thank you for all your answers.
Here's what i've made with the help of all answers :
<div class="container">
<div class="row">
<div class="col-sm-8 bg-info">
<h4>Content 1</h4>
</div>
<div class="col-sm-4 bg-warning pull-right">
<h4>Sidebar</h4>
</div>
<div class="col-sm-8 bg-success pull-left">
<h4>Content 2</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-8" style="background-color:purple; color:#fff">Contents box 1</div>
<div class="col-xs-12 col-md-4" style="background-color:red; color:#fff">Sidebar</div>
<div class="col-xs-12 col-md-8" style="background-color:blue; color:#fff">Contents box 2</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-12 col-md-8" style="background-color:purple; color:#fff">Contents box 1</div>
<div class="col-xs-12 col-md-4" style="background-color:red; color:#fff">Sidebar</div>
<div class="col-xs-12 col-md-8" style="background-color:blue; color:#fff">Contents box 2</div>
</div>