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>
Related
I want to have my the picture.png to be exactly on the very left of the title "ribbon", and the text to be centred about the ribbon (regardless of the presence of the picture). I've been struggling with CSS and flex boxes for a lot of time trying to achieve just this effect. Here I'm using some bootstrap classes, but .heading is my class.
That being said, is it actually possible to do all this alignment without using flexbox, but something more natural and simple? Such as maybe something from CSS1, without all those flex boxes?
.heading {
background-color: rgba(15, 156, 199, 0.829);
height: 5%;
display: flex;
text-align: center;
justify-content: space-between;
/* not helpful of course */
}
/* Here's what I'm trying to achieve. I made this by artificially adding the following CSS code: */
.name {
margin-right: 31%;
}
<div class="container-sm">
<div class="card-body">
<div class="heading">
<img class="rounded img-fluid" src="picture.png" alt="...">
<div class="name">
<h4>Web server monitoring and maintenance.</h4>
<div>Monitoring and upgrades.</div>
</div>
</div>
</div>
</div>
Of course I want this to be naturally centred, not artificially.
TL;DR. Make your .name also a flex container.
Please see the code snippet below. I didn't edit the HTML except the placeholder image. The main CSS change is in .name class to make it flex container and have its content vertically centered. Also, its parent .heading styles are a little adjusted to make it work properly.
.heading {
background-color: rgba(15, 156, 199, 0.829);
height: 5%;
display: flex;
text-align: center;
}
img {
width: 50px;
height: 50px;
flex: 0;
}
.name {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h4, div {
margin: 0;
padding: 0;
line-height: 1;
}
<div class="container-sm">
<div class="card-body">
<div class="heading">
<img class="rounded img-fluid" src="https://picsum.photos/50" alt="...">
<div class="name">
<h4>Web server monitoring and maintenance.</h4>
<div>Monitoring and upgrades.</div>
</div>
</div>
</div>
</div>
Bootstrap relies on Flexbox for the alignment and layouts. So it will be odd to avoid using it.
Here is a code snippet that will help you achieve what you want to do.
Helpful links:
Bootstrap Flexbox: Flexbox utility classes
CSS Flexbox: MDN flexbox docs
.heading {
background-color: rgba(15, 156, 199, 0.829);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container-sm">
<div class="card-body">
<div class="heading d-flex text-center">
<img class="rounded img-fluid" src="picture.png" alt="...">
<div class="name flex-grow-1">
<h4>Web server monitoring and maintenance.</h4>
<p>Monitoring and upgrades.</p>
</div>
</div>
</div>
</div>
Note: Bootstrap is all about pre-made components and utility classes so try to avoid writing custom CSS as much as possible. Another downside of this is that you're repeating yourself and making Bootstrap useless in the manner you're using it.
using flexbox
img,.image {
height:50px;
}
.box {
display: flex;
align-items: center;
width: 100%;
text-align: center;
height:50px;
}
.text-wrapper{
background-color: rgba(15, 156, 199, 0.829);
width:100%;
height:50px;
display: flex;
flex-direction: column;
justify-content: center;
}
.container{
padding:5px;
}
*{
margin:0px;
padding:0px;
}
<div class="container">
<div class="box">
<div class="image">
<img src="https://placekitten.com/640/360" alt="...">
</div>
<div class="text-wrapper">
<div class="text">
<h4>Web server monitoring and maintenance.</h4>
<p>Monitoring and upgrades.</p>
</div>
</div>
</div>
</div>
with Bootstrap and its layout system is it possible to have rows in columns to produce this type of result :
I tried this but without success :
<div className="col-lg-3 col-12">
<div className="row">
<displaySquare />
</div>
<div className="row">
<displaySquare />
</div>
<div className="row">
<displaySquare />
</div>
</div>
<div className="col-lg-9 col-12">
<div className="row">
<displayBigSquare />
</div>
<div className="row">
<displaySquare />
<displaySquare />
</div>
</div>
ty
UPDATE (23/08/2021):
it's actually better with grid. I dropped bootstrap and I use GRID instead which allows to define all the properties related to CSS grids (GRID explanations on https://developer.mozilla.org/fr/docs/Web/CSS/grid).
HTML code:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Griiiiid!</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<h1 class="centre">Welcome</h1>
<div class="container">
<div class="items item1">1</div>
<div class="items item2">2</div>
<div class="items item3">3</div>
<div class="items item4">4</div>
<div class="items item5">5</div>
<div class="items item6">6</div>
</div>
</body>
</html>
CSS code:
*,
::before,
::after {
box-sizing: border-box;
}
body {
background-color: #333;
margin: 0;
padding: 0;
font-family: Georgia, "Times New Roman", Times, serif;
}
h1 {
color: salmon;
}
.centre {
text-align: center;
}
.container {
padding: 30px ;
width: 100%;
background-color: #eee;
margin: 30px auto;
display: grid;
grid-template-rows: 150px;
grid-template-columns: repeat (3, 150px);
grid-auto-rows: 150px;
gap: 30px;
}
.items {
padding: 20px;
font-size: 30px;
font-family: sans-serif;
}
.item1 {
background-color: lightcoral;
}
.item2 {
grid-row: 1/3;
grid-column: 2/4;
background-color: lightgreen;
}
.item3 {
background-color: lime;
}
.item4 {
background-color: chocolate;
}
.item5 {
background-color: darkgoldenrod;
}
.item6 {
background-color: darkseagreen;
}
Result:
As of Bootstrap v5.0.2, the answer is no. The issue is that in order to have the orange rectangle in your example span multiple "rows", you need to use CSS Grid styling, and that is not yet part of Bootstrap.
However, very soon in v5.1.0, they are including an opt-in option to replace the flexbox-based grid system they currently use with a CSS Grid-based one instead. It will probably have some growing pains, and I'm not sure that they have support for doing what you're trying to do here just yet, but at least CSS Grid will be there to try out. There will be documentation added for how to enable the option and how to use it once that version goes live, but you can read through the feature's PR in the meantime.
If you are wanting that exact layout, then you would have to do it in two rows:
The margin bottom of the square need to equal double your gutter
.square {
width: 100%;
padding-top: 100%;
background: orange;
margin-bottom: 30px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-4">
<div class="square"></div>
<div class="square"></div>
</div>
<div class="col-8">
<div class="square"></div>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="square"></div>
</div>
<div class="col-4">
<div class="square"></div>
</div>
<div class="col-4">
<div class="square"></div>
</div>
</div>
</div>
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>
How can I place two divs next to each other using css. I tried a few things on my own, but not sure where my mistakes are. Thanks!
css:
.posts{
display: flex;
flex-direction: row;
}
.posts .col-md-6{
padding-top: 14px;
display: flex;
flex-direction: column;
}
.posts .searchandlists{
padding-top: 14px;
display: flex;
flex-direction: column;
/*float: right;*/
/*padding-bottom: 14px;*/
}
.list-group{
max-height: 300px;
margin-bottom: 10px;
overflow:scroll;
-webkit-overflow-scrolling: touch;
}
html:
#extends('layouts.master')
#section('content')
<section class="row posts">
<div class="col-md-6 col-md-3-offset></div>
<div class="container searchandlists"></div>
</section>
It's required to have one .container as the parent before you can use .row (https://getbootstrap.com/docs/4.3/layout/overview/#containers).
col-md-3-offset is not in bootstrap4. Use .offset-md-3 instead (https://getbootstrap.com/docs/4.3/layout/grid/#offsetting-columns).
I will personally use bootstrap grid system as the structure and customize the elements inside. I would not write custom styles on existing bootstrap elements, like what you did on .post .col-md-6, unless you know what you're doing.
I will prefer to have a layout like this:
<section class="posts">
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3"></div>
<div class="col-md-3">
<div class="searchandlists"></div>
</div>
</div>
</div>
</section>
try using this ,approve answer if helps
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
.box1{width: 400px; height: 400px; background-color: red; float: left;}
.box2{width: 400px; height: 400px; background-color: blue; float: left; margin-left: 50px;}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
I have gotten into the habit of using tables a lot.
<section class="row posts">
<tr>
<td><div class="col-md-6 col-md-3-offset></div></td>
<td><div class="container searchandlists"></div></td>
</tr>
Even with separate div elements, the two items should show up side by side. Hope it helps and cheers!
I used the styling from this thread to make a progress bar fill in the empty space in a div (only other item is a button).
The problem is now that align-items: center doesn't vertically center the progress bar. I tried using align-content: center on the child too, with no effect.
Here's the code in case you didn't open the link
.wrapper {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
height: 5em;
background: #ccc;
}
.wrapper > .left
{
background: #fcc;
}
.wrapper > .right
{
background: #ccf;
flex: 1;
}
Markup:
<div class="wrapper">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
Can someone tell me what I'm doing wrong? Thanks in advance
This is how it looks:
I guess you can do the following to get it right:
There is a margin coming for the .progress element- first you can nullify it:
.wrapper > .left > .progress {
margin: 0;
}
Give 100% height for wrapper
I also removed height: 10vh for the container of wrapper to finish things up.
See revised fiddle here and snippet below:
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.wrapper {
display: flex;
align-items: center;
width: 100%;
background: #ccc;
height: 100%;
}
.wrapper > .left {
background: #fcc;
flex: 1;
}
.wrapper > .right {
background: #ccf;
}
.wrapper > .left > .progress {
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-s-6 col-s-offset-3" style="background:purple; position:relative; border-radius:10px;">
<div class="wrapper">
<div class="left">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" style="width:35%">
</div>
</div>
</div>
<div class="right">
<button type="button" aside-menu-toggle="menu-1" class="btn btn-sm btn-default">Меню</button>
</div>
</div>
</div>
</div>
</div>
Let me know your feedback on this. Thanks!
A flex container will enable a flex context only to its direct children. Hence, your "progress-bar" div is out of reach. Likewise, your purple background bar is before flex container (wrapper), so don't expect it's content to be centered either. You can check this guide.
Check this code:
<div class="container">
<div class="row">
<div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-s-6 col-s-offset-3" style="background:purple; height:10vh; position:relative; border-radius:10px;">
<div class="wrapper">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
</div>
</div>
</div>
Pen based on your code here
Try adding
align-items: center;
justify-content: center;
to your .wrapper class.
Here is a good article on FlexBox positioning:
https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/