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>
Related
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.
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!
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>
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%
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>