I am new to HTML, CSS and bootstrap and trying to make a page something like this.
..............................................................................................................................................................
Header
..............................................................................................................................................................
And after this Header I need a rectangle in my page with some text and a button.
Specification I need to follow for this rectangle are as follows:
Here is my code:
.rectangle {
width: 632px;
height: 269px;
border-radius: 4px;
border: solid 1px #e0e0e0;
background-color: #ffffff;
text-align: center;
}
.Find-your-number {
width: 468px;
height: 23px;
font-size: 18px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.28;
letter-spacing: -0.03px;
text-align: center;
color: #333333;
}
.btn-bg {
width: 303px;
height: 48px;
border-radius: 4px;
background-color: #f9c940;
}
.open {
width: 291px;
height: 54px;
font-size: 49px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.1;
letter-spacing: -0.8px;
text-align: center;
color: #333333;
padding-top: 5%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12 pt-md-5 text-center">
<div class="rectangle">
<p class="open">Open here</p>
<p class="find-your-number">Find your number</p>
<button class="btn-bg">Start</button>
</div>
</div>
</div>
</div>
This rectangle should be at 250px from top and 196px from side. How can I get it?
As of now I am getting rectangle towards a bit left side of page.
Also, text inside rectangle also not taking proper font size and alignment as mentioned in CSS. How can I correct it?
with or without pingendo.com you should try this (to all devices)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="theme.css" type="text/css">
</head>
<body>
<div class="py-5">
<div class="container m-0 px-0 col-12" style="border-top: 3px dotted blue;border-bottom: 3px dotted blue;">
<div class="row px-0 py-5 border-top border-bottom shadow-sm">
<div class="col-md-12 text-center col-12 col-xs-12 col-sm-12 col-lg-12 col xl-12">generic header for : xs sm md lg and xl</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
To achieve what from the picture that you shared, you can do it manually with pure CSS or by using bootstrap. I chose the pure CSS approach, so for this cause you will need to use flexbox and the related attributes with it such align-items and justify-contents and set them to center to achieve the center align.
There are some other approaches to achieve this like using table and vertical-align and some other.
.container{
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.box {
width: 632px;
height: 269px;
padding: 30px 20px;
border-radius: 4px;
border: solid 1px #e0e0e0;
background-color: #ffffff;
text-align: center;
display: flex;
display: ms-flexbox;
align-items: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.box > .box-title {
font-size: 49px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.1;
letter-spacing: -0.8px;
text-align: center;
color: #333333;
padding-top: 5%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.box > .box-description {
font-size: 18px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.28;
letter-spacing: -0.03px;
color: #333333;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.box > .box-action > button {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
width: 303px;
height: 48px;
font-size: 20px;
border-radius: 4px;
background-color: #f9c940;
}
<!DOCTYPE html>
<html lang="en">
<body>
<div class="container">
<div class="box">
<div class="box-title">
Check-in here
</div>
<div class="box-description">
<p>Find your reservation and collect your room keys</p>
</div>
<div class="box-action">
<button>start</button>
</div>
</div>
</div>
</body>
</html>
EDIT:
Implementation with bootstrap
In this approach, you just need to visit bootstrap website and then add the related CDNs to your project, then you have to just add d-flex, align-items-center, and justify-content-center to the main container of your page.
.box > .box-title {
font-size: 49px;
}
.box > .box-description {
font-size: 18px;
}
.box > .box-action > button {
width: 303px;
height: 48px;
font-size: 20px;
background-color: #f9c940;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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">
</head>
<body>
<div class="container my-5 d-flex align-items-center justify-content-center">
<div class="box border rounded p-5 text-center">
<div class="box-title">
Check-in here
</div>
<div class="box-description">
<p>Find your reservation and collect your room keys</p>
</div>
<div class="box-action">
<button>start</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Related
I have 3 rows with text and on hover I want the text on the right side to change and the background color of that text as well. For some reason I can't make it work.
HTML
<div class="container">
<div class="row">
<div class="content">string</div>
<div class="description">A string is a series of characters.</div>
</div>
<div class="row">
<div class="content">number</div>
<div class="description">A number can be written with,or without decimals.</div>
</div>
<div class="row">
<div class="content">boolean</div>
<div class="description">A boolean can be either true or false.</div>
</div>
</div>
JSFiddle link:
see here
The result that I want to get to is this one: enter image description here
After viewing your image description, I edited your code a little bit. Hope it will fulfill your expectation.
I just add a span tag in your description.
and added/modified some CSS.
Change details:
body {
display: flex;
justify-content: center;
}
.container {
font-family: 'Red Hat Mono', monospace;
display: flex;
justify-content: center;
position: relative;
flex-direction: column;
width: 600px;
height: 600px;
}
.row {
display: flex;
background-color: rgb(178, 236, 205);
padding: 10px 0px 10px 15px;
border-radius: 50px;
margin: 15px 15px 15px 20px;
}
.content {
font-size: 1.2em;
flex:1;
font-weight: bold;
}
.description {
display: flex;
justify-content: right;
font-family: 'Lato', 'sans-serif';
color: rgb(189, 132, 27);
font-size: 0.95em;
margin-right: 20px;
font-weight: bold;
}
.row:hover .description{
background-color: rgb(80, 231, 150);
color: red;
margin-right: 0px;
margin-top: -9px;
margin-bottom: -9px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
font-size: 0.95em;
font-family: 'Lato', 'sans-serif';
}
.row:hover .description > span{
margin-top: 9px;
margin-right: 20px;
margin-left: 10px
}
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Mono:wght#400;600&display=swap" rel="stylesheet">
<title>Tema 10</title>
<body>
<div class="container">
<div class="row">
<div class="content">string</div>
<div class="description">
<span>A string is a series of characters.</span>
</div>
</div>
<div class="row">
<div class="content">number</div>
<div class="description">
<span>A number can be written with,or without decimals.</span>
</div>
</div>
<div class="row">
<div class="content">boolean</div>
<div class="description">
<span>A boolean can be either true or false.</span>
</div>
</div>
</div>
</body>
</html>
Please update CSS to. You are setting font size 0 that is causing an issue
.row:hover .description {
color: rgb(0, 31, 150);
background-color: rgb(0, 1, 0);
}
My button is in line with the flex-box,
Elements should be stacked on top of one another in a column, right?
I am making a timer, so there is a row, in which there are two columns.
In one column there is an image and in the other, there is a heading, a flexbox(which contains four rectangles), and a button.
Now, I want my button to be below my timer, but it is in line with it.
HTML
<!DOCTYPE html>
<html lang="en">
<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>Stiks</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="../css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container hero">
<div class="row">
<div class="portal col-md-12 col-lg-5">
<img class="img-fluid" src="../assets/download (10).jpg">
</div>
<div class="col-md-12 col-lg-7 align-self-center">
<h2><b>Timer</b></h2>
<div class="d-inline-flex flex-nowrap">
<div class="rect">
<span class="days"></span>
<p>Days</p>
</div>
<div class="rect">
<span class="hours"></span>
<p>Hours</p>
</div>
<div class="rect">
<span class="minutes"></span>
<p>Minutes</p>
</div>
<div class="rect">
<span class="seconds"></span>
<p>Seconds</p>
</div>
</div>
<button class="btn-main" type="button">Start</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
CSS
:root{
--yellow: #fff189;
--grey: #444444;
--off-white: #e6e6e6;
--blue: #047db1;
--pink: #6b093d;
--green: #ccf0a9;
--black: #000000;
}
h1{
font-size: 4.2em;
}
h2{
font-size: 1.75em;
}
*{
font-family: 'Poppins', sans-serif;
}
.section{
padding-right: 5vw;
padding-left: 5vw;
padding-bottom: 3em;
padding-top: 3em;
}
/*------------------------------------hero section------------------------------------*/
.hero{
min-height: 100vh;
background-color: var(--yellow);
}
.timer{
margin-bottom: 1em;
}
.rect{
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-right: 0.5em;
padding: 0.2em;
border-radius: 0.5em;
text-align: center;
color: var(--off-white);
background-color: var(--blue);
height: 6.5em;
width: 8em;
min-width: 0;
}
.rect h1{
font-size: 2.25em;
font-weight: 700;
}
.btn-main{
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.25);
border-style: none;
font-size: 1.1em;
border-radius: 00.5em;
background-color: var(--pink);
color: var(--off-white);
padding-top: 0.6em;
padding-bottom: 0.6em;
padding-right: 1.8em;
padding-left: 1.8em;
}
.btn-main:hover{
background-color: var(--grey);
}
Add display: block; css in .btn-main class.
visit : https://jsfiddle.net/ktv1frwu/
I tested your code according to browser's width it changes to inline and sometime below those boxes.
Fix it by adding
display : block in your .btn-main class
.btn-main{
display:block;
}
In my list some of words are with two lines, but second line jumps under the icons bottom, how can i keep next to the icon both lines? I'm doing this with bootstrap and choosed to use list-inline class maybe its enough to do with columns this list or what will be the best way to do or fix this list?
This is how i need it:
JSFIDDLE
.container {
padding: 15px 40px;
border-radius: 6px;
border: solid 1px #e5e5e5;
background-color: #ffffff;
font-size: 16px;
line-height: normal;
color: #333333;
}
.list-inline {
margin: 0;
}
.icon-europe {
width: 24px;
height: 24px;
background-image: url("https://i.ibb.co/xhRsmPz/europe.png");
background-repeat: no-repeat;
display: inline-block;
vertical-align: middle;
margin-right: 4px;
}
.icon-warranty {
width: 24px;
height: 24px;
background-image: url("https://i.ibb.co/VLy7ssd/warranty.png");
background-repeat: no-repeat;
display: inline-block;
vertical-align: middle;
margin-right: 4px;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Inline list</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<ul class="list-inline">
<li class="list-inline-item"><span class="icon-europe"></span> Dirbame visoje<br> Europoje
</li>
<li class="list-inline-item"><span class="icon-warranty"></span> 2 metų garantija
</li>
</ul>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
The easiest way is to use flexbox and align-items:
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: flex;
align-items: center;
margin-bottom: 10px;
font-family: arial;
}
.icon {
width: 24px;
height: 24px;
margin-right: 8px;
}
.icon-europe {
background: url("https://i.ibb.co/xhRsmPz/europe.png") no-repeat;
}
.icon-warranty {
background: url("https://i.ibb.co/VLy7ssd/warranty.png") no-repeat;
}
<ul>
<li><span class="icon icon-europe"></span>Dirbame visoje<br />Europoje</li>
<li><span class="icon icon-warranty"></span>2 metų garantija</li>
</ul>
You can change your list code to below
<li class="list-inline-item"><span class="icon-europe" style="float:left"></span> Dirbame visoje<br> Europoje
</li>
You can add images in html like this:
HTML:
<div class="container">
<div class="row">
<div class="col-lg-12">
<ul class="d-flex">
<li class="d-flex pr-4 align-items-center">
<img class="icon" src="https://i.ibb.co/xhRsmPz/europe.png" alt="">
<div>Dirbame visoje</br>Europoje</div>
</li>
<li class="d-flex pr-4 align-items-center">
<img class="icon" src="https://i.ibb.co/VLy7ssd/warranty.png" alt="">
<div>2 metų garantija</div>
</li>
</ul>
</div>
</div>
CSS:
.container {
padding: 15px 40px;
border-radius: 6px;
border: solid 1px #e5e5e5;
background-color: #ffffff;
font-size: 16px;
line-height: normal;
color: #333333;
}
.icon{
width: 24px;
height: 24px;
margin-right: 10px;
}
body{
background-image: url(https://www.ucalgary.ca/mediacentre/files/mediacentre/aerials_011a7179_fe.jpg);
background-size: cover;
background-repeat: no-repeat;
font-family: 'Numans', sans-serif;
}
html, body{
height: 100%;
}
.container{
height: 100%;
align-content: center;
overflow: hidden;
}
.card{
height: 370px;
margin: 10% auto auto 30%;
width: 450px;
background-color: rgba(0,0,0,0.50);
border-radius: 10px;
}
.card-header h3{
color: white;
text-align: center;
padding-top: 40px;
font-size: 30px;
}
.card-header h4{
color: white;
text-align: center;
padding-top: 50px;
font-size: 20px;
}
.login_btn{
color: black;
background-color: #FFC312;
border-color: #FFC312;
width:100px;
padding: 12px;
border-radius: 5px;
margin-left: 180px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
font-family: 'Numans', sans-serif;
text-decoration: none;
}
.login_btn:hover{
color:black;
background-color: white;
border-color: white;
.card{
height: calc(100vh - 20%);
margin: 10% 15% 0 15%;
}
<!DOCTYPE html>
<html>
<head>
<title>University of Calgary Scholarship</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="selectionPage.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
<body>
<div class = "container">
<div class="d-flex justify-content-center h-100">
<div class = "card">
<div class ="card-header">
<h3>University of Calgary Scholarship Page</h3>
<h4>Please Select One</h4>
</div>
<div class = "card-body">
<div class = "form-group">
<form action="studentLogin.html">
<input type = "submit" value = "Student" class= "btn float-left login_btn">
</form>
<form action="adminLogin.html">
<input type = "submit" value = "Administrator" class= "btn float-right login_btn">
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have adjusted some of my code from my previous post but now when I shrink the width of my window, the contents do not adjust to the screen width. The container at a screen size of small or tablet and xs or mobile, half of it will not be visible. I have added some code at the end of my css file according to what another user has suggested. And it makes it better but still does not completely work at the small and xs level.
Thank You
.........................................................................
Add this property and it should works as expected :
html, body {
height: 100%;
}
See this fiddle
Also, the image you use is very large (6144 x 4096 pixels) so it can take some times to load. You can resize it to max 2000 px of width and compress it with tools like TinyPng :
https://tinypng.com/
EDIT
You can use flexproperties to handle the alignment of the .card
.d-flex {
display: flex;
justify-content: center;
align-items: center;
}
See this fiddle
Based on #Vincent G solution, I changed the following lines for your latest comment:
.card{
height: calc(100vh - 20%);
margin: 10% 15% 0 15%;
}
See the fiddle
Browser support for calc and viewport
EDIT 1
In your updated code snippet you don't need my above mentioned code snippet.
Basically, you break the responsiveness by using fixed height of your class .card and pretty much the same mistake on your input fields. (margin-left and width)
See the fiddle (I marked the changes in the fiddle!)
I hope this will solve your problem :)
Hi this is the standard HTML and CSS code!
body{
background-image: url(https://www.ucalgary.ca/mediacentre/files/mediacentre/aerials_011a7179_fe.jpg);
background-size: cover;
background-repeat: no-repeat;
font-family: 'Numans', sans-serif;
}
html, body{
height: 100%;
}
.container{
height: 100%;
align-content: center;
overflow: hidden;
}
.card{
height: 370px;
margin: 10% auto ;
width: 450px;
background-color: rgba(0,0,0,0.50);
border-radius: 10px;
}
.card-header h3{
color: #000;
text-align: center;
padding-top: 40px;
font-size: 30px;
}
.card-header h4{
color: #000;
text-align: center;
padding-top: 50px;
font-size: 20px;
}
.login_btn{
color: black;
background-color: #FFC312 !important;
border-color: #FFC312;
padding: 12px;
border-radius: 5px;
margin-left: 0;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
font-family: 'Numans', sans-serif;
text-decoration: none;
}
.login_btn:hover{
color:black;
background-color: white;
border-color: white;
.card{
height: calc(100vh - 20%);
margin: 10% 15% 0 15%;
}
<!DOCTYPE html>
<html>
<head>
<title>University of Calgary Scholarship</title>
<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">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class = "container">
<div class="d-flex justify-content-center h-100">
<div class = "card">
<div class ="card-header">
<h3>University of Calgary Scholarship Page</h3>
<h4>Please Select One</h4>
</div>
<div class = "card-body">
<div class = "form-group text-center">
<form action="studentLogin.html">
<input type = "submit" value = "Student" class= "btn login_btn"> <form>
<form action="adminLogin.html">
<input type = "submit" value = "Administrator" class= "btn login_btn">
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I've made div with bootstrap class attribute center-block and I want to align it vertically but nothing is working only manually adding margin to the div. Any tips how to accomplish this ?
Css code:
body {
margin-bottom: 31px;
font-family: 'Lato', sans-serif;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 31px;
border-top: 1px solid white;
}
.menu{
width: 642px;
height: 642px;
border: 1px solid white;
}
.menu > p{
width: 300px;
height: 300px;
margin: 10px;
float: left;
color: white;
text-align: center;
font-size: 28px;
text-shadow: 2px 2px 5px black;
}
Html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<style>
body{
background-image: url(img/landscape1.jpg);
background-size: cover;
}
</style>
<title>Website</title>
</head>
<body>
<div class="container-fluid">
<div class="page-header">
<h1 style="color: white;">Logo</h1>
</div>
<div class="center-block menu">
<p id="">demo1</p>
<p id="">demo2</p>
<p id="">demo3</p>
<p id="">demo4</p>
</div>
</div>
<footer class="footer">
<div class="container col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p class="text-muted">Company all rights reserved © </p>
</div>
</footer>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
The div with the class center-block cant be vertically aligned because its not inside an element that with a greater height. "container-fluid" doesnt have a height, so it will be as high as its content inside (the center-block div). The same goes for container-fluid's parents (body and html tags). So you need to wrap it in a container that is higher. I've made a pen to illustrate.
http://codepen.io/ugreen/pen/GjBWWZ
The magic part is this guy:
.flex {
display: flex;
align-items: center;
height: 100%;
border: 1px solid red;
}
body {
margin-bottom: 31px;
font-family: 'Lato', sans-serif;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 31px;
border-top: 1px solid white;
}
.menu{
width: 640px;
height: 640px;
}
.menu li > p{
width: 200px;
color: white;
text-align: left;
font-size: 28px;
text-shadow: 2px 2px 5px black;
}
ul {
list-style-type: none;
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="page-header">
<h1 style="color: white;">Text Logo</h1>
</div>
<ul>
<div class="center-block menu">
<li> <p id="1">demo1</p></li>
<li> <p id="2">demo2</p></li>
<li> <p id="3">demo3</p></li>
<li><p id="4">demo4</p><li>
</div>
</ul>
</div>
<footer class="footer">
<div class="container col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p class="text-muted">Company all rights reserved © </p>
</div>
</footer>
</body>
</html>