My page is very simple : it is made of a navbar, and two panels.
I am trying to get my navbar fixed on top, and the two panels vertically centered (for any screen size or browsers).
These two panels are placed in a container.
I have been unsuccessful in vertically centering the container so far.
Here is what I have now :
Here is what I want to achieve :
Here is my code :
html {
overflow: hidden;
height: 100%;
}
body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.panel-default1 {
padding-top: 8px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
height: 400px;
width: 100%;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.panel-default2 {
padding-top: 10px;
padding-right: -15px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
height: 400px;
width: 100%;
margin: 0 auto;
position: relative;
}
<body>
<nav class="navbar transparent navbar-static-top">
<div class="navbar-header">
<p>Welcome</p>
</div>
</nav>
<div class="container d-flex h-100">
<div class="row justify-content-center align-self-center">
<!-- 1st panel -->
<div class="col-md-4 mb-4" id="panel">
<div class="panel panel-default1">
<div class="panel-body">
<p>Blablabla</p>
</div>
<!-- panel body -->
</div>
<!-- panel-default1-->
</div>
<!-- col md 4 -->
<!-- 2nd panel -->
<div class="col-md-8 col-md-8" id="panel2">
<div class="panel panel-default2">
<div class="panel-body">
<p>Blablabla</p>
</div>
<!-- panel-body -->
</div>
<!-- panel-default2-->
</div>
<!-- col md 8 -->
</div>
<!-- row -->
</div>
<!-- container-->
</body>
As you can see from the HTML, I have tried to use Bootstrap's flexbox on container and row, without success.
Please advise a working solution to vertically center my container, except the navbar.
From what I notice, you want an element to be centered, but not using all 12 columns, so you can use mx-auto to center an element that has less than 12 columns. You also said
.noMX {
background-color: red;
}
.withMX {
background-color: green;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="noMX col-8">awts</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="withMX col-8 mx-auto">awts</div>
</div>
</div>
To center it vertically you can try this. First add height: 100% to the body and html, since I noticed you used h-100 meaning you want 100% height on the container. You also need to wrap the panels into another div so that the element that will be centered is the div wrapper rather than the panels. I also removed md in the columns so that you can the result in smaller viewport
html,
body {
height: 100%;
}
.wrapper {
background-color: Red;
}
#panel {
background-color: blue;
}
#panel2 {
background-color: green;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar transparent navbar-static-top">
<div class="navbar-header">
<p>Welcome</p>
</div>
</nav>
<div class="wrapper container h-100">
<div class="row d-flex align-items-center h-100">
<div class="col-12">
<div class="row">
<div class="col-4 mb-4" id="panel">
<div class="panel panel-default1">
<div class="panel-body">
<p>Blablabla</p>
</div>
</div>
</div>
<div class="col-8" id="panel2">
<div class="panel panel-default2">
<div class="panel-body">
<p>Blablabla</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You should be able to just use col-4 and col-8 for columns inside row inside container
see here
see example
Edit:
to align them vertically you should be able to just add align-items-center class on a row, without additional css.
Updated example
try this
html {
overflow: hidden;
height: 100%;
}
body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.panel-default1 {
padding-top: 8px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
height: 400px;
width: 100%;
overflow: hidden;
margin: 0 auto;
position: relative;
background:red;
}
.panel-default2 {
padding-top: 10px;
padding-right: -15px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
height: 400px;
width: 100%;
margin: 0 auto;
position: relative;
background:green;
}
.navbar-header{
float: none;
padding: 20px;
background:black;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
<nav class="navbar transparent navbar-static-top text-center">
<div class="navbar-header">
<p>Welcome</p>
</div>
</nav>
<div class="container">
<div class="row">
<!-- 1st panel -->
<div class="col-md-4 mb-4" id="panel">
<div class="panel panel-default1">
<div class="panel-body">
<p>Blablabla</p>
</div>
<!-- panel body -->
</div>
<!-- panel-default1-->
</div>
<!-- col md 4 -->
<!-- 2nd panel -->
<div class="col-md-8 col-md-8" id="panel2">
<div class="panel panel-default2">
<div class="panel-body">
<p>Blablabla</p>
</div>
<!-- panel-body -->
</div>
<!-- panel-default2-->
</div>
<!-- col md 8 -->
</div>
<!-- row -->
</div>
<!-- container-->
</body>
Related
I have a bit of a problem with doing 2 div (.profile-spotify, .profile-games) at same size with .profile-card and .profile-details or centering them. I tried with justify center, margin auto and others but it didn't work.
Here's the markup structure:
<div class="user-content">
<div class="grid sm:grid-cols-1 lg:grid-cols-2 mt-3">
<!-- Profile Card -->
<div class="profile-card text-center m-auto">
...
</div>
<!-- End of Profile Card -->
<!-- Profile Details -->
<div class="profile-details text-white m-auto mt-3 lg:mt-0">
...
</div>
<!-- End of Profile Details -->
</div>
<!-- Spotify Activity -->
<div class="profile-spotify mt-5 mb-5 m-auto">
<div class="profile-spotify-header">
...
</div>
<div class="profile-spotify-content">
...
</div>
</div>
<!-- End of Spotify Activity -->
<!-- Game Activity -->
<div class="profile-games mt-5 mb-5 m-auto">
<div class="profile-game">
...
</div>
</div>
<!-- End of Game Activity -->
</div>
And here's the relevant CSS:
...
.user-content {
position: relative;
display: inline-block;
left: 50%;
transform: translateX(-50%);
}
.user-content .profile-card {
background: #1f2325;
width: 15rem;
}
.user-content .profile-spotify, .user-content .profile-games {
background: #1f2325;
max-width: 30rem;
}
.user-content .profile-spotify-header {
background: #21d363;
padding: 0.5rem 1rem 0.5rem 1rem;
}
...
https://codepen.io/wYonut/pen/eYrQoRr
I want them like this:
Use display:flex; on parent and flex:1; on children.
.flex-container {
display: flex;
background-color: DodgerBlue;
}
.flex-container>div {
flex: 1;
background-color: #f1f1f1;
margin: 10px;
text-align: center;
font-size: 30px;
}
<div class="flex-container">
<div>
first <br> content
</div>
<div>second content</div>
</div>
I'm trying to get the div with the product name amount price and total to the top of the div it's nestled in, but changing the position isn't working. Stuff like vertical alignment didn't work for me either. I made a screenshot of the page, the buttons are in the right place, it's just the sort of table that has to move to the top of the screen. This has to contain all kinds of products later on.
this is the html:
<div class="checkout">
<div class="container-fluid" style="position: absolute; bottom: 0;">
<!-- Added products overview-->
<div class="checkoutTable">
<div class="row">
<div class="col-4">Product Name</div>
<div class="col-2">Amount</div>
<div class="col-3">Price</div>
<div class="col-3 ">Total</div>
</div>
<hr style="background-color:white;">
<div class="row">
<div class="col-4">Product Name</div>
<div class="col-2">Amount</div>
<div class="col-3">Price</div>
<div class="col-3 ">Total</div>
</div>
</div>
<!-- -->
<!-- Buttons -->
<div class="row">
<a class="checkoutBtn" href="">
<div class="col-12 checkoutBtn">
<i class="fa fa-shopping-cart"></i> Checkout
</div>
</a>
</div>
<div class="row">
<a class="addDiscountBtn" href="#">
<div class="col-6-xs addDiscountBtn">
% Add Discount
</div>
</a>
<a class="cancelBtn" href="#">
<div class="col-6-xs cancelBtn">
<i class="fa fa-ban"></i> Cancel
</div>
</a>
</div>
</div>
</div>
This is the css:
.checkout{
background-color: #22303e;
height: calc(100vh - 50px);
color: white;
font-size: 13px;
}
.checkoutBtn{
background-color: #0090e3; height: 50px;
text-align: center;
line-height: 50px
}
.addDiscountBtn{
background-color:#f8ac59; height: 50px;
text-align: center;
line-height: 50px
}
.cancelBtn{
background-color: #ed5565; height: 50px;
text-align: center;
line-height: 50px
}
a.checkoutBtn{
width: 100%;
color: white;
}
a.addDiscountBtn{
width: 50%;
color: white;
}
a.cancelBtn{
width: 50%;
color: white;
}
a:hover{
text-decoration: none;
opacity: 0.9;
}
.checkoutTable{
vertical-align:top;
}
For container-fluid, do not use any inline styling like you are using style="position: absolute; bottom: 0;"
Example
<div class="checkout">
<div class="container-fluid"></div>
You are placing your div
<div class="checkoutTable">
in parent div
<div class="container-fluid" style="position: absolute; bottom: 0;">
And here the style= "bottom: 0;" that is making everything in it to go at the bottom of the page.
<div class="checkoutTable">
<!--content-->
</div>
<div class="container-fluid" style="position: absolute; bottom: 0;">
<!--content-->
</div>
there is more than one solution for this issue
you can add position like
.Class {
position : absolute;
top : 0;
}
.Class {
position :fixed;
top : 0;
}
I have been trying to align content in a div to the bottom (which seems only to work with absolute) AND at the same time to position the content in the center.
In my code below, the problem refers to the images, which are either centered and at top OR left and bottom, but never both.
I have tried different CSS approaches as well as just using an old fashioned table for around the image, but nothing seems to work to get both at the same time.
How to position the images center and at bottom?
jsfiddle
.x-offer:nth-of-type(1) {
background-color: #c5d7d9;
}
.x-offer:nth-of-type(2) {
background-color: #e6e0cf;
}
.x-offer:nth-of-type(3) {
background-color: #debfb5;
}
.x-offer {
padding: 20px 0 0 0 !important;
}
.x-offer.nails > .flex-column {
width: 90%;
}
.x-offer > .flex-column {
width: 100%;
}
.x-offer > .flex-column > div:nth-of-type(2) {
bottom: 0px;
width: 75%;
margin: 0px auto;
position: absolute;
bottom: 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
<div class="container">
<div class="row" style="height: 250px;">
<!-- STYLING -->
<div class="col-sm text-center d-flex align-items-top justify-content-center x-offer styling">
<div class="flex-column justify-content-center" style="border: 1px solid green;">
<div style="border: 1px solid;">
STYLING<p> </p>
</div>
<div style="border: 1px solid;">
<img src="http://davids134.sg-host.com/wp-content/uploads/2020/08/service1.gif" style="max-height: 50%; max-width: 100%">
</div>
</div>
</div>
<!-- HAIR -->
<div class="col-sm text-center d-flex align-items-top justify-content-center x-offer hair">
<div class="flex-column" style="border: 1px solid green;">
<div style="border: 1px solid;">
HAIR<p> </p>
</div>
<div style="border: 1px solid;">
<img src="http://davids134.sg-host.com/wp-content/uploads/2020/08/service3.gif" style="max-height: 50%; max-width: 100%">
</div>
</div>
</div>
<!-- NAILS -->
<div class="col-sm text-center d-flex align-items-top justify-content-center x-offer nails ">
<div class="flex-column" style="border: 1px solid green;">
<div style="border: 1px solid;">
NAILS<p> </p>
</div>
<div style="border: 1px solid;">
<img src="http://davids134.sg-host.com/wp-content/uploads/2020/08/service2.gif" style="max-height: 50%; max-width: 100%">
</div>
</div>
</div>
</div> </div>
Modify style of your .x-offer > .flex-column > div:nth-of-type(2)
Add left and right parameters, and set them to 0:
.x-offer > .flex-column > div:nth-of-type(2) {
bottom: 0px;
width: 75%;
margin: 0px auto;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
Here's fiddle
You should add the classes d-flex and align-items-center to the divs that currently have the flex-column class applied:
<div class="d-flex align-items-center flex-column" style="border: 1px solid green;">
You can see more about flex in bootstrap 4 documentation here: https://getbootstrap.com/docs/4.0/utilities/flex/
There are 2 things you need (I mark them in code).
A flex container
An item, which expands within this container (to push last element down)
.x-offer {
border: 1px solid green;
height: 250px;
}
.image-bottom-wrapper {
text-align: center;
}
.image-bottom-wrapper img {
max-width: 100px;
max-height: 50px;
}
<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 col-4 x-offer styling d-flex flex-column"><!-- [1] -->
<div class="headline">
STYLING
</div>
<div class="flex-grow-1 text"><!-- [2] -->
Some Text Here...
</div>
<div class="image-bottom-wrapper">
<img src="https://dummyimage.com/300x200/CCC/000" />
</div>
</div>
</div>
</div>
(Please see image below for illustration)
I build my responsive website using Bootstrap 4. I want to make an alert box displaying at bottom of page and overlaying above every elements on every size of webpage.
This alert box is displayed when click on each box (In picture: Gray areas containing "Some text") and fade out after 2 seconds.
I need help about how to overlay alert box even if the size of window it is.
I also attach some code of information.
Thanks in advance.
Picture
HTML
<div class="container-fluid">
<div class="row">
<div class="card-group">
<div class="col-sm-6 col-md-5 col-lg-4 col-xl-3">
<div class="card">
<div class="card-body">
<h5>.....Some Text.....</h5>
</div>
</div>
</div>
<div class="col-sm-6 col-md-5 col-lg-4 col-xl-3">
<div class="card">
<div class="card-body">
<h5>.....Some Text.....</h5>
</div>
</div>
</div>
(More div blocks here)
</div>
</div>
</div>
CSS
.card{
width: 14rem;
height: 8rem;
background-color: #e2e2e2;
transition: 0.3s;
color: #333333;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.card:hover{
background-color: rgba(71, 172, 255,1);
cursor: pointer;
}
.card-body{
display: flex;
align-items: center;
text-align: center;
justify-content: center
}
See code snippet,
If you wanted to create your own alert design you could also do this in a similar way.
If you need the alert box in the same place every time have a look at the css for .alert-fixed replace alert alert-primary in the code snippet with .alert-fixed.
Hope this helps.
.card{
width: 14rem;
height: 8rem;
background-color: #e2e2e2;
transition: 0.3s;
color: #333333;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.card:hover{
background-color: rgba(71, 172, 255,1);
cursor: pointer;
}
.card-body{
display: flex;
align-items: center;
text-align: center;
justify-content: center
}
.alert-fixed
{
position: absolute;
right: 0;
bottom: 0;
left: 0;
width: 100%;
padding-left: 50px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row">
<div class="card-group">
<div class="col-sm-6 col-md-5 col-lg-4 col-xl-3">
<div class="card">
<div class="card-body">
<h5>.....Some Text.....</h5>
</div>
</div>
</div>
<div class="col-sm-6 col-md-5 col-lg-4 col-xl-3">
<div class="card">
<div class="card-body">
<h5>.....Some Text.....</h5>
</div>
</div>
</div>
</div>
</div>
<div class="alert alert-primary" role="alert">
This is a primary alert—check it out!
</div>
</div>
Adding this might help
.alert-box{
position: fixed;
bottom: 10px;
width: 80vw;
}
position: fixed; fixes the position, bottom: 10px will offset the alertbox 10px from bottom and width: 80vw; will keep it's width according to the viewport size.
I'm trying to develop a pretty simple site using twitter bootstrap. When adding content I noticed that all of the content with the container class was being shifted a bit to the left with the addition of a child div of the row class with image content. The padding/margin/width of the container div doesn't seem to be changing so I'm really not sure what's affecting this change.
The HTML and CSS is below and the issue can be seen if you comment out the divs with classes .row1 and .row2. Doing so returns the content of the container class to its regular location.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>
<body>
<!-- Header -->
<div id="header">
<div class="container">
<div id="leftHeader">
<h1>Title</h1>
<h1 class="subtitle"><small>Subtitle</small></h1>
</div>
<div id="rightHeader">
<h3>Declaration</h3>
</div>
</div>
</div>
<!-- Navbar -->
<nav class="navbar navbar-default">
<div class="container">
<!-- Navbar Header -->
<div class="navbar-header">
<a class="navbar-brand" href="index.htm">Company Name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Services</li>
<li>Pricing</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
<!-- Content -->
<div class="container">
<div class="row row1">
<div class="col-md-12">
<div id="countercont">
<div id="counter"><div>0</div></div><div id="introRest">Counter text</div>
<div id="edge">Other side</div>
</div>
</div>
</div>
<div class="row row2">
<div class="col-md-4 img1">
<img src="computer.jpg" />
</div>
<div class="col-md-4 img2">
<img src="lightbulb.jpg" />
</div>
<div class="col-md-4 img3">
<img src="dome.jpg" />
</div>
</div>
<div class="row row3">
<div class="col-md-6">
<h1>Title</h1>
<p>Text</p>
</div>
<div class="col-md-6">
<h1>Title 2</h1>
<p>Other Text</p>
</div>
</div>
</div>
</body>
</html>
CSS
.subtitle {
margin-top: -15px;
}
#leftHeader {
float: left;
}
#rightHeader {
float: right;
}
#rightHeader h3 {
font-size: 28px;
padding-top: 40px;
}
#counter {
border-style: solid;
border-width: 1px;
width: 150px;
display: block;
margin-left: auto;
margin-right: auto;
}
#counter div {
font-size: 50px;
width: 82px;
margin: 0 auto;
}
#introRest, #edge{
font-size: 30px;
display: none;
}
#edge {
float: right;
font-style: italic;
}
#countercont {
height: 80px;
}
.img1, .img2, .img3 {
text-align: center;
}
.img1 img, .img2 img, .img3 img {
border: 2px solid black;
height: 240px;
width: 240px;
}
.row2 {
padding-top: 10px;
padding-bottom: 30px;
}
.row3 ul {
padding-left: 20px;
margin-top: 20px;
margin-bottom: 20px;
}
.row3 li {
font-size: 13px;
}
Did you try adding a max-width to your images?
.img1 img, .img2 img, .img3 img {
border: 2px solid black;
height: 240px;
width: 240px;
max-width:100%; /* Added these */
max-height:100%; /* Added these */
}
Example on Bootply