How to create simple form in dreamviewer?

Forum|Forum|6 years ago
December 27, 2019
1 reply
645 views

I am using the latest version of Dream viewer on macOS. I want to create a form like this https://bbbootstrap.com/snippets/animated-login-form-95290954 . not able to use colors...

This topic has been closed for replies.

Correct answer Nancy OShea

Do you have a Bootstrap 4 document?

Did you copy & paste the HTML and CSS code into your Bootstrap document?

One thing they didn't mention is that you'll need to add Font Awesome Brands library to the <head> of your page for the social icons to work. But otherwise, it works for me.

EDIT: Added Font Aweseome 4 library for social media icons.

<!doctype html>
<html lang="en">
<head>
<title>Bootstrap 4 animated log-in</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!--Font Awesome CSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: linear-gradient(to right, #b92b27, #1565c0)
}
.box {
width: 500px;
padding: 40px;
position: absolute;
top: 50%;
left: 50%;
background: #191919;
;
text-align: center;
transition: 0.25s;
margin-top: 100px
}
.box input[type="text"], .box input[type="password"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 10px 10px;
width: 250px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500
}
.box input[type="text"]:focus, .box input[type="password"]:focus {
width: 300px;
border-color: #2ecc71
}
.box input[type="submit"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer
}
.box input[type="submit"]:hover { background: #2ecc71 }
.forgot { text-decoration: underline }
ul.social-network {
list-style: none;
display: inline;
margin-left: 0 !important;
padding: 0
}
ul.social-network li {
display: inline;
margin: 0 5px
}
.social-network a.icoFacebook:hover { background-color: #3B5998 }
.social-network a.icoTwitter:hover { background-color: #33ccff }
.social-network a.icoGoogle:hover { background-color: #BD3518 }
.social-network a.icoFacebook:hover i, .social-network a.icoTwitter:hover i, .social-network a.icoGoogle:hover i { color: #fff }
a.socialIcon:hover, .socialHoverClass { color: #44BCDD }
.social-circle li a {
display: inline-block;
position: relative;
margin: 0 auto 0 auto;
border-radius: 50%;
text-align: center;
width: 50px;
height: 50px;
font-size: 20px
}
.social-circle li i {
margin: 0;
line-height: 50px;
text-align: center
}
.social-circle li a:hover i, .triggeredHover {
transform: rotate(360deg);
transition: all 0.2s
}
.social-circle i {
color: #fff;
transition: all 0.8s;
transition: all 0.8s
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="card">
<form class="box">
<h1>Login</h1>
<p class="text-muted"> Please enter your login and password!</p>
<input type="text" name="" placeholder="Username">
<input type="password" name="" placeholder="Password">
<a class="forgot text-muted" href="#">Forgot password?</a>
<input type="submit" name="" value="Login" href="#">
<div class="col-md-12">
<ul class="social-network social-circle">
<li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook-f"></i></a></li>
<li><a href="#" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="icoGoogle" title="Google +"><i class="fa fa-google-plus"></i></a></li>
</ul>
</div>
</form>
</div>
</div>
</div>
</div>

<!--First jQuery then Popper then Bootstrap JS--> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

Nancy OShea

Correct answer

Community Expert

Do you have a Bootstrap 4 document?

Did you copy & paste the HTML and CSS code into your Bootstrap document?

One thing they didn't mention is that you'll need to add Font Awesome Brands library to the <head> of your page for the social icons to work. But otherwise, it works for me.

EDIT: Added Font Aweseome 4 library for social media icons.

<!doctype html>
<html lang="en">
<head>
<title>Bootstrap 4 animated log-in</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!--Font Awesome CSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: linear-gradient(to right, #b92b27, #1565c0)
}
.box {
width: 500px;
padding: 40px;
position: absolute;
top: 50%;
left: 50%;
background: #191919;
;
text-align: center;
transition: 0.25s;
margin-top: 100px
}
.box input[type="text"], .box input[type="password"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 10px 10px;
width: 250px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500
}
.box input[type="text"]:focus, .box input[type="password"]:focus {
width: 300px;
border-color: #2ecc71
}
.box input[type="submit"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer
}
.box input[type="submit"]:hover { background: #2ecc71 }
.forgot { text-decoration: underline }
ul.social-network {
list-style: none;
display: inline;
margin-left: 0 !important;
padding: 0
}
ul.social-network li {
display: inline;
margin: 0 5px
}
.social-network a.icoFacebook:hover { background-color: #3B5998 }
.social-network a.icoTwitter:hover { background-color: #33ccff }
.social-network a.icoGoogle:hover { background-color: #BD3518 }
.social-network a.icoFacebook:hover i, .social-network a.icoTwitter:hover i, .social-network a.icoGoogle:hover i { color: #fff }
a.socialIcon:hover, .socialHoverClass { color: #44BCDD }
.social-circle li a {
display: inline-block;
position: relative;
margin: 0 auto 0 auto;
border-radius: 50%;
text-align: center;
width: 50px;
height: 50px;
font-size: 20px
}
.social-circle li i {
margin: 0;
line-height: 50px;
text-align: center
}
.social-circle li a:hover i, .triggeredHover {
transform: rotate(360deg);
transition: all 0.2s
}
.social-circle i {
color: #fff;
transition: all 0.8s;
transition: all 0.8s
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="card">
<form class="box">
<h1>Login</h1>
<p class="text-muted"> Please enter your login and password!</p>
<input type="text" name="" placeholder="Username">
<input type="password" name="" placeholder="Password">
<a class="forgot text-muted" href="#">Forgot password?</a>
<input type="submit" name="" value="Login" href="#">
<div class="col-md-12">
<ul class="social-network social-circle">
<li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook-f"></i></a></li>
<li><a href="#" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="icoGoogle" title="Google +"><i class="fa fa-google-plus"></i></a></li>
</ul>
</div>
</form>
</div>
</div>
</div>
</div>

<!--First jQuery then Popper then Bootstrap JS--> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

Nancy O'Shea— Product User & Community Expert

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded