I have created 4 columns. The first 3 columns are supposed to contain text vertically oriented. The problem is I am unable to align it. justify-content and align-items are not positioning the text in the center of the column. If you run the code you'll see it's positioned to the right. I want it to be exactly in center.
body{
margin:0;
padding: 0;
height: 100vh;
width: 100vw;
}
.forAll{
height: 100vh;
display: flex;
justfiy-content: center;
align-items: center;
text-align: center;
padding: 0;
}
.verticalOption{
transform: rotate(270deg);
line-height: 10px;
}
.verticalOption a{
text-decoration: none;
color: white;
font-size: 10px;
line-height: 5px;
white-space: nowrap;
}
<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">
<body>
<div class="no-gutters">
<div class="fluid-container d-flex flex-row-reverse">
<div class="container col-xl-9 col-9 col1 forAll bg-primary"></div>
<div class="container col-xl-1 col-1 col2 forAll bg-warning">
<h1 class="verticalOption">Sample Text</h1>
</div>
<div class="container col-xl-1 col-1 col3 forAll bg-danger">
<h1 class="verticalOption">Sample Text</h1>
</div>
<div class="container col-xl-1 col-1 col4 forAll bg-success">
<h1 class="verticalOption">Sample Text</h1>
</div>
</div>
</div>
</body>
I added another flex container to the column, so alignment can be controlled further into the HTML nesting. I also justified the content of the column to center. I also made the h1 display inline-flex to remove all extra white-space.
Here is where all the classes have been added:
<div class="container col-xl-1 col-1 col2 forAll bg-warning d-flex justify-content-center">
<h1 class="verticalOption d-inline-flex m-0">
Sample Text
</h1>
</div>
Demo
body{
margin:0;
padding: 0;
height: 100vh;
width: 100vw;
}
.forAll{
height: 100vh;
display: flex;
justfiy-content: center;
align-items: center;
text-align: center;
padding: 0;
}
.verticalOption{
transform: rotate(270deg);
line-height: 10px;
}
.verticalOption a{
text-decoration: none;
color: white;
font-size: 10px;
line-height: 5px;
width: 200px;
white-space: nowrap;
}
<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">
<body>
<div class="no-gutters">
<div class="fluid-container d-flex flex-row-reverse">
<div class="container col-xl-9 col-9 col1 forAll bg-primary"></div>
<div class="container col-xl-1 col-1 col2 forAll bg-warning d-flex justify-content-center">
<h1 class="verticalOption d-inline-flex m-0">Sample Text</h1>
</div>
<div class="container col-xl-1 col-1 col3 forAll bg-danger d-flex justify-content-center">
<h1 class="verticalOption d-inline-flex m-0">Sample Text</h1>
</div>
<div class="container col-xl-1 col-1 col4 forAll bg-success d-flex justify-content-center">
<h1 class="verticalOption d-inline-flex m-0">Sample Text</h1>
</div>
</div>
</div>
</body>
Just do text-align:center on your h1.
If that doesn't work, its most likely cause you're hardcoding your width to your a tag, and that 200px is probably larger than the container itself.
You just have to add two lines in .verticalOption:
vertical-align:center;
display:table-cell;
and delete justfiy-content: center;
Sorry, I had a typo in justify-content: center which was causing this problem.
Related
There's a left and right margin for the columned-footer which I did not define or at least I can't find the definition now. So, to get rid of it, I did define margin-left and right to be 0 but that had no effect on it.
I don't get why the two columns are so next to each other and far from the screen borders. Also when the address is a longer text, the margin disappears and it sticks to the screen border! How to remove that annoying margin, and how to make it responsive?
.columned-footer {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(70, 66, 66);
height: 8rem;
color: rgb(243, 240, 235);
width: 100%;
}
.footer-container {
display: grid;
gap: 1rem 3rem;
grid-template-columns: 1fr 1fr;
}
.address {
float: right;
display:inline;
}
.tel {
float: left;
display:inline;
}
<footer>
<div class="columned-footer">
<div class="footer-container">
<div class="address">address
<div>
Right around the corner
</div>
</div>
<div class="tel">tel
<div> 8877887788
</div>
</div>
</div>
</div>
</footer>
The side spaces are due to the application of the justify-content style. The spaces at the top are due to the align-items style being applied.
You can use the following footer that I edited using Bootstrap 5. By editing the column widths, you adjust both the left and right spacing and the design is responsive.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Footer</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css">
</head>
<body>
<footer class="bg-dark text-center text-white">
<div class="container p-4 pb-0">
<section class="">
<form action="">
<div class="row d-flex justify-content-center">
<div class="col-md-3">
<div class="form-outline form-white mb-4">
<div><strong>Address</strong></div>London
</div>
</div>
<div class="col-md-5">
<!-- Something -->
</div>
<div class="col-md-3 col-12">
<div class="form-outline form-white mb-4">
<div><strong>Phone</strong></div>+12 345 678 90 12
</div>
</div>
</div>
</form>
</section>
</div>
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
#2021
<a class="text-white" href="https://mdbootstrap.com/">example.com</a>
</div>
</footer>
</body>
</html>
Do, body {margin: 0} (as this value come from browser-default values for various html-elements.
Good Habit
Whenever, you try to make your own website, or project, you must always make default reset in your main css file. This means:
* {margin:0; padding:0; box-sizing:border-box}
When you don't do this, browser's default CSS applies to your various HTML-Elements that you are using, untill you are overriding them specifically, while writing your CSS.
.columned-footer {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(70, 66, 66);
height: 8rem;
color: rgb(243, 240, 235);
width: 100%;
}
.footer-container {
display: grid;
gap: 1rem 3rem;
grid-template-columns: 1fr 1fr;
}
.address {
float: right;
display:inline;
}
body {background: red; margin: 0;}
.tel {
float: left;
display:inline;
}
<footer>
<div class="columned-footer">
<div class="footer-container">
<div class="address">
<div>address</div>
<div>Right around the corner</div>
</div>
<div class="tel">
<div>tel</div>
<div>8877887788</div>
</div>
</div>
</div>
</footer>
This question already has answers here:
How to remove line spacing between HTML heading elements?
(4 answers)
Space before heading larger than space after heading with HTML and CSS
(3 answers)
Closed 1 year ago.
I am having an issue getting text to be centered vertically within a div. I've tried both CSS and bootstrap options, but not having luck. The closest that I get is with using align-items: center, however, the test is still offset from what should be middle.
Current code:
.code-quote {
max-width: 70%;
height: 40px;
background-color: #707793;
display: flex;
align-items: center;
justify-content: center;
}
.code-text {
font-size: 1.5rem;
color: #3BBA9C;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="row">
<div class="col">
<div class="code-quote mx-auto">
<h3 class="code-text">This is my text</h3>
</div>
</div>
</div>
This is what I get:
If I remove the align-items: center, then it's much closer to the top of the element.
The h3 element has a bottom margin by default. Adding margin: 0 might do what you're after:
.code-quote {
max-width: 70%;
height: 40px;
background-color: #707793;
display: flex;
align-items: center;
justify-content: center;
}
.code-text {
font-size: 1.5rem;
color: #3BBA9C;
margin: 0;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="row">
<div class="col">
<div class="code-quote mx-auto">
<h3 class="code-text">This is my text</h3>
</div>
</div>
</div>
Bootstrap provides all the alignment and flex stuff you could ask for. Have a look at the docs.
Also note my adjustment to margin on the heading element.
.code-quote {
max-width: 70%;
height: 40px;
background-color: #707793;
}
.code-text {
font-size: 1.5rem;
margin-bottom: 0;
color: #3BBA9C;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="code-quote mx-auto d-flex flex-column
align-items-center justify-content-center">
<h3 class="code-text">This is my text</h3>
</div>
</div>
</div>
</div>
I am trying to set three images in horizontal but the images always comes out vertically
I have took reference from internet but still I cant solve this problem can someone please help me how to set it horizontally
.categories{
margin: 70px 0;
}
.col-3{
flex-basis: 30%;
min-width: 250px;
margin-bottom: 30px;
}
.col-3 img{
width: 100%;
}
.small-container{
max-width: 1080px;
margin: auto;
padding-left: 25px;
padding-right: 25px;
}
<div class="categories">
<div class="small-container">
<div class="row">
<div class="col-3">
<img src="assets/offer.jpg">
<div class="col-3">
<img src="assets/offer2.jpg">
<div class="col-3">
<img src="assets/offer3.jpg">
</div>
</div>
if you are not using Bootstrap try this code
.categories{
margin: 70px 0;
}
.col-3{
flex-basis: 30%;
min-width: 250px;
margin-bottom: 30px;
}
.col-3 img{
width: 100%;
}
.small-container{
max-width: 1080px;
margin: auto;
padding-left: 25px;
padding-right: 25px;
}
.row{
flex-direction: row!important;
display:flex;
}
<div class="categories">
<div class="small-container">
<div class="row">
<div class="col-3">
<img src="assets/offer.jpg">
</div>
<div class="col-3">
<img src="assets/offer2.jpg">
</div>
<div class="col-3">
<img src="assets/offer3.jpg">
</div>
</div>
</div>
</div>
I list out some changes in your code
Close Every Divisions <div></div>
add row class like this
.row{
flex-direction: row!important;
display:flex;
}
if you are using bootstrap
Close Every Divisions <div></div>
add class in your HTML d-flex flex-row
like this
<div class="categories">
<div class="small-container">
<div class="d-flex flex-row">
<div class="col-3">
<img src="assets/offer.jpg">
</div>
<div class="col-3">
<img src="assets/offer2.jpg">
</div>
<div class="col-3">
<img src="assets/offer3.jpg">
</div>
</div>
</div>
</div>
The problem: I see you have used the flex-basis property. This property belongs to Flexbox and only works with Flex elements.
The solution:
You need to make .row a flex container like so:
.row {
display: flex;
}
By the way, your 2nd and 3rd col-3 don't have an ending tag. Please close them using an ending tag.
Some resources to learn Flexbox:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://flexboxfroggy.com
This question already has answers here:
Order columns through Bootstrap4
(6 answers)
Closed 3 years ago.
I have four items with different sizes in a row.
On extra-large screens everything looks fine. But when I hit large screens (1199.98px / bootstrap 'lg'), I need to re-order my div items.
The third div need to be the last.
I also made a code pen for this
<!-- https://codepen.io/ibrahim-kunushefci/pen/OKJWzq -->
.hotelPr,
.hotelPr2,
.hotelPr3 {
height: 100px;
display: flex;
justify-content: center;
align-items: center;
color: white;
background: #3161a3;
border: 2px solid black;
}
.custom {
height: 100px;
display: flex;
justify-content: center;
align-items: center;
color: white;
background: #bbbbbb;
}
<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="row">
<div class="col-xl-2 col-lg-4">
<div class="hotelPr">
<p>Hotel</p>
</div>
</div>
<div class="col-xl-2 col-lg-4">
<div class="hotelPr2">
<p>Hotel</p>
</div>
</div>
<div class="col-xl-5 col-lg-10">
<div class="custom">
<p>This needs to be the last on small, medium and large screens. But not in extra large</p>
</div>
</div>
<div class="col-xl-3 col-lg-4">
<div class="hotelPr3">
<p>Hotel</p>
</div>
</div>
</div>
Add d-flex to your row container:
Add order-1 order-xl-0 to your the col you need to re-order
You can specify the order of the displayed siblings on a parent flexbox element.
I changed the display of your .row div in a flexbox, and I added an order property to your col-xl-5 div.
.row{
display: flex;
}
.hotelPr,
.hotelPr2,
.hotelPr3 {
height: 100px;
display: flex;
justify-content: center;
align-items: center;
color: white;
background: #3161a3;
border: 2px solid black;
}
.custom {
height: 100px;
display: flex;
justify-content: center;
align-items: center;
color: white;
background: #bbbbbb;
}
.col-xl-5{
order: 1; /* here */
}
<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="row">
<div class="col-xl-2 col-lg-4">
<div class="hotelPr">
<p>Hotel</p>
</div>
</div>
<div class="col-xl-2 col-lg-4">
<div class="hotelPr2">
<p>Hotel</p>
</div>
</div>
<div class="col-xl-5 col-lg-10">
<div class="custom">
<p>This needs to be the last on small, medium and large screens. But not in extra large</p>
</div>
</div>
<div class="col-xl-3 col-lg-4">
<div class="hotelPr3">
<p>Hotel</p>
</div>
</div>
</div>
Why does setting height:100% to the child of a flex item (that is also a flex container) that has flex-grow:1 isn't working as expected?
Setting height: 100% to this child element should make it take the height of it's parent (the flex-grow:1 parent) but it doesn't so I'm clearly wrong.
I want to know what height:100% means in this context. Why doesn't the item take the full height of it's parent with this setting.
This is the HTML (Bootstrap needed)
.theHeader {
background-color: #336B87;
color: white;
padding: 5px 15px;
}
.project-manager {
border-right: 1px solid black;
height: 100%;
}
.flex-content {
display: flex;
flex-flow: column;
height: 100vh;
}
.flex-grow-this {
flex-grow: 1;
}
<div class="container-fluid flex-content">
<header class="container-fluid theHeader">
<h1 class="logo">ToDo Manager</h1>
</header>
<div class="container-fluid row flex-grow-this">
<aside class="col-2 project-manager">
sek
</aside>
<section class="col-10 to-do-list">
</section>
</div>
</div><!--end of main div-->
There are a few issues that are resolved by cleaning up the code, and correctly using the Bootstrap grid.
The layout should simply be container-fluid > row > columns. Don't use nested containers. You don't need the extra CSS for flexbox and height. Bootstrap 4 includes Utility classes for this:
flex-grow-1
d-flex flex-column
vh-100
Just add CSS for the colors/borders/padding...
.theHeader {
background-color: #336B87;
color: white;
padding: 5px 15px;
}
.project-manager {
border-right: 1px solid black;
}
Then the HTML is simply...
<div class="d-flex flex-column vh-100">
<header class="theHeader">
<h1 class="logo">ToDo Manager</h1>
</header>
<div class="container-fluid d-flex flex-column flex-grow-1">
<div class="row flex-grow-1">
<aside class="col-2 project-manager">
aside
</aside>
<section class="col-10 to-do-list">
</section>
</div>
</div>
</div>
Note: adding height:100% to the child col-2 will actually prevent it from filling the height of the parent. Just make sure the parent row is flex-grow-1
Demo: https://www.codeply.com/go/IHAHhF8qEa
Try adding h-100 class to the parent div
<div class="container-fluid flex-content">
<header class="container-fluid theHeader">
<h1 class="logo">ToDo Manager</h1>
</header>
<div class="container-fluid row flex-grow-this h-100" >
<aside class="col-2 project-manager">
sek
</aside>
<section class="col-10 to-do-list">
asd
</section>
</div>
</div>
Is this what you expect?
You have not set margin and padding of body to zero, that's why it is leaving space from top. See the snippet.
body {
padding:0;
margin:0;
}
.theHeader {
background-color: #336B87;
color: white;
padding: 5px 15px;
}
.project-manager {
border-right: 1px solid black;
height: 100%;
}
.flex-content {
display: flex;
flex-flow: column;
height: 100vh;
}
.flex-grow-this {
flex-grow: 1;
}
<div class="container-fluid flex-content">
<header class="container-fluid theHeader">
<h1 class="logo">ToDo Manager</h1>
</header>
<div class="container-fluid row flex-grow-this">
<aside class="col-2 project-manager">
sek
</aside>
<section class="col-10 to-do-list">
</section>
</div>
</div><!--end of main div-->