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>
Related
How do I push down the left-most column a position-fixed according to navbar height which has fixed-top???
Here is my HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<style>
html,
body {
height: 100%!important;
}
.navbar-brand img {
filter: invert(65%) sepia(91%) saturate(7314%) hue-rotate(210deg) brightness(101%) contrast(98%);
}
</style>
<style>
.scrollable {
overflow: hidden;
height: 100%!important; /* Otherwise we have to use h-100 on the .scrollable section?!? */
}
.scrollable:hover {
overflow: auto;
}
::-webkit-scrollbar {
width: 3px;
height: 3px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-track {
background-color: #FEFEFE;
}
::-webkit-scrollbar-thumb {
background-color: #6c757d;
}
</style>
<title>BS5 Layout</title>
</head>
<body class="bg-light">
<header class="navbar navbar-light bg-light fixed-top p-0 border-bottom">
<div class="col-12 col-md-3 col-lg-2">
<a class="navbar-brand text-primary px-2" href="#">
<img src="https://simplisti.com/assets/logo.svg" width="32" height="32" class="d-inline-block align-top " loading="lazy">
Brand
</a>
</div>
<nav class="col-12 col-md-9 col-lg-10 border-start" aria-label="breadcrumb">
<ol class="breadcrumb mt-3 px-2">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item">Contacts</li>
<li class="breadcrumb-item active" aria-current="page">List</li>
</ol>
</nav>
</header>
<div class="container-fluid h-100">
<div class="row h-100">
<section class="h-100 col-md-3 col-lg-2 position-fixed p-0 scrollable">
This won't scroll all the way to bottom?!?
item<br>
...
Last item
</section>
<section class="h-100 col-md-5 col-lg-7 offset-md-3 offset-lg-2 p-0 border-start">
Repeat this content and navbar disappears after X number of scrolls<br>
...
Last line<br>
</section>
<section class="h-100 col-md-4 col-lg-3 p-0 border-start">
SIDE
</section>
</div>
</div>
</body>
</html>
Thanks in advance :)
Body padding is required as your nav is fixed!
The fixed navbar will overlay your other content unless you add
padding to the top of the . Try out your own values or use our
snippet below. Tip: By default, the navbar is 50px high.
body { padding-top: 70px; }
Include this line after the bootstrap stuff! Working demo and code!
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%;
}
Have the following code with simple Bootstrap 4.0 grid.
Codepen
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
body {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
background-color: #005267;
min-height: 700px;
height: auto;
min-height: 100%;
overflow-y: scroll;
padding-bottom: 20px;
font-family: Arial, Geneva, Helvetica, sans-serif;
}
.vertical-align {
display: flex;
align-items: center;
}
.hr_news {
font-weight:bold;
}
/*2 kill*/
.header_bg {
background-color:red;
height:90px;
vertical-align: middle;
}
.brd_black {border:0px solid #000;}
</style>
<!-- Bootstrap CSS -->
<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">
<title>Новости обучения и развития</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="brd_black align-self-center bg-white vertical-align col-2" style="height:90px;"><img src="http://igorisaev.com/logo.png" class="float-left">
</div>
<div class="brd_black col-2 bg-white"> </div>
<div class="brd_black col-8 bg-white vertical-align">
<h4>Новости обучения и развития</h4></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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
When I added hyperlink to image and start to resize page, empty col-2 cloumn steps over first column with image. If I remove hyperlink all works fine. Why this happens and how can i fix it?
below, you can find 3 scenarios:
as your code in the attached code-pen
if you remove the <a> from around your logo
if you use col-4
the 3rd option should work for you, if not, kindly share what you're looking for
.vertical-align {
display: flex;
align-items: center;
}
<!-- Bootstrap CSS -->
<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">
<div class="container-fluid">
<br/>
<br/>
<br/>
<div class="row">
<div class="brd_black align-self-center bg-white vertical-align col-2" style="height:90px;">
<img src="https://www.akberiqbal.com/apple-touch-icon-144x144.png" class="float-left">
</div>
<div class="brd_black col-2 bg-white"> </div>
<div class="brd_black col-8 bg-white vertical-align">
<h4>THIS IS YOUR CODE</h4>
</div>
</div>
<br/>
<br/>
<br/>
<div class="row">
<div class="brd_black align-self-center bg-white vertical-align col-2" style="height:90px;">
<img src="https://www.akberiqbal.com/apple-touch-icon-144x144.png" class="float-left">
</div>
<div class="brd_black col-2 bg-white"> </div>
<div class="brd_black col-8 bg-white vertical-align">
<h4>this is when you remove <a> from around the logo</h4>
</div>
</div>
<br/>
<br/>
<br/>
<div class="row">
<div class="brd_black align-self-center bg-white vertical-align col-4" style="height:90px;">
<img src="https://www.akberiqbal.com/apple-touch-icon-144x144.png" class="float-left">
</div>
<div class="brd_black col-8 bg-white vertical-align">
<h4>this is when you have col-4 instead of empty col-2</h4>
</div>
</div>
</div>
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'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>