This question already has answers here:
Remove padding from columns in Bootstrap 3
(26 answers)
Closed 2 years ago.
I want to remove margins between hello and dd how could i do it.
<div className="container border border-primary">
<div className="row">
<div className="">A </div>
<div className="col">
<div className="row justify-content-between m-0 p-0">
<p>hello</p>
<p>hello</p>
</div>
<div className='row m-0 p-0'>
dd
</div>
</div>
</div>
</div>
You have to remove the margin of the <p> elements to remove the space between the rows.
You have three possibilities to solve this:
Using Bootstrap utility class .m-0 on the <p> elements itself.
A custom CSS rule to remove the margin of the <p> elements.
Using a <span> element instead of a <p> element.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container border border-primary">
<div class="row">
<div>A</div>
<div class="col">
<div class="row justify-content-between m-0 p-0">
<p class="m-0">hello</p>
<p class="m-0">hello</p>
</div>
<div class='row m-0 p-0'>dd</div>
</div>
</div>
</div>
You can use .no-gutters from the Bootstrap grid system.
<div class="row no-gutters">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
Related
I'm making a responsive layout for a ecommerce productdetailpage. I would like to order the columns different on mobile without getting white spaces. This is what it looks like currently:
The problem is on desktop when for example there is not content for box 3. There will be a huge white gap above box 5. So box 5 has to move under box 2. Like this:
I don't know if this is even possible through using framework Bootstrap 4, if not I'm looking forward to see how you would doing this without. Hopefully someone can help me out.
For the structure i use the following bootstrap grid:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row">
<div class="col-lg-7">
1
</div>
<div class="col-lg-5">
<div>2</div>
<div>3</div>
</div>
</div>
<div class="row">
<div class="col-lg-7">
4
</div>
<div class="col-lg-5">
5
</div>
</div>
It is necessary to know what layout should be applied, e.g. though JavaScript. Then when we will know what layout should be used, we can apply our layout.
So we car create a div and divide this div into two parts. Then using flex-grow property, we can fill the remaining space:
html,body{height:100%;}
.bg-purple {
background: rgb(48,0,50);
}
.bg-gray {
background: rgb(74,74,74);
}
.bg-blue {
background: rgb(50,101,196);
}
.bg-red {
background: rgb(196,50,53);
}
<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 h-100">
<div class="row justify-content-center h-100">
<div class="col-6 bg-red">
<div class="h-100 d-flex flex-column">
<div class="row justify-content-center bg-purple flex-grow-1">
<div class="text-white">
<div>1</div>
</div>
</div>
<div class="row justify-content-center bg-blue flex-grow-1">
<div class="text-white">4</div>
</div>
</div>
</div>
<div class="col-6 bg-gray">
<div class="h-100 d-flex flex-column">
<div class="row justify-content-center bg-info" style="height: 30px;">
<div class="text-white">
<div>Column with fixed height 2</div>
</div>
</div>
<div class="row justify-content-center bg-success flex-grow-1">
<div class="text-white">Fille the remaining space 5</div>
</div>
</div>
</div>
</div>
</div>
An example at jsfiddle can be seen here
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">50%</div>
<div class="col-sm-6" style="background-color:orange;">50%</div>
</div>
<br>
<div class="row">
<div class="col-sm-4" style="background-color:yellow;">33.33%</div>
<div class="col-sm-4" style="background-color:orange;">33.33%</div>
<div class="col-sm-4" style="background-color:yellow;">33.33%</div>
</div>
<br>
<!-- Or let Bootstrap automatically handle the layout -->
</div>
</div>
I'm trying to vertical align text (<span class="align-middle">middle</span>) in the middle of a div.
This is my code:
<div class="col-4 shadow product-added">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-5">
<div class="row">
<img src="<?php echo $OTHERIMAGE1; ?>" class="">
</div>
</div>
<div class="col-7">
<span class="align-middle">middle</span>
</div>
</div>
</div>
</div>
</div>
Why isn't the text aligning as it should?
It is actually working but it is doing it inside the span because align-middle only works with inline elements.
You should use it on the parent div but with the class d-flex align-items-center
<div class="col-7 d-flex align-items-center">
I saved it on a JSfiddle while adding height to the row to see if it would work correctly:
https://jsfiddle.net/vca42kxo/2/
I'm trying to simply center justify and align two bootstrap columns inside a container. The columns are in different rows.
The grid layout is
<body style="height: 100vh;">
<div class="container">
<div class="row">
<div class="col-6">
<div class="card">
hello
</div>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="card">
world
</div>
</div>
</div>
</div>
</body>
the cards are just to outline the containers.
I'm aware there are MANY questions on vertical alignment, and I may have missed the one that contains the answer I need. But my take away from most of them is that the parent needs to have some height.
The following works just fine if you have only one row, because you can center the column in the 100% height row. But if you have two rows, it doesn't so well, since each column is centered in its own row, and the rows are each the height of the window.
<body style="height: 100vh;">
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<div class="col-6">
<div class="card">
hello
</div>
</div>
</div>
<div class="row h-100 justify-content-center">
<div class="col-4">
<div class="card">
world
</div>
</div>
</div>
</div>
</body>
I wish I could just move the justify-content-center align-items-center up to the container, but alas that doesn't seem to do anything.
So, please help me, how can I place these flush, one on top of the other, smack in the middle of the screen?
Here's a good way to do this using Bootstrap's build in flexboxes.
<div class="container d-flex h-100 flex-column">
<div class="flex-grow-1"></div>
<div class="row justify-content-center">
<div class="col-3">
<div class="card">ITEM A</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-3">
<div class="card">ITEM B</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-3">
<div class="card">ITEM C</div>
</div>
</div>
<div class="flex-grow-1"></div>
</div>
We have two buffer flex rows, with flex-grow-1. Each of these rows will expand (with the same weight) to fill the top and bottom portions equally. Each of the content rows in the middle will have the height of their content.
The end result is the ITEM cards centered both vertically and horizontally on the screen. Because they are within individual rows, you can adjust margins/padding as necessary (by default they cards end up next to each other vertically.
Example screenshot of the above code in bootstrap
You could potentially do this one with one row + column and an internal flexbox, but that gives you less control over how the individual cards appear in relation to each other.
EDIT: d-flex makes the container a flex container around it's child rows, and flex-column makes the children render and stretch vertically rather than horizontally.
Simplest solution is to make the rows 50% height instead...
<body style="height: 100vh;">
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<div class="col-6">
<div class="card">
hello
</div>
</div>
</div>
<div class="row h-100 justify-content-center align-items-center">
<div class="col-4">
<div class="card">
world
</div>
</div>
</div>
</div>
</body>
Demo: https://www.codeply.com/go/7POJtgNaQI
Or, the flexbox method would be to use Bootstrap flex-grow-1 class. Also you don't need the height on the body. Just use min-vh-100 on the container...
<div class="container d-flex flex-column min-vh-100">
<div class="row flex-grow-1 justify-content-center align-items-center">
<div class="col-6">
<div class="card">
hello
</div>
</div>
</div>
<div class="row flex-grow-1 justify-content-center align-items-center">
<div class="col-4">
<div class="card">
world
</div>
</div>
</div>
</div>
https://www.codeply.com/go/n1eL2Jakuo
Always give the height through the inner element height, If I will give the height on container class element, it won't work, so let the container depend on the inner element's height, So try like this.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-3">
<div class="col-12" style="min-height: 180px;">
<div
class="row bg-success position-absolute w-100 h-100 d-flex flex-row justify-content-center align-items-center">
<div class="col-6 pr-2">
<div class="card text-center">
hello
</div>
</div>
<div class="col-6 pl-2">
<div class="card text-center">
world
</div>
</div>
</div>
</div>
</div>
Hope you will understand this tiny mess, and so it would help you.
I have looked at the documentation of boostrap 4.
To center the content horizontally we could use justify-content-center class.
for example
i have 4 sub elements in a div like images and text, i want to center them all at once but its not working using above class. is it achievable?
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="content col-12 col-sm-6 d-flex justify-content-center ">
<div class="photo-wrapper">
<img src="#" alt="">
</div>
<div class="text-wrapper">
<div class="title">
Title
</div>
<div class="position">
Position
</div>
<div class="phones">
Phone
</div>
</div>
</div>
<div class="col-12 col-sm-6 p-0 d-flex justify-content-center justify-content-sm-start">
See profile
</div>
It should look like below image but it doesn't.
Image link
You have to use it in a row class, for instance:
<div class="row justify-content-center">
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
</div>
This question already has answers here:
How to add spacing between columns?
(36 answers)
Closed 4 years ago.
I'm trying to create spacing between my bootstrap columns, but it doesn't seem to be doing it automatically. Is there a specific way or class that I need to be adding to the columns?
<div class="row row_padding">
<div class="col-sm-4 text-center">
<div class="col-sm-11">1</div>
</div>
<div class="col-sm-4 text-center">
<div class="col-sm-11">2</div>
</div>
<div class="col-sm-4 text-center">
<div class="col-sm-11">3</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row text-center bdr">
<div class="col-xs-4 m-1 p-1 w-25 border border-secondary">#1</div>
<div class="col-xs-4 w-25 m-1 p-1 border border-secondary">#2</div>
<div class="col-xs-4 m-1 p-1 w-25 border border-secondary">#3</div>
</div>
</div>
I think col-md-offset or same like that classes will work for you. :-)