How can I horizontally and vertically center all the contents of a jumbotron in bootstrap 3? I have just started learning it.
The following is my code:
HTML
<div class="site-wrapper">
<div class="jumbotron">
<h1>Header</h1>
<p id="subHeader"><small>sub header</small></p>
<div class="container">
<div class="row">
<div class="col-sm-5 col-sm-offset-2">
</div>
<div class="col-sm-3 lefty">
</div>
</div>
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
</div>
</div>
</div>
</div>
</div>
CSS
html, body {
height: 100%;
background-color: #333;
}
.site-wrapper {
width: 100%;
height: 100%;
min-height: 100%;
-webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
box-shadow: inset 0 0 100px rgba(0,0,0,.5);
border-top: 5px solid #5A332B;
}
.jumbotron {
background-color: #ccbb99 !important;
/*background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.9));*/
height: 100%;
margin-bottom: 0;
}
.lefty {
margin: 0;
}
You can use transform: translateY to vertical align the content like this..
.centerme {
position: relative;
top: 50%;
transform: translateY(-50%);
}
http://www.bootply.com/MlRejPA7m2
Use text-center to horizontal align
use the CSS code to achieve this:
.jumbotron{disply:flex;
align-content:center;
justify-items:center;
align-items:center;
}
Related
I have a div that appears when the user hovers over one of the "squares", however when the user scrolls to access the squares furthest away from the bottom, the div that's appearing now looks to be in another position.
I know it appears in the same spot each time, but I'd like to have a fixed position on screen, even when the user scrolls.
JSFiddle: https://jsfiddle.net/6j1nhxy4/
Here's a snippet:
body {
}
.squarehover {
visibility: hidden;
position: absolute;
left: 130%;
top: -0%;
background-color: white;
height: 200px;
width: 200px;
z-index: 999999999999999999999999999999;
-webkit-box-shadow: 0px 4px 13px 3px rgba(0,0,0,0.18);
-moz-box-shadow: 0px 4px 13px 3px rgba(0,0,0,0.18);
box-shadow: 0px 4px 13px 3px rgba(0,0,0,0.18);
}
.hovercontainer {
position: absolute;
left: 50px;
overflow: overlay;
top: -164px;
height: 300px;
/* opacity: 0; */
/* visibility: hidden; */
background-color: none;
z-index: 2;
/* margin-bottom: 100px; */
width: 500px;
}
.squarecontainer {
position: absolute;
display: flex;
width: 100%;
flex-wrap: column-reverse;
flex-direction: column-reverse;
height: 95%;
overflow-y: scroll;
overflow-x: hidden;
z-index: 99999;
margin-left: auto;
margin-right: auto;
}
.square {
transition: 0.3s ease-in-out;
width: 1px;
height: 1px;
/* position: relative; */
/* top: -36%; */
/* margin-bottom: 20px; */
/* float: left; */
/* left: 30.35%; */
color: grey;
background-color: grey;
/* text-align: center; */
/* cursor: pointer; */
/* overflow: auto; */
-webkit-box-shadow: 8px 0px 5.3px -8px black, -8px 0px 5.3px -8px black;
-moz-box-shadow: 8px 0px 05.3px -8px black, -8px 0px 05.3px -8px black;
box-shadow: 8px 0px 5.3px -8px black, -8px 0px 5.3px -8px black;
/* z-index: 99999999; */
/* display: flex; */
/* justify-content: flex-end; */
/* flex-direction: column; */
max-height: auto;
/* overflow-y: scroll; */
/* flex: 1 1 300px; */
/* flex: 1; */
margin-bottom: 20px;
top: 0px;
padding: 0.9em;
margin-right: auto;
margin-left: auto;
/* border: 1px dashed green; */
}
.square:hover .squarehover {
visibility: visible;
z-index: 999999999999999999999999999999;
position: absolute;
margin-left: 50px;
margin-bottom: 50px;
left: 5%;
background-color: none;
}
.squarewrapper {
position: relative;
top: 0;
bottom: 0;
left:0;
display: inline-flex;
width: 50px;
flex-direction: row;
flex-wrap: wrap-reverse; /* ADJUSTED */
height: 650px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="styles/testingcss.css?v=1.0">
</head>
<body>
<div class="squarecontainer" id="squarecontainer">
<div class="square">
<div class="optionhover"></div>
<div class="squarehover">
</div>
</div>
<div class="square">
<div class="optionhover"></div>
<div class="squarehover">
</div>
<
</div>
<div class="square">
<div class="optionhover"></div>
<div class="squarehover">
</div>
</div>
<div class="square">
<div class="optionhover"></div>
<div class="squarehover">
</div>
<
</div>
<div class="square">
<div class="optionhover"></div>
<div class="squarehover">
</div>
</div>
<div class="square">
<div class="optionhover"></div>
<div class="squarehover">
</div>
<
</div>
<div class="square">
<div class="optionhover"></div>
<div class="squarehover">
</div>
</div>
<div class="square">
<div class="optionhover"></div>
<div class="squarehover">
</div>
<
</div>
<div class="square">
<div class="optionhover"></div>
<div class="squarehover">
</div>
</div>
<div class="square">
<div class="optionhover"></div>
<div class="squarehover">
</div>
<
</div>
<div class="square">
<div class="optionhover"></div>
<div class="squarehover">
</div>
</div>
<div class="square">
<div class="optionhover"></div>
<div class="squarehover">
</div>
<
</div>
<div class="square">
<div class="optionhover"></div>
<div class="squarehover">
</div>
</div>
<div class="square">
<div class="optionhover"></div>
<div class="squarehover">
</div>
<
</div>
<div class="square">
<div class="optionhover"></div>
<div class="squarehover">
</div>
</div>
<div class="square">
<div class="optionhover"></div>
<div class="squarehover">
</div>
<
</div>
<div class="square">
<div class="optionhover"></div>
<div class="squarehover">
</div>
</div>
<div class="square">
<div class="optionhover"></div>
<div class="squarehover">
</div>
<
</div>
<div class="square">
<div class="optionhover"></div>
<div class="squarehover">
</div>
</div>
<div class="square">
<div class="optionhover"></div>
<div class="squarehover">
</div>
<
</div>
</div>
</body>
</html>
Welcome to StackOverflow (I can tell you're new). Welcome to the land of Coding Nerds, lel, anyways back to your question:
So, Your code is a little bit confusing for me >.< I'm gonna rewrite it a bit.
If you're like me, you probably don't care what has actually been done. So I'll give you the working code first, then tell you the reason afterwards.
(These two are the same thing)
Firstly, here's the JSFiddle: https://jsfiddle.net/xfh2Ldov/
Secondly, here's the code:
body {
margin: 0;
}
.squarehover {
display: none;
position: fixed;
top: 5vh;
left: 5vw;
background-color: white;
height: 200px;
width: 200px;
z-index: 999999999999999999999999999999;
-webkit-box-shadow: 0px 4px 13px 3px rgba(0, 0, 0, 0.18);
-moz-box-shadow: 0px 4px 13px 3px rgba(0, 0, 0, 0.18);
box-shadow: 0px 4px 13px 3px rgba(0, 0, 0, 0.18);
}
.squarecontainer {
width: 100vw;
height: 95vh;
margin: 0 auto;
}
.square {
width: 28px;
height: 28px;
background-color: grey;
-webkit-box-shadow: 8px 0px 5.3px -8px black, -8px 0px 5.3px -8px black;
-moz-box-shadow: 8px 0px 05.3px -8px black, -8px 0px 05.3px -8px black;
box-shadow: 8px 0px 5.3px -8px black, -8px 0px 5.3px -8px black;
top: 0px;
margin: 10px auto;
}
.square:hover ~ .squarehover {
display: block;
}
<div class="squarecontainer">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="squarehover"></div>
</div>
So basically, I just added position: fixed and simplified your code from "this works but I kinda just put a bunch of letters together and turned it into a large chunk of code" to "this works and I carefully positioned each letter to a really small chunk of code"
Looking at the code you had, you can simply see that it was just code pulled out from your actual coode. So... you may have to add in some bits to make it work how you want it to work
Explanation:
So...
position: fixed allows the div (or any other element) to stay fixed on the webpage even if you scroll. Good Example: https://www.w3schools.com/howto/howto_css_fixed_sidebar.asp
position: absolute allows the div to... well, since you used position: absolute in your code, I can just assume you know what it does.
position: sticky is position fixed and position absolute's baby. It acts like absolute until its about to leave the page view and then gets stuck at the bottom/top. Good Example: https://www.w3schools.com/howto/howto_js_sticky_header.asp
I want the max width of the "circlecontainer" to be 300px.
but when the browser exceeds 1200px in width, I want my 4 child divs (with max width 300px) to stay centered in the browser.
They are currently positioned on the left side.
Here is my html and css.
any tips would be appreciated :)
.getstartedcirclescontainer {
height: 650px;
width: 100%;
display: flex;
text-align: center;
background-image: linear-gradient(#3329ff, white);
}
.circlecontainer {
height: 100%;
width: 24.9%;
padding-top: 175px;
background-color: rgba(0, 0, 0, 0.1);
max-width: 300px;
}
.circle1 {
height: 170px;
width: 170px;
border-radius: 50%;
background-image: linear-gradient(#8680ff, #5a52ff);
margin: 0 auto;
border-style: solid;
border-width: 2px;
border-color: #fff;
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .66);
}
<div class="getstartedcirclescontainer">
<div class="circlecontainer">
<div class="circle1">
</div>
</div>
<div class="circlecontainer">
<div class="circle1">
</div>
</div>
<div class="circlecontainer">
<div class="circle1">
</div>
</div>
<div class="circlecontainer">
<div class="circle1">
</div>
</div>
</div>
Just replace text-align: center; with justify-content: center; for .getstartedcirclescontainer.
HTML:
<div class="getstartedcirclescontainer">
<div class="circlecontainer">
<div class="circle1">
</div>
</div>
<div class="circlecontainer">
<div class="circle1">
</div>
</div>
<div class="circlecontainer">
<div class="circle1">
</div>
</div>
<div class="circlecontainer">
<div class="circle1">
</div>
</div>
</div>
CSS:
.getstartedcirclescontainer {
height: 650px;
width: 100%;
display: flex;
justify-content: center;
background-image: linear-gradient(#3329ff, white);
}
.circlecontainer {
height: 100%;
width: 24.9%;
padding-top: 175px;
background-color: rgba(0, 0, 0, 0.1);
max-width: 300px;
}
.circle1 {
height: 170px;
width: 170px;
border-radius: 50%;
background-image: linear-gradient(#8680ff, #5a52ff);
margin: 0 auto;
border-style: solid;
border-width: 2px;
border-color: #fff;
box-shadow: 0 10px 20px 0 rgba(0,0,0,.66);
}
Hello I'm pretty new to this & I'm trying to figure out how to scale and clip these images to fit into each grid square without having a border...
I also don't know if this is an effective way to set up my images. I'd like to have a different image for each square, but how it's set up now I'd have to make a new .box .inner# for each one. If there is a better way to structure this that'd be really helpful.
.grid {
margin: 0 auto;
width: 240vw;
max-width: 200vh;
height: 240vw;
max-height: 200vh;
font-size: 2rem;
}
.row {
display: flex;
}
.box {
background: red;
margin: 5px;
color: white;
font-weight: bold;
flex: 1 0 auto;
position: relative;
}
.box:after {
content: "";
float: left;
display: block;
padding-top: 100%;
}
.box .inner1 {
background-image: url("https://c1.staticflickr.com/2/1763/29556413048_164120ccb5_b.jpg");
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
text-shadow: 0px 0px 8px rgb(36, 36, 36), 0px 0px 20px rgba(0, 0, 0, 0.9);
}
.box .inner2 {
background-image: url("https://c1.staticflickr.com/1/922/43509246041_043aff0334_h.jpg");
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
text-shadow: 0px 0px 8px rgb(36, 36, 36), 0px 0px 20px rgba(0, 0, 0, 0.9);
}
<div class="grid">
<div class="row">
<div class="box">
<div class="inner1">1</div>
</div>
<div class="box">
<div class="inner1">2</div>
</div>
<div class="box">
<div class="inner1">3</div>
</div>
<div class="box">
<div class="inner1">4</div>
</div>
</div>
<div class="row">
<div class="box">
<div class="inner2">5</div>
</div>
<div class="box">
<div class="inner2">6</div>
</div>
<div class="box">
<div class="inner2">7</div>
</div>
<div class="box">
<div class="inner2">8</div>
</div>
</div>
</div>
You might do it like this:
.grid {
margin: 0 auto;
width: 240vw;
max-width: 200vh;
height: 240vw;
max-height: 200vh;
font-size: 2rem;
}
.row {
display: flex;
}
.box {
background: red;
margin: 5px;
color: white;
font-weight: bold;
flex: 1 0 auto;
position: relative;
}
.box:after {
content: "";
float: left;
display: block;
padding-top: 100%;
}
.box > div {
background-size:cover;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
text-shadow: 0px 0px 8px rgb(36, 36, 36), 0px 0px 20px rgba(0, 0, 0, 0.9);
}
.inner1 {
background-image: url("https://c1.staticflickr.com/2/1763/29556413048_164120ccb5_b.jpg");
}
.inner2 {
background-image: url("https://c1.staticflickr.com/1/922/43509246041_043aff0334_h.jpg");
}
.inner3 {
background-image: url("https://picsum.photos/200/200?3");
}
.inner4 {
background-image: url("https://picsum.photos/200/200?4");
}
.inner5 {
background-image: url("https://picsum.photos/200/300?5");
}
.inner6 {
background-image: url("https://picsum.photos/200/300?6");
}
.inner7 {
background-image: url("https://picsum.photos/200/200?7");
}
.inner8 {
background-image: url("https://picsum.photos/200/300?8");
}
<div class="grid">
<div class="row">
<div class="box">
<div class="inner1">1</div>
</div>
<div class="box">
<div class="inner2">2</div>
</div>
<div class="box">
<div class="inner3">3</div>
</div>
<div class="box">
<div class="inner4">4</div>
</div>
</div>
<div class="row">
<div class="box">
<div class="inner5">5</div>
</div>
<div class="box">
<div class="inner6">6</div>
</div>
<div class="box">
<div class="inner7">7</div>
</div>
<div class="box">
<div class="inner8">8</div>
</div>
</div>
</div>
I am not fully sure if this will fix your problem but maybe take off the margin in your .box class in your css file.
not enough reputation yet so click this link
Instead of having your margin at 5px change it to 0px and see if that helps.
As for the different images you just need to create a new class for each image an link a new image to that class, go back and link it up like you have with the two previous.
When you go full screen and have a width of the screen larger than 1340px, you will see my current issue. The div with the input is being moved down. Why is this? I am trying to get it to stay in position with the other two divs.
body {
background: #212121;
}
.wrapper {
padding: 20px;
max-width: 1270px;
margin: 150px auto;
}
#media (max-width: 1340px) {
.wrapper {
max-width: 400px;
}
}
.content {
height: 100%;
width: 400px;
margin: 10px;
min-width: 300px;
min-height: 500px;
display: inline-block;
background: #424242;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
}
.insert {
display: flex;
}
<div class="wrapper">
<div class="content" id="row1">
<div class="wordInputContainer">
<div class="inputBox">
<input class="insert" type="text" placeholder="Enter Words"></input>
</div>
</div>
</div>
<div class="content" id="row2">
<div class="wordOutputContainer">
<div class="listBox">
<!-- List Elements Go Here -->
<!-- Words Output In Alphabetical Order [A - Z] -->
</div>
</div>
</div>
<div class="content" id="row3">
<div class="wordStatisticContainer">
<div class="wordCount"></div>
<div class="commonLetter"></div>
<div class="commonWord"></div>
<div class="longestWord"></div>
<div class="shortestWord"></div>
</div>
</div>
</div>
Because your divs are display: inline-block, they will use baseline alignment for their inline-level elements, such as text, images and inputs. The default setting is vertical-align: baseline.
So your input element is aligning to the baseline of the other divs.
Just add vertical-align: top to .content.
More here: Why is there a vertical scroll bar if parent and child have the same height?
i have one class row in my web page and in that class i have one division but i want to display that division in center however m not able to done this.
this is my simple row class.
<div class="row">
<div id="left" class="col-md-6">
<div id="leftin" class="col-md-6"></div>
</div>
<div id="right" class="col-md-6"></div>
</div>
and my css
#left
{
height: 150px;
}
#leftin
{
background: url(news_image_04.jpg) no-repeat;
background-size: 100% 100%;
height: 150px;
margin: 0 auto;
}
#right
{
background: url("news_image_03.jpg") no-repeat;
background-size: 100% 100%;
height: 150px;
}
i want to center leftin division under left division
Just make the float none of this.
#leftin {
background: rgba(0, 0, 0, 0) url("news_image_04.jpg") no-repeat scroll 0 0 / 100% 100%;
border: 1px solid black;
float: none; /* make the float none */
height: 150px;
margin: 0 auto;
}
#left
{
height: 150px;
border:1px solid red;
}
#leftin {
background: rgba(0, 0, 0, 0) url("news_image_04.jpg") no-repeat scroll 0 0 / 100% 100%;
border: 1px solid black;
float: none; /* make the float none */
height: 150px;
margin: 0 auto;
}
#right
{
background: url("news_image_03.jpg") no-repeat;
background-size: 100% 100%;
height: 150px;
border:1px solid purple;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div id="left" class="col-md-6">
<div id="leftin" class="col-md-6"></div>
</div>
<div id="right" class="col-md-6"></div>
</div>
For leftin remove class="col-md-6" and add width 50%
<div class="row">
<div id="left" class="col-md-6">
<div id="leftin"></div>
</div>
<div id="right" class="col-md-6"></div>
</div>
#leftin
{
background: url(news_image_04.jpg) no-repeat;
background-size: 100% 100%;
height: 150px;
margin: 0 auto;
width:50%;
}
add class to col-md-offset-3 div with id leftin
like below
<div id="leftin" class="col-md-6 col-md-offset-3"> </div>
Updated to your example
#left
{
height: 150px;
}
#leftin
{
background: url(news_image_04.jpg) no-repeat;
background-size: 100% 100%;
height: 150px;
margin: 0 auto;
}
#right
{
background: url("news_image_03.jpg") no-repeat;
background-size: 100% 100%;
height: 150px;
}
<div class="row">
<div id="left" class="col-md-6">
<div id="leftin" class="col-md-6 col-md-offset-3"></div>
</div>
<div id="right" class="col-md-6"></div>
</div>