I have 4 cols as follows on desktop, and I would like them to reorder in such a way that it appears as depicted below on mobile.
Do I need custom css for this?
(I Cannot post images yet, so here is the link to the image:)
https://imgur.com/a/sasLETe
I have tried keeping them in parent cols of two in each, but to no-avail.
I am a backend guy, so I am not too familiar with frontend stuff.
Current HTML:
<div class="row">
<div class="col-md-6 col-sm-12">
<div>A</div>
<div>C</div>
</div>
<div class="col-md-6 col-sm-12">
<div>B</div>
<div>D</div>
</div>
</div>
I would like it to behave as I have depicted in the image.
How do I go about doing this? I do not want to resort to JavaScript. Any help is appreciated.
Thanks.
If you play with your html structure then no need to have custom css.
Just update classes and content in your code as follows:
<div>
<div class="row">
<div class="col-md-6 col-sm-12">A</div>
<div class="col-md-6 col-sm-12">B</div>
</div>
<div class="row" >
<div class="col-md-6 col-sm-12">C</div>
<div class="col-md-6 col-sm-12">D</div>
</div>
</div>
```
You can use this code , bootstrap only
<section>
<div class="container my-5">
<div class="row">
<div class="col-md-6">A</div>
<div class="col-md-6">B</div>
</div>
<div class="row">
<div class="col-md-6">c</div>
<div class="col-md-6">d</div>
</div>
</div>
</section>
<div class="container p0">
<div class="col-md-12 p0">
<div class="col-md-6 p0">
<div class="imagen"></div>
</div>
<div class="col-md-6 p0">
<div class="text-content"></div>
</div>
</div>
</div>
I do not have a definite css yet, I still think how I can do this
How can I make the image full width inside a container, just like in the example using bootstrap, The black border is the bootstrap container
What I try to do is the content in a container and the image outside of that container,
Just set these properties--
.imagen img{
width: 100%;
max-width: 100%;
}
Here you go with jsfiddle https://jsfiddle.net/9drawa3h/1/.
<div class="container p0">
<div class="col-md-12 p0">
<div class="col-md-6 p0">
<div class="imagen"></div>
</div>
<div class="col-md-6 p0">
<div class="text-content">
<img src="http://a57.foxnews.com/images.foxnews.com/content/fox-news/tech/2013/04/13/how-to-do-free-online-background-check/_jcr_content/par/featured-media/media-1.img.jpg/876/493/1422493303787.jpg?ve=1&tl=1" />
</div>
</div>
</div>
</div>
I know you are looking for text-content in the second column, but I specified something else.
As I not sure whether you are going to use img tag ro background-image in the 1st column, so I have provided both.
1st Column with background-image and 2nd column with img tag.
i am not css developer but i am trying to lean bootstrap usage. so i was reading article from this url http://www.c-sharpcorner.com/article/overview-of-bootstrap-buttons-and-grid-offset/
i am curious to know how bootstrap offset works?
see some code example
1)
<div class="container">
<div class="row">
<div class="col-md-3col-md-offset-3 ">
<div class="customDiv">column 1</div>
</div>
<div class="col-md-3">
<div class="customDiv">column 2</div>
</div>
</div>
how col-md-offset-3 push two column at center. see the screen shot.
2) see this one
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="customDiv">column 1</div>
</div>
<div class="col-md-3 col-md-offset-6 ">
<div class="customDiv">column 2</div>
</div>
</div>
</div>
how this offset col-md-offset-6 can push two column to corner. one to left and another to right. see the screen shot
3) how image comes at center see the code and screen shot
<div class="container">
<div class="row"> <img src="one.png" class="col-md-4 col-md-offset-4 img-responsive" /> </div>
</div>
please explain my each points and tell me how offset works in bootstrap. thanks
I am trying to make a single page full screen layout using Bootstrap 3 where the height of the main body is responsive.
The page is going to be displayed in Kiosk mode displaying 3 panels which display different messages, but as the site is going to be displayed on multiple screens of different sizes I am wanting to get the main to be responsive in height.
https://jsfiddle.net/gokcLvtv/7/
<div class="container">
<div class="row header">
<div class="col-xs-6">
Title
</div>
<div class="col-xs-6 text-right">
LOGO
</div>
</div><!-- Header-->
<div class="row main">
<div class="col-xs-8">
<div class="well">Panel One</div>
</div>
<div class="col-xs-4">
<div class="well">Panel Two</div>
<div class="well">Panel Three</div>
</div>
</div><!--main-->
<div class="row footer">
<div class="col-xs-12">© Copyright 2016</div>
</div><!--footer-->
</div><!--container-->
As you can see I have had to specify a height of the main content to get the cols to be 100% and then the .wells inside the column. But I am wanting this to be 100%.
You can use the vw value for horizontal and vertical resizing.
For example
HTML
<div class="main">
<div class="well">
Panel one
</div>
</div>
CSS
.main {
border: 1px solid red;
height: 75vw;
}
.well {
width: 30vw;
height: 30vw;
margin: 1vw;
}
It's easy to translate from px to vw. Every 1 vw is 10 pixels.
Thanks for your help with the vw ... I have managed to achieve this using vh for the height..
I have created an example for anyone who would like to use this in the future - here
Using the same layout
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="well">Header</div>
</div>
</div>
<!-- main -->
<div class="row">
<div class="col-xs-8 main">
<div class="well">
Main Panel
</div>
</div>
<div class="col-xs-4 side-bar">
<div class="well">
Side Panel One
</div>
<div class="well">
Side Panel One
</div>
</div>
</div>
<!-- Footer-->
<div class="row">
<div class="col-sm-12">
<div class="well">Hello</div>
</div>
</div>
</div>
You will just have to play around with the heights to get it to the screensize that works for you.
Using Bootstrap, I have a grid column class="col-lg-3" that I want to place it in position:fixed while the other .col-lg-9 is normal position (scroll-able through the page).
<div class="row">
<div class="col-lg-3">
Fixed content
</div>
<div class="col-lg-9">
Normal scrollable content
</div>
</div>
Just the same way like the left column in LifeHacker.com
You will see that the left part is fixed however I scroll though the page.
I use bootstrap v3.1.1
<div class="row">
<div class="col-lg-3">
<div class="affix">
fixed position
</div>
</div>
<div class="col-lg-9">
Normal data enter code here
</div>
</div>
iterating over Ihab's answer, just using position:fixed and bootstraps col-offset you don't need to be specific on the width.
<div class="row">
<div class="col-lg-3" style="position:fixed">
Fixed content
</div>
<div class="col-lg-9 col-lg-offset-3">
Normal scrollable content
</div>
</div>
Following the solution here http://jsfiddle.net/dRbe4/,
<div class="row">
<div class="col-lg-3 fixed">
Fixed content
</div>
<div class="col-lg-9 scrollit">
Normal scrollable content
</div>
</div>
I modified some css to work just perfect:
.fixed {
position: fixed;
width: 25%;
}
.scrollit {
float: left;
width: 71%
}
Thanks #Lowkase for sharing the solution.
in Bootstrap 3 class="affix" works, but in Bootstrap 4 it does not.
I solved this problem in Bootstrap 4 with class="sticky-top"
(using position: fixed in CSS has its own problems)
code will be something like this:
<div class="row">
<div class="col-lg-3">
<div class="sticky-top">
Fixed content
</div>
</div>
<div class="col-lg-9">
Normal scrollable content
</div>
</div>
Updated for Bootstrap 4
Bootstrap 4 now includes a position-fixed class for this purpose so there is no need for additional CSS...
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="position-fixed">
Fixed content
</div>
</div>
<div class="col-lg-9">
Normal scrollable content
</div>
</div>
</div>
https://www.codeply.com/go/yOF9csaptw
Bootstrap 5
The solution is very similar to v4, but you can use responsive variations with .sticky-*-top classes.
<div class="row">
<div class="col-lg-3">
<div class="sticky-md-top">
Fixed content
</div>
</div>
<div class="col-lg-9">
Normal scrollable content
</div>
</div>
Docs: https://getbootstrap.com/docs/5.0/helpers/position/#responsive-sticky-top
Use this, works for me and solve problems with small screen.
<div class="row">
<!-- (fixed content) JUST VISIBLE IN LG SCREEN -->
<div class="col-lg-3 device-lg visible-lg">
<div class="affix">
fixed position
</div>
</div>
<div class="col-lg-9">
<!-- (fixed content) JUST VISIBLE IN NO LG SCREEN -->
<div class="device-sm visible-sm device-xs visible-xs device-md visible-md ">
<div>
NO fixed position
</div>
</div>
Normal data enter code here
</div>
</div>
With bootstrap 4 just use col-auto
<div class="container-fluid">
<div class="row">
<div class="col-sm-auto">
Fixed content
</div>
<div class="col-sm">
Normal scrollable content
</div>
</div>
</div>
If you really want to do it that way, you can't do it in "col- *", because it's going to overlap each other, you should do it in the parent class "row", but depending on what you're doing, you might have a problem with the browser scroll that will be "cut" from the screen, however, is simple to solve, just control the column width and everything will be fine.
<div class="row fixed-top h-100">
<div class="col-lg-3">
Fixed content
</div>
<div class="col-lg-9 overflow-auto h-100">
Normal scrollable content
</div>
</div>
Use .col instead of col-lg-3 :
<div class="row">
<div class="col">
Fixed content
</div>
<div class="col-lg-9">
Normal scrollable content
</div>
</div>