I am using Bootstrap 4 and have some issues:
Center the input-fiels (inline)
space between these inputs
add a larg textarea under the input-fiels
This is what it looks like currently:
Here is my HTML code:
body {
background: url(https://images.pexels.com/photos/50631/pexels-photo-50631.jpeg?cs=srgb&dl=aerial-bridge-buildings-50631.jpg&fm=jpg);
background-size: cover;
background-position: center;
font-family: Lato;
color: white;
}
html {
height: 100%;
}
#content {
text-align: center;
padding-top: 25%;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
}
h1 {
font-weight: 700;
font-size: 5em;
}
hr {
width: 400px;
border-top: 1px solid #f8f8f8;
border-bottom: 1px solidrgba(0, 0, 0, 0.2);
}
input.transparent-input {
background-color: transparent;
border: 2px solid white;
}
.form-control::placeholder {
color: white;
}
/* Chrome, Firefox, Opera*/
:-ms-input-placeholder.form-control {
color: white;
}
/* Internet Explorer*/
.form-control::-ms-input-placeholder {
color: white;
}
/* Microsoft Edge */
.no-padding {
padding-right: 50px;
padding-bottom: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Zenuni Company</title>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<div class="col-12">
<div id="content">
<h1>Contact Page</h1>
<h3>Contact Us</h3>
<hr>
</div>
<form class="form-inline">
<div class="form-group">
<input class="form-control transparent-input" type="text" name="name" placeholder="Name" required>
</div>
<div class="form-group">
<input class="form-control transparent-input" type="text" name="surname" placeholder="Vorname" required>
</div>
</form>
<button type="submit" class="btn btn-default">Send invitation</button>
</div>
</div>
</div>
I would appreciate your help!
You can do it in two ways.
the first one is using grid system, this will work in this way:
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
The second way that i think will fit better, I'm find this way more helpful when talking about responsive center.
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
Hope i could help :)
I just edited your code and added to jsfiddle
your form should be like this to achieve center inputs with margins :
<form class="form-inline justify-content-center">
<div class="form-group space-right">
<input class="form-control transparent-input" type="text" name="name" placeholder="Name" required>
</div>
<div class="form-group space-right">
<input class="form-control transparent-input" type="text" name="surname" placeholder="Vorname" required>
</div>
<button type="submit" class="btn btn-default my-2 my-sm-0">Send invitation</button>
</form>
with this line of css :
.space-right {margin-right:10px;}
You do not need to use justify-content-center for the row because col-12 takes the whole row.
Instead of form-inline, use two form-row classes inside the form - one for the two inputs and the other for the button. And use a col for each of the inputs should you like to have them side by side on all kinds of devices. Otherwise, use col-* classes as you normally would, for instance, use col-12 col-sm-6 so that they takes the whole width of its parent on mobile but half on other devices. And then use a col class for the button.
You may also swap .row for .form-row, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts. - Bootstrap-4
Restrict the width of the form only. In order to do so, use custom CSS as you have done so. If you do so, use mx-auto for the form to center it horizontally inside its container.
Should you like to have the button in the center of its parent, use text-center for its parent.
https://codepen.io/anon/pen/KBWXME
One more thing, I guess you have used align-items-center to align all the content vertically in the center. If so, use h-100 for all the parents of the container. Otherwise, align-items-center won't work.
body {
background: url(https://images.pexels.com/photos/50631/pexels-photo-50631.jpeg?cs=srgb&dl=aerial-bridge-buildings-50631.jpg&fm=jpg);
background-size: cover;
background-position: center;
font-family: Lato;
color: white;
}
html,
body {
height: 100%;
}
#content {
text-align: center;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
}
h1 {
font-weight: 700;
font-size: 5em;
}
hr {
width: 400px;
border-top: 1px solid #f8f8f8;
border-bottom: 1px solidrgba(0, 0, 0, 0.2);
}
input.transparent-input {
background-color: transparent;
border: 2px solid white;
}
.form-control::placeholder {
color: white;
}
/* Chrome, Firefox, Opera*/
:-ms-input-placeholder.form-control {
color: white;
}
/* Internet Explorer*/
.form-control::-ms-input-placeholder {
color: white;
}
.mw-500px {
max-width: 500px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.css" rel="stylesheet" />
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="col">
<div id="content">
<h1>Contact Page</h1>
<h3>Contact Us</h3>
<hr>
</div>
<form class="mw-500px mx-auto">
<div class="form-row">
<div class="col-12 col-sm-6 form-group">
<input class="form-control transparent-input" type="text" name="name" placeholder="Name" required>
</div>
<div class="col form-group">
<input class="form-control transparent-input" type="text" name="surname" placeholder="Vorname" required>
</div>
</div>
<div class="form-row ">
<div class="col-12 col-sm-6 form-group">
<button type="submit" class="btn btn-default">
Send invitation</button>
</div>
</div>
</form>
</div>
</div>
</div>
Your input fields are not centered because they're not part of your #content element. If you move the first </div> tag after <div id="content"> below your submit button, that should take care of that issue.
I'm not sure what exactly you're looking for in terms of space between your input fields. You could just use the </br> tag to make a space, but that will probably be a little ugly. I'd recommend going into your CSS code, selecting .form-inline and messing around with the padding until you're satisfied with how it looks
I don't know exactly what you're trying to do, maybe I could help if you sketched a mock-up of what you're thinking of.
Hope this is useful!
Related
I want users to be able to hover over a button within a different div, which then changed the background-color of the div below.
My current code is as followed:
.delSeperator button:hover+.linkField {
background-color: rgba(255, 0, 0, 0.2);
}
.seperator {
color: #000000;
background-color: #e4e8eb;
min-height: 0.5rem;
margin: 1rem 0rem 1rem 0rem;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div id="delSeperator_0" class="row delSeperator">
<div class="col-xs-10 mb-0">
<div class='seperator vertical-center'></div>
</div>
<div class="col-xs-1 mb-0"><button type="button" class="btn btn-danger" onclick="delField('linkField', this.closest('.row')); delField('delSeperator', this.closest('.row'));"><i class="fa fa-minus" aria-hidden="true"></i></button></div>
</div>
<div class="row linkField" id="linkField_0">
<div class="col-xs-6 mb-0">
<div class="form-group"><label for="txt_link[0]["bezeichnung"]" class="">Bezeichnung</label><input id="txt_link[0]["bezeichnung"]" type="text" maxlength="200" name="link[0]["bezeichnung"]" class="form-control"></div>
</div>
<div class="col-xs-6 mb-0">
<div class="form-group"><label for="txt_link[0]["url"]" class="">URL</label><input id="txt_link[0]["url"]" type="url" maxlength="500" name="link[0]["url"]" class="form-control"></div>
</div>
</div>
Changing the Hover-CSS to
.delSeperator:hover + .linkField {
background-color: rgba(255,0,0,0.2);
}
works so that when you hover over the whole .delSeperator, the .linkField gets the background property.
When I change the code to
.delSeperator button:hover {
background-color: rgba(255,0,0,0.2);
}
it works so that when you hover over the button, the button gets the background property.
But I can't seem to combine these two. Is there any way to achieve what I need?
You can workaround this issue by playing with the pointer-events property
i got this to work with the following CSS:
.delSeperator:hover + .linkField {
background-color: rgba(255,0,0,0.2);
}
.delSeperator {
pointer-events: none
}
.delSeperator button {
pointer-events: initial
}
I Currently am designing a login page in mvc and I want to seperate certain elements so they can be styled correctly. However when I create div's inside other divs they do not stick to the outer div's height and therefore move all around the page. I will give you a sample with my code.
In my Layout.cshtml page I've got
<div class="login-box-outer">
<div class="container">
<div class="login-box">
<div class="login-logo">
<a href="example" </b> Example</a>
</div>
#RenderBody()
</div>
</div>
</div>
In my register page I have the following
.form-control{
height: 35px;
}
.login-logo{
display: none;
}
.login-box, .register-box {
width: 500px;
margin: 2% auto;
}
.text-danger {
color: #a94442;
}
.login-page, .register-page {
background: url('https://example.jpg');
background-position: center;
background-size: cover;
}
##media(max-width: 400px)
{
.login-box, .register-box {
width: 300px;
margin: 4% auto;
}
}
.intl-tel-input{
display: block !important;
}
.join-section__shadow {
left:10%;
bottom:35%;
position: absolute;
padding: 96px 0 48px;
}
.join-content-layout {
background-color: transparent;
padding: 0;
max-width: 1110px;
margin: 0 auto;
position: relative;
color:white;
}
.join-xlarge {
font-size: 38px;
line-height: 44px;
font-weight: 800;
text-shadow: 0 0 3px rgba(0,0,0,.3);
}
.join-medium {
font-size: 24px;
margin-top: 10px;
font-weight: 500;
text-shadow: 0 0 1px rgba(0,0,0,.5);
}
.content-frame.purple2-bg {
background: #fff;
}
.container-fluid.support-block {
padding-top: 30px;
padding-bottom: 30px;
}
.support-block a {
text-decoration: none;
}
</style>
still in the register page here is my html
<div class="container-fluid support-block">
<div class="join-section__shadow">
<div class="join-content-layout">
<div class="col-md-12 col-sm-12">
<h1 class="join-xlarge join-headline join-h1">
Example
</h1>
<h3 class="join-medium join-h3">
Example
</h3>
</div>
</div>
</div>
<div class="col-xs-10 col-xs-push-10 noPadding" style="bottom:100px;">
<form asp-controller="Account" asp-action="Register" asp-route-returnurl="#ViewBag.ReturnUrl" method="post" role="form">
#Html.AntiForgeryToken()
<div class="box box-primary col-xs-12 boxShadow" style="border:none;margin-bottom:10px;">
<div class="form-group has-feedback col-xs-12 noPadding">
<label>Name</label>
<input asp-for="#Model.FullName" value="#Model.FullName" class="form-control" />
<span asp-validation-for="#Model.FullName" class="text-danger"></span>
</div>
</form>
</div>
</div>
<div class="container-fluid">
<div class="content-frame purple2-bg">
<div class="container-fluid support-block">
<div class="row icon-row">
<div class="col-md-4">
<i class="fa fa-tag" style="font-size:155px;" aria-hidden="true"></i>
<div class="text-holder">
<strong class="name">Example</strong><br />
Example
</div>
</div>
<div class="col-md-4">
<i class="fa fa-thumbs-up" style="font-size:155px;" aria-hidden="true"></i>
<div class="text-holder">
<strong class="name">Example</strong><br />
Example
</div>
</div>
<div class="col-md-4">
<i class="fa fa-money" style="font-size:155px;" aria-hidden="true"></i>
<div class="text-holder">
<strong class="name">Example</strong><br />
Example
</div>
</div>
</div>
</div>
</div>
</div>
However, under the form I want a complete new section but the content from the form and everything else seems to just float about on the page! Anybody know why this is happening?
Here is how it looks in the browser
This container should be taking up the full width of the screen but it's just floating around. Any idea as to why this is happening?
In the below HTML code I am trying to achieve color change on current active anchor means once any tab is clicked it should show color(#ffd96b) as its background, it is working fine for Chrome but not working for IE and Mozilla. Not getting why it is happening may be I have missed something, Any help is much appreciated.
.tileMargin {
margin: 5%;
}
.deviceName {
width: 60%;
float: left;
padding: 5px;
border-radius: 5px 0px 0px 5px;
border: 1px solid #ccc;
background-color: #f2f2f2;
font-size: 0.75em;
}
.deviceCount {
width: 40%;
float: left;
background-color: #f2f2f2;
border-radius: 5px;
border: 1px solid #ccc;
text-align: center;
margin-left: -3px;
}
.deviceCount >div {
width: 33.33%;
float: left;
border-left: 1px solid #ccc;
}
.deviceCount input,
button {
width: 100%;
float: left;
padding: 3px 0px;
background-color: #f2f2f2;
border: none;
text-align: center;
appearance: button;
border-radius: 5px;
}
.devicesSmall a:hover div,
.devicesSmall a:hover input,
.devicesSmall a:hover button,
.devicesSmall a:active div,
.devicesSmall a:active input,
.devicesSmall a:active button,
.devicesSmall a:focus div,
.devicesSmall a:focus input,
.devicesSmall a:focus button {
background-color: #ffd96b !important;
}
<!Doctype HTML>
<html lang="en">
<head>
<Title>asd sada asfa</Title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="tileMargin">
<div class="devicesSmall col-lg-3 col-md-3 col-sm-6 col-xs-6 ">
<a href="#">
<div class="deviceName"><span>Mobile</span>
</div>
<div class="deviceCount">
<div>
<button onclick="addProduct('mobile');">+</button>
</div>
<div>
<input id="mobile" type="text" value="1" disabled>
</div>
<div>
<button onclick="removeProduct('mobile');">-</button>
</div>
</div>
</a>
</div>
<div class="devicesSmall col-lg-3 col-md-3 col-sm-6 col-xs-6">
<a href="#">
<div class="deviceName"><span>Landline</span>
</div>
<div class="deviceCount">
<div>
<button onclick="addProduct('landline');">+</button>
</div>
<div>
<input id="landline" type="text" value="1" disabled>
</div>
<div>
<button onclick="removeProduct('landline');">-</button>
</div>
</div>
</a>
</div>
<div class="devicesSmall col-lg-3 col-md-3 col-sm-6 col-xs-6">
<a href="#">
<div class="deviceName"><span>Internet</span>
</div>
<div class="deviceCount">
<div>
<button onclick="addProduct('internet');">+</button>
</div>
<div>
<input id="internet" type="text" value="0" disabled>
</div>
<div>
<button onclick="removeProduct('internet');">-</button>
</div>
</div>
</a>
</div>
<div class="devicesSmall col-lg-3 col-md-3 col-sm-6 col-xs-6">
<a href="#">
<div class="deviceName"><span>IPTV</span>
</div>
<div class="deviceCount">
<div>
<button onclick="addProduct('Iptv');">+</button>
</div>
<div>
<input id="Iptv" type="text" value="1" disabled>
</div>
<div>
<button onclick="removeProduct('Iptv');">-</button>
</div>
</div>
</a>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</body>
</html>
It is not that it isnt working in FF or IE, :active is applied at the moment when you click the element and DOES NOT preserve it. The styling is removed once you release the click.
Also after you click the link Chrome keeps the focus on the link whereas FF and IE does not. That is why the :focus styling is removed after you click it.
To make a link active, add a class active in CSS and add/remove the classes according to which link was clicked using JS.
First of all, Thanks to you all for looking into this issue...
I have found the issue in my code that was creating problem and causing :active and :focus not work as expected. Actually I had placed the form element like input and button under anchor tag, which is not correct implementation according to w3c standards.
Now I have removed all the button and input from inside that "a" tag and its working fine now.
This question already has answers here:
How to make this Header/Content/Footer layout using CSS?
(7 answers)
Closed 6 years ago.
I want to set header fixed at the top and footer at the botom of the page.
Image:
index page code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="custom.css" rel="stylesheet" type="text/css">
</head>
<body class="bodyy">
<div class="container-fluid form">
<div class="row">
<div class="col-md-12 llg">
<img src="image/my-site-planner-logo.png" class="logo" />
</div>
</div>
</div> <!--container ends-->
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<form method="post" action="" class="formt">
<div class="form-group">
<input class="form-control" required="required" placeholder="Enter Email" id="name" name="name" type="email"/>
<br />
<input class="form-control" id="email" required="required" placeholder="Enter Password" name="password" type="password"/>
<br />
<button class="btn btn-primary bbt" name="submit-" type="submit">
Sign Me In
</button>
<p class="text-center ttr">
Want to Register a New User ?
</p>
<button class="btn btn-primary bbt" name="submit-" type="submit">
<a href="sign-up.html" class="tbb">
Create Account
</a>
</button>
</div>
</form>
</div>
<div class="col-md-3">
</div>
</div> <!--row ends-->
</div> <!--container ends-->
<div class="footer form">
<h4>
© 2016 My Site Planner | All Rights Reserve
</h4>
</div>
</div>
</div> <!--container ends-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<body oncontextmenu="return false">
</body>
</html>
css code:
body{
margin: 0 auto;
background-image: url("white-background-1.jpg");
background-size: 100px 100px,
background-repeat: no-repeat;
}
.ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.container{
width: 400px;
height: 400px;
text-align: center;
background-color: rgba(0, 255, 255, 0.5);
border-radius: 4px;
margin: 0 auto;
margin-top: 150px;
}
.footer .form {
margin-top: 100px;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
I tried to change the code by .footer .form as position absolute and header is scrolling. Please can someone help me?
As I can see you are using Bootstrap you could use one of its templates.
Take a look at this one:
http://getbootstrap.com/examples/sticky-footer-navbar/
Another point about your code, its not suposed to be a good practice modify directly the container class since its a Bootstrap basics.
Hope this helps,
Regards
.footer .form {
margin-top: 100px;
position:fixed;
bottom:0px;
}
replace this code to fix your footer
I'm not an expert but you could try using:
Position: fixed;
Or
Position: bottom;
Hope this helps!
I know this has been answered 100 times, but none of the existing solutions seem to work for me.
I want to center an input field horizontally in a div. Why is horizontal centering such a pain?!?!? The parent div may change in size based on screen size, so margin percentages don't work.
HTML
<div class="select" id="avatar">
<h4>Please enter your name.</h4>
<!-- Object i want to center-->
<div class="input-group">
<input type="text" class="form-control text-center" id="playerName">
</div>
<h4>And Select Your Ship</h4>
<img class="avatars" id="ship1" src="images/spaceship1.png">
<img class="avatars" id="ship2" src="images/spaceship2.png">
<img class="avatars" id="ship3" src="images/spaceship3.png">
<img class="avatars" id="ship4" src="images/spaceship4.png">
<button class="btn" id="submitPlayer">Submit</button>
</div>
parents CSS
.select {
background-color: white;
z-index: 200;
padding: 0px 15px 0px 15px;
text-align: center;
font-family: 'Krona One', sans-serif;
border: medium dashed green;
margin-left: 25%;
margin-right: 25%;
}
I also want to center this one, and I assume it will be the same solution, but it has no parent, besides body.
<div class="input-group">
<input class="text-center" type="text" id="word">
</div>
Why not use Bootstrap's center-block class..
<div class="input-group center-block">
<input class="center-block" type="text" id="word">
</div>
http://www.bootply.com/sTboTk5CvU
inputs and button are like img, you can display them as block and use margin:auto; so they stand alone and in the middle without using 100% of the width/space avalaible :
.select {
background-color: white;
z-index: 200;
padding: 0px 15px 0px 15px;
text-align: center;
font-family: 'Krona One', sans-serif;
border: medium dashed green;
margin-left: 25%;
margin-right: 25%;
}
button.btn#submitPlayer {
display: block;
margin: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="select" id="avatar">
<h4>Please enter your name.</h4>
<!-- Object i want to center-->
<div class="input-group">
<input type="text" class="form-control text-center" id="playerName">
</div>
<h4>And Select Your Ship</h4>
<img class="avatars" id="ship1" src="images/spaceship1.png">
<img class="avatars" id="ship2" src="images/spaceship2.png">
<img class="avatars" id="ship3" src="images/spaceship3.png">
<img class="avatars" id="ship4" src="images/spaceship4.png">
<button class="btn" id="submitPlayer">Submit</button>
</div>
and you may do the same with input :
.input-group,
input#word.text-center{
display: block;
margin: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group">
<input class="text-center" type="text" id="word">
</div>