I'm working with Bootstrap 4 and I've been searching for a solution to my ordering issue, but can't seem to get it right or find one in the archives. Here's the situation...
On a desktop, I need the following layout:
Then on a mobile device, the layout should look like:
Box 1 is given a class of "col-md-8", and Box 2 is given the class "col-md-4". But for the life of me, I can't figure out how to properly place Box 3 (or the proper class) to get it to appear correctly in both layouts. Anyone have any thoughts?
I appreciate the help in advance!
EDIT (2018/6/26):
Here's the resulting code that works:
<main id="body" role="maincontent">
<div class="container">
<h1>Page Title</h1>
<div class="row d-flex d-md-block clearfix">
<div class="col-md-8 main_content float-left">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="col-md-4 highlight float-right">
<p>Second Item</p>
</div>
<div class="col-md-4 float-left">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
</main>
This has already been answered in similar questions such as: One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4
Since BS4 uses flexbox, disable the flexbox using d-md-block, and use float- to make the 2nd column pull right on md screens...
<div class="container">
<div class="row d-flex d-md-block">
<div class="col-md-8 float-left">
1
</div>
<div class="col-md-4 float-right">
2
</div>
<div class="col-md-8">
3
</div>
</div>
</div>
https://www.codeply.com/go/4HZq18NKln
For mobile devices try using media queries and grid classes small. For instance, box1 col-sm-4 you can reference this guide https://getbootstrap.com/docs/4.0/layout/grid/
`something {
padding: 5px;
#include media-breakpoint-up(sm) {
padding: 20px;
}
#include media-breakpoint-up(md) {
padding: 40px;
}
For ordering, you can use ordering property and here is the mdn ref https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items
You can reference this post Using media breakpoints in Bootstrap 4-alpha
Hope that will help you.
Assume phone screen width is 425px based on Google Chrome. Copy and paste the code and open in your browser to see the actual result.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
h1 {
color: #fff;
}
.left, .right {
height: 800px;
}
.one {
height: 500px;
background-color: red;
}
.two {
height: 100%;
background-color: green;
}
.three {
margin-top: 0.5em;
height: 275px;
background-color: blue;
}
#media screen and (max-width: 425px) {
.two {
width: 50%;
position: absolute;
left: 25%;
top: -285px;
}
.three {
margin-top: 51em;
}
}
</style>
</head>
<body>
<div class="row p-0 m-0">
<div class="left col-md-8 col-sm-12 p-2">
<div class="row p-0 m-0">
<div class="one col-12"><h1>One</h1></div>
<div class="three col-12"><h1>Three</h1></div>
</div>
</div>
<div class="right col-md-4 col-sm-12 p-2">
<div class="two"><h1>Two</h1></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.js"></script>
<script>
</script>
</body>
</html>
Related
I have a page with multiple columns, a header, and a footer. I want a column to scroll with the user, but not overlap the footer:
<html>
<head></head>
<body>
<div id="wrap">
<div id="main" class="clear-top">
<div class="col-lg-12">
<div class="row pl-4 justify-content-between pb-4">
<div class="col-lg-1 col-md-12 col-sm-12 ">
</div>
<div class="col-lg-7 col-md-12 col-sm-12 ">
... Main Content ...
</div>
<div class="col-lg-4 col-md-12 col-sm-12 p-4 sidebar-container">
... Content I want to Scroll with User ...
</div>
</div>
</div>
</div>
</div>
</body>
<footer class="footer">
<div class="container">
</div>
</footer>
</html>
CSS:
// General Styling
html, body{
height: 100%;
}
#wrap {
min-height: 100%;
}
#main {
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}
.footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
width: 100%;
bottom: 0;
}
I'm using Bootstrap 4, so I've tried adding the sticky-top class to the column I want to scroll, however nothing changed.
I've tried changing the position of the column to sticky, but again nothing seems to change. Am I adding this to the wrong div?
As per my understanding, you are looking forward to have a sidebar which floats through the content. If that's the case here is the solution. I have used sticky-top which sticks your side-nav to the top. No need to use any CSS to align your footer to the bottom. You can use bootstrap inbuilt class d-flex flex-column min-vh-100 to your main container and use mt-auto to your footer. This will align your footer to the bottom of the page
.custom-container {
height: 500vh;
}
ul {
list-style: none;
padding: 0
}
footer {
background: yellow
}
#side-nav {
background: blue;
height: 100%
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container-fluid d-flex flex-column min-vh-100">
<div class="row">
<div class="col-sm-4">
<div id="side-nav">
<ul class="sticky-top text-center">
<li><button id=1>Link1</button></li>
<li><button id=2>Link2</button></li>
<li><button id=3>Link3</button></li>
</ul>
</div>
</div>
<div class="col-sm-8 ">
<div class="custom-container">
<h2>Content that scrolls</h2>
<h5>What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a
type specimen book it has?</h5>
</div>
</div>
</div>
<footer class="mt-auto">footer</footer>
</body>
</div>
I am a bit new to bootstrap and would like some guidance regarding how to use "d-flex" to align the content center. I tried applying "d-flex justify-content-center" like what the documentation says but the alignments still does not work. Is there anything I am doing wrong? I attached an image below; looking for centered spacing after the "Testing!" so the pictures are more aligned in the center from top to bottom. I believe I got the horizontal alignment correct.
<div class="container">
<div class="row ">
<div class="col text-center">
<h1>Testing!</h1>
</div>
</div>
<div class="row body text-center">
<div class="col-6">
<h2>Shop Collections</h2>
<img class="img-fluid"src="images/rx782alloy.jpg" >
</div>
<div class="col-6">
<h2>Catalog</h2>
<img class="img-fluid" src="images/batmanbeyond.jpg" >
</div>
</div>
</div>
```[![enter image description here][1]][1]
[1]: https://i.stack.imgur.com/xz54x.png
Please check out this fiddle. I believe this will answer your question. I have given you a guideline that will clarify your concept regarding d-flex. The design is responsive, change the view to see the result.
https://jsfiddle.net/hilalrehan/9vyd6Lu2/140/
.adjust {
padding-top: 30px;
position: relative;
}
.text-area{
min-height: 139px;
}
.box {
padding: 0.2rem;
flex: 0 0 20rem;
}
.set{
flex-flow: wrap;
justify-content: center;
min-width: 20rem;
}
#media (min-width: 576px) {
.set {
max-width: none;
}
.box {
padding: 0rem;
}
}
#media (min-width: 1200px) {
.set {
justify-content: flex-end;
}
.box {
flex: 0 0 8rem;
}
}
<html>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-lg-12 order-2 order-lg-6 col-xl-6">
<h2 class="display-2"> Testing </h2>
<div class="d-flex set mx-auto ">
<div class="box">
<div class="text-area display-4 text-center text-white bg-success"> Shop Collections </div>
<div class="img bg-success"> <img src="https://i.stack.imgur.com/xz54x.png" class="img-fluid"> </div>
</div>
<div class="box">
<div class="text-area display-4 text-center adjust-text black bg-warning"> <div class="adjust"> Catalog</div> </div>
<div class="img bg-white "> <img src="https://i.stack.imgur.com/xz54x.png" class="img-fluid" > </div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</html>
I am building a layout with bootstrap. In the design most of the elements are boxed (so I use the "container" class).
Some rows have 1 column that is inside the container but 1 other column that needs to break out of the container and be full width.
Here is an image of what I want to achieve:
I really struggle to create that layout. Any ideas?
Here is a codepen of the code below: https://codepen.io/leonfrombeawwwer/pen/bXGvQb
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<div class="container">
<div class="row">
<div class="col-6">
<div class="green-box"></div>
</div>
<div class="col-6">
<div class="blue-box"></div>
</div>
</div>
</div>
.green-box {
background: green;
height: 200px;
}
.blue-box {
background: blue;
height: 200px;
}
I tried a container-fluid container with percentage width for the one column that needs to stay inside in boxed layout. But that pushes all the other elements f.e. header navigation too.
I also tried absolute positioning and played with flexbox. Nothing ended up in a result that is useful in all viewports.
Thanks for your help.
I found the solution now. Please find it in that codepen: [https://codepen.io/leonfrombeawwwer/pen/bXGvQb][1]
[https://codepen.io/leonfrombeawwwer/pen/bXGvQb]1
or here:
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<div class="container-fluid relative-container">
<div class="row">
<div class="col-md-6 placeholder"></div>
<div class="col-6">
<div class="green-box absolute-full-width-image"></div>
</div>
</div> <!-- .row -->
</div> <!-- .container-fluid .relative-container -->
<div class="container">
<div class="row">
<div class="col-6">
<div class="blue-box"></div>
</div>
<div class="col-md-6 placeholder"></div>
</div> <!-- .row -->
</div> <!-- .container -->
.green-box {
background: green;
height: 200px;
}
.blue-box {
background: blue;
height: 200px;
width: 120%;
}
.relative-container {
position relative;
}
.absolute-full-width-image {
position: absolute;
right: 0;
width: 110%;
}
On mobile device the the sidebar is shown above my products. I want that it should go down the my products.
The side bar is on the left and content on the right. Also is there a better way to create a sidebar than what I did here.
https://jsfiddle.net/3pLnc4y1/
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="row">
<div class="col-md-2">
Home/Categories
</div>
<div class="col-md-10">
<h2>My shop</h2>
<div class="row">
<div class="col-md-3">
sdsd
</div>
<div class="col-md-3">
sdsd
</div>
<div class="col-sm-3">
sdsd
</div>
<div class="col-sm-3">
sdsd
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
The easiest way to do this would be with Flexbox. I created a sample Codepen for you here: https://codepen.io/CWSites/pen/pqGowo
The code itself can be however you like, for simplicity I just made a few divs.
<div class="container">
<div class="sidebar">
Sidebar Here
</div>
<div class="content">
Hello World
</div>
</div>
The CSS is where the magic happens. You will need a containing div with some flex styles applied in order to use flexbox. Your sidebar and your content divs will also need some flexbox code of their own. In my sample I have the media query set for screens 600px and smaller but you can adjust that to whatever you like.
Starting off you'll want your sidebar order to be 1 so it displays first going left to right, however on a smaller screen I flip the flexbox order so sidebar is now 2 and content is 1.
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.sidebar {
width: 30%;
order: 1;
}
.content {
width: 70%;
order: 2;
}
#media only screen and (max-width: 600px) {
.container {
flex-direction: column;
}
.sidebar {
order: 2;
}
.content {
order: 1;
}
}
When working with Flexbox, I find this guide extremely helpful.
Use have to use use the order class utility :
Doc : https://getbootstrap.com/docs/4.2/layout/grid/#reordering
JsFiddle : https://jsfiddle.net/b9ejhstw/1/
HTML:
<div class="row">
<div class="col-xs-12 col-md-10 order-md-last"> <!-- <--- HERE --->
<h2>My shop</h2>
<div class="row">
<div class="col-md-3">
sdsd
</div>
<div class="col-md-3">
sdsd
</div>
<div class="col-sm-3">
sdsd
</div>
<div class="col-sm-3">
sdsd
</div>
</div>
</div>
<div class="col-xs-12 col-md-2">
Home/Categories
</div>
</div>
I feel like using margin and padding will mess with the bootstrap grid in a way that makes it not work on all devices since your going outside of the grid. If anyone can clarify this that would be awesome. Anyways I'm having issues getting the left arrow to space out away from the 3 bike images in a way that keeps everything on the page perfectly centered. I've been messing with the grid, but no matter what I do I can't get the left arrow to move away from the first bike image. See screenshot for reference. Any help is appreciated.
HTML
<!DOCTYPE html>
<html ng-app='formApp'>
<head>
<title>Bicycle App</title>
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link href="app.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="container">
<div class='row'>
<div class='col-md-12'>
<i class="fa fa-bicycle" aria-hidden="true"><span> {{"Bike Shop"}}</span></i>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<!-- end class not needed -->
<div class="chooseTitle">
Choose Your Bicycle
</div>
</div>
</div>
<!-- you missed md from offset, end class not needed -->
<div class="products" ng-controller="BikeController">
<div class="row">
<div class="col-md-1" id="leftArrow"><img ng-src="images/leftarrow.png"></div>
<div class="col-md-3 text-center" ng-repeat="product in products | limitTo:-3">
{{product.manufacturer}}
<img id="bikePic" ng-src="{{product.image}}">
</div>
<div class="col-md-1" id="rightArrow"><img ng-src="images/rightarrow.png"></div>
</div>
</div><!--End controller-->
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bikeimageslider.js"></script>
</body>
</html>
CSS
.header{
font-style:italic;
background-color:black;
height:60px;
color:white;
font-weight:bold;
font-size:40px;
}
.header .fa {font-style:italic;
}
.bikeSelector{
color:green;
}
.chooseTitle{
font-size:60px;
}
.products{
color: #1E90FF ;
text-align:center;
font-size:40px;
}
#bikePic{
height:100%;
width:100%;
}
<img ng-src="images/leftarrow.png">
change to
<img ng-src="images/leftarrow.png" class="img-responsive">
this will add max-width: 100%; to your image and won't break the <div class="col-md-1" id="leftArrow"> layout
In other words, your problem is that nav images is too big :)
I would rather use absolute positioning for the navigation elements.
Like
#leftArrow{
position: absolute;
left: -40px;
top: 50%;
}