Having trouble with Bootstrap where I have two divs: (A) as col-lg-6 & (B) as col-lg-6 on a large device.
will render: (A)(B)
I am looking to display switch the order of the divs on a mobile or small device? col-sm-12
will render: (B)
(A) *(to display on top of each other)
<section class="about-page">
<div class="container">
<div class="row mineral_padding">
<div class="col-lg-6 col-sm-12 order-1 wow fadeInLeft">
<div class="about_us mineral_margin">
<div class="about_slide">
<div>
<h5>A
</h5>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-sm-12 order-12 wow fadeInRight">B</div>
</div>
</div>
</section>
I am using Bootstrap v4.0.0-alpha.6 (no going back here)
Thanks guys
Basically, this question has been answered before here and here.
In Bootstrap 4 alpha.6 the ordering classes were flex-*, so it would be:
<section class="about-page">
<div class="container">
<div class="row mineral_padding">
<div class="col-lg-6 col-sm-12 flex-last flex-lg-first wow fadeInLeft">
<div class="about_us mineral_margin">
<div class="about_slide">
<div>
<h5>A
</h5>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-sm-12 wow fadeInRight">B</div>
</div>
</div>
</section>
https://www.codeply.com/go/ajPR2ByFVM
As of 4.0 beta, the classes changed to order-* so instead you'd use order-lg-first order-last on the "A" div.
Use order-lg-1 order-sm-0 on B
Use order-lg-0 order-sm-1 on A
https://getbootstrap.com/docs/4.0/utilities/flex/#order
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="about-page">
<div class="container">
<div class="row mineral_padding">
<div class="col-lg-6 col-sm-12 order-lg-0 order-sm-1 wow fadeInLeft">
<div class="about_us mineral_margin">
<div class="about_slide">
<div>
<h5>A
</h5>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-sm-12 order-lg-1 order-sm-0 wow fadeInRight">B</div>
</div>
</div>
</section>
Related
I want to create this layout. I tried making 2 and 4 div duplicate and showing them on mobile and displaying on desktop and opposite.
This code is working as I expected. But I want to know that is it possible to make it without duplicating the content.
<div class="row">
<div class="col-md-2 col-12">
<img src="http://via.placeholder.com/106x106">
<div class="show-mobile">
<div>content2</div>
<div>content4</div>
</div>
</div>
<div class="col-md-8 col-12">
<div class="show-desktop">
content2
</div>
<div>
content 3
</div>
</div>
<div class="col-md-2 col-12">
<div class="show-desktop">
content 4
</div>
<div>
content 5
</div>
</div>
</div>
This might be a not a perfect solution but visually looks close enough
<div class="container">
<div class="row">
<div class="col-4 col-md-2">
<img src="http://via.placeholder.com/106x106">
</div>
<div class="col-8 col-md-8 bg-light border">
2
</div>
<div class="col-12 col-md-8 offset-md-2 order-2 bg-light border">
3
</div>
<div class="col-8 offset-4 col-md-2 offset-md-0 bg-light border">
4
</div>
<div class="col-12 col-md-2 order-3 bg-light border">
5
</div>
</div>
</div>
I am trying to learn Bootstrap in particular Bootstrap 4 but struggling with my footer.
It has 2 rows and i want the entire thing centered but struggling.
Below is my HTML i currently have
<section class="block-follow-us">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-4 col-md-1 px-0">
<span class="h5">Follow us:</span>
</div>
<div class="offset-1 col-10 offset-md-0 col-md-3 px-0">
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="container-fluid">
<div class="row text-center">
<div class="col-12">© 2019 - Apollo Scientific Ltd</div>
</div>
<div class="row justify-content-center text-center">
<div class="col-12 col-md-2">
Terms and conditions
</div>
<div class="col-12 col-md-2">
Privacy policy
</div>
<div class="col-12 col-md-1">
Careers
</div>
</div>
</div>
</footer>
Which turns out looking like the below on desktop but all parts over the place and i have been trying for hours to sort it
And mobile looks likes fine though
<section class="block-follow-us">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-lg-12 col-md-12 text-center">
<span class="h5">Follow us:</span>
Link1
Link2
Link3
Link4
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="container-fluid">
<div class="row text-center">
<div class="col-lg-12">© 2019 - Apollo Scientific Ltd</div>
</div>
<div class="row justify-content-center text-center">
<div class="col-lg-4">
Terms and conditions
</div>
<div class="col-lg-4">
Privacy policy
</div>
<div class="col-lg-4">
Careers
</div>
</div>
</div>
</footer>
Im using bootstrap. Need to place two cards of equal row-height. Each card is placed inside col-xs-6. Card contains text and buttons. When i use col-height col-xs-6 card both the card join together. Could be please help me on this.
<div class="row">
<div class="row-height">
<div class="col-height col-middle col-xs-6 card">
<div class="row">
<div class="col-xs-12 text-center">
<h3 class="heading-s1">Login</h3>
</div>
<div class="col-xs-12 text-center">
Login!
</div>
</div>
</div>
<div class="col-height col-middle col-xs-6 card">
<div class="row">
<div class="col-xs-12 text-center">
<h3 class="heading-s1">Sign UP</h3>
</div>
<div class="col-xs-12 text-center">
Sign Up!
</div>
</div>
</div>
</div>
</div>
Is that you want?
.row should be wrapped into .container
.card {
border: 1px solid black;
margin: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row-height">
<div class="row">
<div class="col-height col-middle col-xs-5 pull-left card">
<div class="col-xs-12 text-center">
<h3 class="heading-s1">Login</h3>
</div>
<div class="col-xs-12 text-center">
Login!
</div>
</div>
<div class="col-height col-middle col-xs-5 pull-right card">
<div class="col-xs-12 text-center">
<h3 class="heading-s1">Sign UP</h3>
</div>
<div class="col-xs-12 text-center">
Sign Up!
</div>
</div>
</div>
</div>
</div>
I creating simple post list with thumbnails.
I have created this code:
<div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12">
<div class="news">
<div class="news-thumb text-center">
<img src="images/NewsThumb.png" alt="" class="img-responsive" />
</div>
<div class="news-excerpt">
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12">
<div class="news">
<div class="news-thumb text-center">
<img src="images/NewsThumb.png" alt="" class="img-responsive" />
</div>
<div class="news-excerpt">
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
but on FullHD (1920px) I getting values for col-sm-* - why?
http://prntscr.com/an1097
This is because there is no over-riding column offset above for viewports above col-sm. Meaning that your page will display as the 6 central columns with the three column offset - even on larger screens.
<div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3">
you will need to add the following (col-md-offset-0) to each of the parent divs to prevent the offset in -md and -lg and to allow the two divs to display side by side:
<div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3 col-md-offset-0">
I just tested this and it now works and displays the columns side by side - look at the code snippet in action (in full screen mode - the columns are adjacent and in the small window they stack vertically. Note that I added coloured backgrounds to demonstrate the point.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3 col-sm-offset-0" style="background:red">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12">
<div class="news">
<div class="news-thumb text-center">
<img src="images/NewsThumb.png" alt="" class="img-responsive" />
</div>
<div class="news-excerpt">
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3 col-sm-offset-0" style="background:blue">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12">
<div class="news">
<div class="news-thumb text-center">
<img src="images/NewsThumb.png" alt="" class="img-responsive" />
</div>
<div class="news-excerpt">
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
I used to have a working layout of a header, side navigation column, main large content column , and a footer. Now the navigation column is sitting on top of the content column even though the numbers should add up. I just need my navigation column to line up next to my content. You can see my WIP HERE. What am I doing wrong?
Here is basically what my code for my layout is:
<div class="container">
<div class="row">
<div class="page-header">
<p>HEADER</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2 hidden-sm hidden-xs">
<p>NAVIGATION</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-10 col-md-10 col-sm-12 col-lg-offset-2 col-md-offset-2 col-sm-offset-0 col-xs-offset-0">
<p>CONTENT</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="page-footer">
<p>FOOTER</p>
</div>
</div>
</div>
Your help is greatly appreciated. Thank you! :)
The column divs only line up beside each other for the divs actually are "siblings" to each other, apart from adding up numberwise.
Try putting the navigation and content columns in the same container -> row tag, like so:
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2 hidden-sm hidden-xs">
<p>NAVIGATION</p>
</div>
<div class="col-lg-10 col-md-10 col-sm-12 col-md-12 col-lg-offset-2 col-md-offset-2 col-sm-offset-0 col-xs-offset-0">
<p>CONTENT</p>
</div>
</div>
</div>
From the look of your code, it looks like you want your columns next to each other. This should work
<div class="container">
<div class="row">
<div class="page-header">
<p>HEADER</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2 hidden-sm hidden-xs">
<p>NAVIGATION</p>
</div>
<div class="col-lg-10 col-md-10 col-sm-12 col-md-12 col-lg-offset-2 col-md-offset-2 col-sm-offset-0 col-xs-offset-0">
<p>CONTENT</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="page-footer">
<p>FOOTER</p>
</div>
</div>
</div>