I am attempting to have a 6 column layout for desktop and larger. However, I would like to have the grid collapse into 4 for laptops. The collapse does not occur at the break point as expected with the code below. I tried changing it to class="container-fluid" to no avail. I can't seem to get it to act as expected.
<div class="row" id="content">
<div class="col-lg-2 d-flex justify-content-center">
</div>
<div class="col-md-3 col-lg-2 d-flex justify-content-center">
</div>
<div class="col-md-3 col-lg-2 d-flex justify-content-center">
</div>
<div class="col-md-3 col-lg-2 d-flex justify-content-center">
</div>
<div class="col-md-3 col-lg-2 d-flex justify-content-center">
</div>
<div class="col-lg-2 d-flex justify-content-center">
</div>
</div>
Not sure if this is relevant, but the div is styled with the below using CSS
#content div{
min-height: 350px;
}
It should work. Just show me the complete code and i can see whats wrong
Related
I want to achieve this:
The div's content should be in the center at every screen size. But when I resize the browser content of the div spans out of the whilst the parent div remains in the center.
I tried to limit the width to a particular size, but the content becomes joined together.
I also tried giving the parent div flex-wrap: wrap; but it does not break little by little, it just becomes block, I mean on to of each other.
This is my code:
<div class="optionsPar d-flex">
<div class="options mx-auto">
<div class="row" style="width: inherit;">
<div class="d-flex">
<div class="col-md-2 col-sm-3 d-flex align-items-center mt-4">
<strong>.com</strong><span>$11.25</span>
</div>
<div class="col-md-2 col-sm-3 d-flex align-items-center mt-4">
<strong>.com</strong><span>$11.25</span>
</div>
<div class="col-md-2 col-sm-3 d-flex align-items-center mt-4">
<strong>.com</strong><span>$11.25</span>
</div>
<div class="col-md-2 col-sm-3 d-flex align-items-center mt-4">
<strong>.com</strong><span>$11.25</span>
</div>
<div class="col-md-2 col-sm-3 d-flex align-items-center mt-4">
<strong>.com</strong><span>$11.25</span>
</div>
<div class="col-md-2 col-sm-3 d-flex align-items-center mt-4">
<strong>.com</strong><span>$11.25</span>
</div>
</div>
</div>
</div>
</div>
Please I need help, thanks in advance.
You Must use Box-sizing-border box to your main div of class optionPra
<style> .optionsPar{box-sizing: border-box; width: 100%;} </style>
I wrote the following code:
<div class="row d-flex h-100">
<div class="col-4 d-flex align-self-center justify-content-center text-center">
<img class="flex-item" src="https://image.com"/>
<br/>
<h2 class="flex-item mat-display-1">Ajax</h2>
</div>
</div>
I want to align the items within the column underneath each other instead of next to eachother, but I don't seem to be able to do it somehow. How can I achieve this behaviour?
Consider adding flex-column class to parent div
<div class="row d-flex flex-column h-100">
<div class="col-4 d-flex align-self-center justify-content-center text-center">
<img class="flex-item" src="https://image.com"/>
<br/>
<h2 class="flex-item mat-display-1">Ajax</h2>
</div>
</div>
I have this simple code:
<div class="container branduri justify-content-center">
<div class="row justify-content-center">
<div class="col-xl-4">
<h1><strong>+100</strong></h1>
</div>
<div class="col-xl-4">
<h1><strong>+100</strong></h1>
</div>
<div class="col-xl-4">
<h1><strong>+100</strong></h1>
</div>
The issue is that on my website, as you can see in attached photo, the columns it is not centered perfectly. Why?
Thanks a lot.
Add bootstrap class text-center on your row div
class="row justify-content-center text-center"
You just need to center the text within each column by adding this property to the row text-align:center; or adding the Bootstrap class text-center as follows:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container branduri justify-content-center">
<div class="row justify-content-center text-center">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<h1><strong>+100</strong></h1>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<h1><strong>+100</strong></h1>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<h1><strong>+100</strong></h1>
</div>
</div>
</div>
I'm using bootstrap 4 in my Angular 8 application. In my main page I have two components of size md-5 and md-6 and I want to separate them using offset-md-1. But the offset size is big and I don't want to have that much space between my components. How do I reduce the size of the offset? Will offset-md-0.5 work? Can you suggest any better way other than using bootstrap offset?
This is my code:
<div class="container-fluid padding">
<div class="row">
<div class="container1 col-xs-12 col-sm-12 col-md-5">
<app-projectstatus></app-projectstatus>
</div>
<div class="container2 col-xs-12 col-sm-12 col-md-6 offset-md-1">
<app-upcomingreleases></app-upcomingreleases>
</div>
</div>
</div>
Use ml-auto instead of offset-md-1 it works perfect for you.
try this code:
<div class="container-fluid padding">
<div class="row">
<div class="container1 col-xs-12 col-sm-12 col-md-5">
<app-projectstatus></app-projectstatus>
</div>
<div class="container2 col-xs-12 col-sm-12 col-md-6 ml-auto">
<app-upcomingreleases></app-upcomingreleases>
</div>
</div>
</div>
I hope this will works perfect for you.
Note: I Can't understand that how offset-md-1 size is big? the default css property for this class is fixed margin-left: 8.333333%; in bootstrap. you can use this class also but condition is that you do not have to make any kind of changes in col-**-* width.
Thank you...
There is no *-xs-* classes in bootstrap-4. Use col-12 instead.
`col-xs-*` not working in Bootstrap 4
Ther are three ways to add space between columns.
margin-x on .col-*
padding-x on .col-*
justify-content-between on .row
Margin is quite tricky since it affects the sum of width of total columns. The width + margin-x of the two columns should not exceed the width of .row. Otherwise, the columns breaks.
The total width of the two columns on md-screen is 91.667%. So you have 8.333% free sapce. You can control where to use this 8.333%.
offset-md-1,mr-auto, ml-auto and justify-content-between yeilds the same result: 8.333% space betwen the two columns.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid mt-5">
<div class="row justify-content-between">
<div class="container1 col-12 col-md-6 bg-primary">
</div>
<div class="container2 col-12 col-md-5 offset-md-1 bg-danger ">
offset-md-1
</div>
</div>
</div>
<div class="container-fluid mt-5">
<div class="row justify-content-between">
<div class="container1 col-12 col-md-6 mr-auto bg-primary">
mr-auto
</div>
<div class="container2 col-12 col-md-5 bg-danger ">
</div>
</div>
</div>
<div class="container-fluid mt-5">
<div class="row justify-content-between">
<div class="container1 col-12 col-md-6 bg-primary">
</div>
<div class="container2 col-12 col-md-5 bg-danger ">
ml-auto
</div>
</div>
</div>
<div class="container-fluid mt-5">
<div class="row justify-content-between">
<div class="container1 col-12 col-md-6 bg-primary">
justify-content-between
</div>
<div class="container2 col-12 col-md-5 bg-danger ">
justify-content-between
</div>
</div>
</div>
If you want to have 8.333% / 2 space betwen them. You can not do it in bootstrap-4. So you need to use css.
#media (min-width: 768px) {
.ml-md-0_5 {
margin-left: calc((100% / 12) / 2)
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid padding">
<div class="row">
<div class="container1 col-12 col-md-6 bg-primary">
</div>
<div class="container2 col-12 col-md-5 bg-danger ml-md-0_5">
ml-md-0_5
</div>
</div>
</div>
Now, the total width + margin of both of the columns is 95.833%. By default, the elements are left aligned. Therefore, 4.166% free sapce on the right side of the last column. You can use it on x-side of any of the columns if you wish so.
As said before, you can use padding-x also which i prefer because it does not affect the total width of the columns.
I have a page with 3 columns as follows :
<div class="row">
<div class="col-lg-3">
<div>**Section 1**</div>
<div>**Section 2**</div>
</div>
<div class="col-lg-6">**Section 3**</div>
<div class="col-lg-3">
<div>**Section 4**</div>
<div>**Section 5**</div>
</div>
</div>
I want to change the order of sections in mobile as this picture :
Here are 2 options...
Use flex direction responsively:
Use flexbox column on lg and larger. The row container must have a defined height. In this case I used h-100 (height: 100%;).
<div class="container vh-100">
<div class="row h-100 flex-lg-column flex-wrap">
<div class="col-lg-3 border flex-grow-1 overflow-auto order-3 order-lg-0">1</div>
<div class="col-lg-3 border flex-grow-1 overflow-auto order-4 order-lg-0">2</div>
<div class="col-lg-6 border order-first order-lg-0 min-vh-100 overflow-auto">3</div>
<div class="col-lg-3 border flex-grow-1 overflow-auto">4</div>
<div class="col-lg-3 border flex-grow-1 overflow-auto order-last order-lg-0">5</div>
</div>
</div>
https://www.codeply.com/go/WDjcxLu5bC
Hack with flexbox & floats:
This option uses floats on lg and larger, and the returns to flexbox on smaller screens which allows us to change the order of the cols when the layout stacks vertically. This layout is also limited to height:100%.
<div class="row d-lg-block vh-100">
<div class="col-lg-3 float-left d-flex flex-column h-100 p-0">
<div class="flex-grow-1 px-3 border">1</div>
<div class="flex-grow-1 px-3 border">2</div>
</div>
<div class="col-lg-6 float-left border order-first order-lg-0 h-100 overflow-auto">3</div>
<div class="col-lg-3 float-left border h-50">4</div>
<div class="col-lg-3 float-left border h-50">5</div>
</div>
https://www.codeply.com/go/eXY3HFr5A4