I am creating a Login form but I am in trouble while adding logo above the login box. I have two logos and one text between them and I need that inline with responsive behavior.
I am a PHP developer I have no idea about designing.
How can I achieve a layout like the image below?
<style>
.container {
display: flex;
text-align: center;
}
.container>.logo {
flex: 1;
/*grow*/
}
</style>
<body class="login-page">
<!-- Progress Bar -->
<div class="progress-wrap progress">
<div class="progress-bar progress"></div>
</div>
<!-- Header -->
<div class="header-container-wrapper">
<div class="page-center">
<a href="//www.c2perform.com">
<img src="images/C2_Perform_Logo_Colour.svg" id="header-logo" alt="C2Perform" title="C2Perform">
</a>
</div>
</div>
<!-- Body -->
<div class="body-container-wrapper">
<div class="page-center">
<div class="container">
<div class="logo">
<img src="images/ef_logo.png" width="200px" height="auto">
</div>
<div class="logo">
<h4>is now</h4>
</div>
<div class="logo">
<img src="images/C2_Perform_Logo_Colour.jpg" width="200px" height="auto">
</div>
</div>
<!-- Login -->
<div class="login-box-wrapper">
<div class="login-box">
<h3>Log In</h3>
<?php ef_print_notices(); ?>
<!-- Login Form -->
<form role="form" method="post" id="loginForm" class="form lostpass">
<div class="form-group">
<label for="inputEmail3">User Name</label>
<div>
<div>
<input type="text" class="form-control validate[required]" placeholder="Username" name="username" value="" size="30" maxlength="225" id="formfocus">
</div>
</div>
</div>
<div class="form-group">
<label for="inputPassword3">Password</label>
<div>
<div class="input-group">
<input type="password" name="password" size="30" maxlength="25" class="form-control validate[required]" id="inputPassword3" placeholder="Password" autocomplete="off" />
</div>
</div>
</div>
<div class="form-group">
<input type="hidden" name="ef_nonce" value="<?php ef_create_nonce('login_nonce'); ?>" />
<div>
<input type="submit" name="login" value="Login" class="button" />
</div>
</div>
<div class="form-group">
<div>Lost Password?</div>
</div>
</form>
</div>
</div>
</div>
</div>
You need to use align-items for vertical alignment and justify-content to align horizontally.
DEMO
.container {
display: flex;
align-items: center;
justify-content: center;
}
.container>.logo {
flex-grow: 1;
text-align: center;
}
<!-- Progress Bar -->
<div class="progress-wrap progress">
<div class="progress-bar progress"></div>
</div>
<!-- Header -->
<div class="header-container-wrapper">
<div class="page-center">
<a href="//www.c2perform.com">
<img src="images/C2_Perform_Logo_Colour.svg" id="header-logo" alt="C2Perform" title="C2Perform">
</a>
</div>
</div>
<!-- Body -->
<div class="body-container-wrapper">
<div class="page-center">
<div class="container">
<div class="logo">
<img src="images/ef_logo.png" width="200px" height="auto">
</div>
<div class="logo">
<h4>is now</h4>
</div>
<div class="logo">
<img src="images/C2_Perform_Logo_Colour.jpg" width="200px" height="auto">
</div>
</div>
<!-- Login -->
<div class="login-box-wrapper">
<div class="login-box">
<h3>Log In</h3>
<?php ef_print_notices(); ?>
<!-- Login Form -->
<form role="form" method="post" id="loginForm" class="form lostpass">
<div class="form-group">
<label for="inputEmail3">User Name</label>
<div>
<div>
<input type="text" class="form-control validate[required]" placeholder="Username" name="username" value="" size="30" maxlength="225" id="formfocus">
</div>
</div>
</div>
<div class="form-group">
<label for="inputPassword3">Password</label>
<div>
<div class="input-group">
<input type="password" name="password" size="30" maxlength="25" class="form-control validate[required]" id="inputPassword3" placeholder="Password" autocomplete="off" />
</div>
</div>
</div>
<div class="form-group">
<input type="hidden" name="ef_nonce" value="<?php ef_create_nonce('login_nonce'); ?>" />
<div>
<input type="submit" name="login" value="Login" class="button" />
</div>
</div>
<div class="form-group">
<div>Lost Password?</div>
</div>
</form>
</div>
</div>
</div>
</div>
You can also change the display behavior to be grid, and so, so you define the width in which the images should be displayed down.
.container {
display: grid;
align-items: center;
justify-content: center;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.container>.logo {
flex-grow: 1;
text-align: center;
}
<!-- Progress Bar -->
<div class="progress-wrap progress">
<div class="progress-bar progress"></div>
</div>
<!-- Header -->
<div class="header-container-wrapper">
<div class="page-center">
<a href="//www.c2perform.com">
<img src="images/C2_Perform_Logo_Colour.svg" id="header-logo" alt="C2Perform" title="C2Perform">
</a>
</div>
</div>
<!-- Body -->
<div class="body-container-wrapper">
<div class="page-center">
<div class="container">
<div class="logo">
<img src="images/ef_logo.png" width="200px" height="auto">
</div>
<div class="logo">
<h4>is now</h4>
</div>
<div class="logo">
<img src="images/C2_Perform_Logo_Colour.jpg" width="200px" height="auto">
</div>
</div>
<!-- Login -->
<div class="login-box-wrapper">
<div class="login-box">
<h3>Log In</h3>
<?php ef_print_notices(); ?>
<!-- Login Form -->
<form role="form" method="post" id="loginForm" class="form lostpass">
<div class="form-group">
<label for="inputEmail3">User Name</label>
<div>
<div>
<input type="text" class="form-control validate[required]" placeholder="Username" name="username" value="" size="30" maxlength="225" id="formfocus">
</div>
</div>
</div>
<div class="form-group">
<label for="inputPassword3">Password</label>
<div>
<div class="input-group">
<input type="password" name="password" size="30" maxlength="25" class="form-control validate[required]" id="inputPassword3" placeholder="Password" autocomplete="off" />
</div>
</div>
</div>
<div class="form-group">
<input type="hidden" name="ef_nonce" value="<?php ef_create_nonce('login_nonce'); ?>" />
<div>
<input type="submit" name="login" value="Login" class="button" />
</div>
</div>
<div class="form-group">
<div>Lost Password?</div>
</div>
</form>
</div>
</div>
</div>
</div>
There I say that, whenever the items can have at least 100px of width, the items can remain inline, but, if the items can't achieve that minimum width, those which can't, are displayed down
Related
I've tried to convert my JS code to jQuery however I can't still fix it. Can anyone help me with it?
const content = document.querySelectorAll(".nk-sec-content")
const btnIcon = document.querySelectorAll(".nk-sec-icon")
btnIcon.forEach(btns => {
btns.addEventListener("click", (e) => {
const currentTarget = e.currentTarget
const currentSelected = document.getElementById(currentTarget.dataset.content)
// console.log(currentSelected)
content.forEach(contentItems => {
if (contentItems !== currentSelected) {
contentItems.classList.remove("show")
}
})
currentSelected.classList.add("show")
})
})
.nk-sec-content {
height: 100%;
display: none;
}
.nk-sec-content.show {
display: block;
}
.nk-sec-icon {
width: 30px;
height: 30px;
background: yellow;
}
.nk-sec-icon-l {
display: flex;
gap: 10px;
}
<div class="nk-sec-container-settings">
<div class="nk-sec-icon-l">
<div class="nk-sec-icon _changepassword" data-content="changepassword" data-title="Change Password"></div>
<div class="nk-sec-icon _emailaddress" data-content="emailaddress" data-title="Email Address"></div>
<div class="nk-sec-icon _contactnumber" data-content="contactnumber" data-title="Contact Number"></div>
<div class="nk-sec-icon _company" data-content="company" data-title="Company"></div>
<div class="nk-sec-icon _help" data-content="help" data-title="Help"></div>
</div>
<div class="nk-sec-settings-content">
<div class="nk-sec-content show" id="changepassword">
<!-- <div class="nk-sec-content-title">Change password</div> -->
<div class="nk--sec-container">
<div class="nk-sec-input">
<div class="nk-cp-text">Username</div>
<input type="text" id="username" name="username" value="001637" disabled="">
</div>
<div class="nk-sec-input">
<div class="nk-cp-text">Account name</div>
<input type="text" id="accountname" name="accountname" value="" disabled="">
</div>
<div class="nk-sec-input">
<div class="nk-cp-text">Old password</div>
<input type="text" id="oldpassword" name="oldpassword">
</div>
<div class="nk-sec-input">
<div class="nk-cp-text">New password</div>
<input type="text" id="newpassword" name="newpassword">
</div>
<div class="nk-sec-input">
<div class="nk-cp-text">Confirm password</div>
<input type="text" id="confirmpassword" name="confirmpassword">
</div>
<div class="nk-sec-input">
<div class="nk-btn-cpassword">Update password</div>
</div>
</div>
</div>
<div class="nk-sec-content" id="emailaddress">
<!-- <div class="nk-sec-content-title">Add email address</div> -->
<div class="nk--sec-container">
<div class="nk-sec-input">
<div class="nk-cp-text">Email</div>
<input type="text" id="email" name="email" value="" disabled="">
</div>
<div class="nk-sec-input">
<!-- <div class="nk-cp-text">Email</div> -->
<input type="text" id="email" name="email" value="">
</div>
<div class="nk-sec-input">
<div class="nk-btn-cpassword">Add more email</div>
</div>
</div>
</div>
<div class="nk-sec-content" id="contactnumber">
<div class="nk-sec-content-title">Contact number</div>
</div>
<div class="nk-sec-content" id="company">
<div class="nk-sec-content-title">Company</div>
</div>
<div class="nk-sec-content" id="help">
<div class="nk-sec-content-title">Help</div>
</div>
</div>
</div>
This is how you can do it using jQuery.
You just need to see the corresponding methods for jQuery which you used.
Like,
$('') is the query selector
.on('', function) is the event listener
this keyword is used to refer to the current target element
$('').attr('') is used to get the value of attribute of the target
$('').removeClass(''), $('').addClass(''), to remove and add classes
I recommend you to visit the official documentation for better understanding.
$(".nk-sec-icon").on('click', function(event) {
// Get element with id = current clicked div's data-content attribute
const targetDiv = $(`#${$(this).attr("data-content")}`);
// Remove show and add hide in class from all divs with class 'nk-sec-content'
$(".nk-sec-content").removeClass('show');
$(".nk-sec-content").addClass('hide');
// In current clicked button's target remove hide and add show.
targetDiv.removeClass('hide');
targetDiv.addClass('show');
});
.nk-sec-content {
height: 100%;
display: none;
}
.nk-sec-content.show {
display: block;
}
.nk-sec-icon {
width: 30px;
height: 30px;
background: yellow;
}
.nk-sec-icon-l {
display: flex;
gap: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nk-sec-container-settings">
<div class="nk-sec-icon-l">
<div class="nk-sec-icon _changepassword" data-content="changepassword" data-title="Change Password"></div>
<div class="nk-sec-icon _emailaddress" data-content="emailaddress" data-title="Email Address"></div>
<div class="nk-sec-icon _contactnumber" data-content="contactnumber" data-title="Contact Number"></div>
<div class="nk-sec-icon _company" data-content="company" data-title="Company"></div>
<div class="nk-sec-icon _help" data-content="help" data-title="Help"></div>
</div>
<div class="nk-sec-settings-content">
<div class="nk-sec-content show" id="changepassword">
<!-- <div class="nk-sec-content-title">Change password</div> -->
<div class="nk--sec-container">
<div class="nk-sec-input">
<div class="nk-cp-text">Username</div>
<input type="text" id="username" name="username" value="001637" disabled="">
</div>
<div class="nk-sec-input">
<div class="nk-cp-text">Account name</div>
<input type="text" id="accountname" name="accountname" value="" disabled="">
</div>
<div class="nk-sec-input">
<div class="nk-cp-text">Old password</div>
<input type="text" id="oldpassword" name="oldpassword">
</div>
<div class="nk-sec-input">
<div class="nk-cp-text">New password</div>
<input type="text" id="newpassword" name="newpassword">
</div>
<div class="nk-sec-input">
<div class="nk-cp-text">Confirm password</div>
<input type="text" id="confirmpassword" name="confirmpassword">
</div>
<div class="nk-sec-input">
<div class="nk-btn-cpassword">Update password</div>
</div>
</div>
</div>
<div class="nk-sec-content" id="emailaddress">
<!-- <div class="nk-sec-content-title">Add email address</div> -->
<div class="nk--sec-container">
<div class="nk-sec-input">
<div class="nk-cp-text">Email</div>
<input type="text" id="email" name="email" value="" disabled="">
</div>
<div class="nk-sec-input">
<!-- <div class="nk-cp-text">Email</div> -->
<input type="text" id="email" name="email" value="">
</div>
<div class="nk-sec-input">
<div class="nk-btn-cpassword">Add more email</div>
</div>
</div>
</div>
<div class="nk-sec-content" id="contactnumber">
<div class="nk-sec-content-title">Contact number</div>
</div>
<div class="nk-sec-content" id="company">
<div class="nk-sec-content-title">Company</div>
</div>
<div class="nk-sec-content" id="help">
<div class="nk-sec-content-title">Help</div>
</div>
</div>
</div>
I'm using a template and trying to align a form exactly in the middle of the division that contains the form. Here's the code as follows:
<!-- ##### Contact Area Start ##### -->
<section class="contact-area bg-img section-padding-100-0" style="background-image: url('img/bg-img/plain.png');">
<div class="container">
<div class="row justify-content-between">
<!-- Contact Content -->
<div class="col-12 col-lg-5">
<div class="contact-content mb-100">
<!-- Section Heading -->
<div class="section-heading">
<p>Contact now</p>
<h2><span>Get In Touch</span> With Us</h2>
<img src="img/core-img/decor.png" alt="mango plant">
</div>
<!-- Contact Form Area -->
<div class="contact-form-area">
<form action="index.html" method="post">
<div class="row">
<div class="col-lg-6">
<input type="text" class="form-control" name="name" placeholder="Your Name">
</div>
<div class="col-lg-6">
<input type="email" class="form-control" name="email" placeholder="Your Email">
</div>
<div class="col-12">
<input type="text" class="form-control" name="subject" placeholder="Your Subject">
</div>
<div class="col-12">
<textarea name="message" class="form-control" cols="30" rows="10" placeholder="Your Message"></textarea>
</div>
<div class="col-12">
<button type="submit" class="btn famie-btn">Send Message</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ##### Contact Area End ##### -->
Here's how the form is looking at the moment on my page :
I need to align it exactly in the middle.
Apply this class to your div:
.box{
width: 450px;
height: 500px;
background: #FFFFFF;
border: 0.5px solid #DADCE0;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
border-radius: 5px;
}
display: flex can be used in order to center the row after container:
<!-- ##### Contact Area Start ##### -->
<section class="contact-area bg-img section-padding-100-0" style="background-image: url('img/bg-img/plain.png');">
<div class="container">
<div class="row justify-content-between" style="display: flex;justify-content: center;">
<!-- Contact Content -->
<div class="col-12 col-lg-5">
<div class="contact-content mb-100">
<!-- Section Heading -->
<div class="section-heading">
<p>Contact now</p>
<h2><span>Get In Touch</span> With Us</h2>
<img src="img/core-img/decor.png" alt="mango plant">
</div>
<!-- Contact Form Area -->
<div class="contact-form-area">
<form action="index.html" method="post">
<div class="row">
<div class="col-lg-6">
<input type="text" class="form-control" name="name" placeholder="Your Name">
</div>
<div class="col-lg-6">
<input type="email" class="form-control" name="email" placeholder="Your Email">
</div>
<div class="col-12">
<input type="text" class="form-control" name="subject" placeholder="Your Subject">
</div>
<div class="col-12">
<textarea name="message" class="form-control" cols="30" rows="10" placeholder="Your Message"></textarea>
</div>
<div class="col-12">
<button type="submit" class="btn famie-btn">Send Message</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ##### Contact Area End ##### -->
You can offset your container to the middle of screen by using the offset classes. For example, set column container to:
<div class="col-12 col-lg-6 offset-lg-3">
Easiest to use the horizontal alignment classes, just change your row to the following;
<div class="row justify-content-center">
edit: incorrectly though text-center would help, it won't.
I am trying to horizontally center the div id="lastrow"
<div class="container">
<div class="row" style="text-align:center">
<div class="col-md-12">Name: <input type="text" id="name"><span class="vishid"> Name:</span></div>
<div class="col-md-12">Company: <input type="text" id="comp"><span class="vishid"> Company:</span></div>
</div>
<div class="row" style="text-align:center">
<div class="col-md-12">Address: <input type="text" id="addr"><span class="vishid"> Address:</span></div>
<div class="col-md-12">City: <input type="text" id="city"> ST: <input type="text" id="stat"> Zip: <input type="text" id="zip1">-<input type="text" id="zip2"><span class="vishid"> City:</span></div>
</div>
<div class="row" style="text-align:center">
<div class="col-md-12">E-Mail: <input type="text" id="emai"><span class="vishid"> E-Mail:</span></div>
<div class="col-md-12">Phone: (<input type="text" id="area">) <input type="text" id="pho1">-<input type="text" id="pho2"> Extension: <input type="text" id="exte"><span class="vishid"> Phone:</span></div>
</div>
<div class="row" id="lastrow" style="display: block;margin-left: 0;margin-right: auto; text-align:center">
<div class="col-md-12">
<div>
Message:
</div>
<div>
<textarea id="mssg"></textarea>
</div>
</div>
<div class="col-md-12">
<div id="recap" class="g-recaptcha" data-sitekey="aewrwgtearhrtjtsryjEFEdUAPN5CrFuM5l_1ZdSu7OH_g"></div>
</div>
</div>
</div>
I am not sure if you need the CSS file as most of it is regarding widths.
Thank you for your time,
Don
If you are using bootstrap-4 call the default class text-center to align the div center. If you want to make the design better refer the bootstrap form.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row text-center">
<div class="col-md-12">Name:
<input type="text" id="name"><span class="vishid"> Name:</span></div>
<div class="col-md-12">Company:
<input type="text" id="comp"><span class="vishid"> Company:</span></div>
</div>
<div class="row text-center">
<div class="col-md-12">Address:
<input type="text" id="addr"><span class="vishid"> Address:</span></div>
<div class="col-md-12">City:
<input type="text" id="city"> ST:
<input type="text" id="stat"> Zip:
<input type="text" id="zip1">-
<input type="text" id="zip2"><span class="vishid"> City:</span></div>
</div>
<div class="row text-center">
<div class="col-md-12">E-Mail:
<input type="text" id="emai"><span class="vishid"> E-Mail:</span></div>
<div class="col-md-12">Phone: (
<input type="text" id="area">)
<input type="text" id="pho1">-
<input type="text" id="pho2"> Extension:
<input type="text" id="exte"><span class="vishid"> Phone:</span></div>
</div>
<div class="row text-center" id="lastrow">
<div class="col-md-12">
<div>
Message:
</div>
<div>
<textarea id="mssg"></textarea>
</div>
</div>
<div class="col-md-12">
<div id="recap" class="g-recaptcha" data-sitekey="aewrwgtearhrtjtsryjEFEdUAPN5CrFuM5l_1ZdSu7OH_g"></div>
</div>
</div>
</div>
Try to use bootstrap grid system, which is row and col class,
for example if you want to center the div write your div code between the following code.
<div class="container">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
//insert your div code to center
<form>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext"
id="staticEmail" value="email#example.com">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-
label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword"
placeholder="Password">
</div>
</div>
</form>
<!-- a bootstrap col has 12 that's why am divide col by 4 to
center 4+4+4 = 12 -->
</div>
<div class="col-md-4">
</div>
</div>
</div>
//or follow this bootstrap forms layout to get this
https://getbootstrap.com/docs/4.3/components/forms/
I want to vertically center a container div on the page. This works on JSfiddle, but when I preview the page on my computer the container stays stuck to the top of the page. The body also seems to only fill half the page.
Does anyone know the reason for this? I don't know if it's the code, seeing as it works on JSfiddle.
HTML:
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="panel login-tab">
<div class="panel-heading">
<div class="row">
<div class="col-xs-6">
Login
</div>
<div class="col-xs-6">
Register
</div>
</div>
<hr>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<form id="login-form" method="post" style="display:block;">
<div class="form-group">
<input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="">
</div>
<div class="form-group">
<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password">
</div>
<div class="form-group">
<input type="checkbox" tabindex="3" class="" name="remember" id="remember">
<label for="remember">Remember me</label>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-login" value="Log In">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-12">
<div class="text-center">
<a href="#" tabindex="5" class="forgot-password">
Forgot password?</a>
</div>
</div>
</div>
</div>
</form>
<form id="register-form" method="post" style="display:none;">
<div class="form-group">
<input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="">
</div>
<div class="form-group">
<input type="email" name="email" id="email" tabindex="1" class="form-control" placeholder="Email Address" value="">
</div>
<div class="form-group">
<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password">
</div>
<div class="form-group">
<input type="password" name="confirm-password" id="confirm-password" tabindex="2" class="form-control" placeholder="Conform Password">
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" name="register-submit" id="register-submit" tabindex="4" class="form-control btn btn-register" value="Register">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Other stylesheets:
<!--in head-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<!--before ending body-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="script.js"></script>
I am new to Bootstrap and Bootstrap 3.. I assume I should always use percentages to specify widths and never fixed values.. is that correct.
I need my row to not go to the whole screen, but only take up as much room as it needs based on the inner elements..I asssume I need to just set the width of the row.. or is there another way?
<div class="row" style="width:80%">
<fieldset>
<legend>DashBoard Details</legend>
<div class="col-xs-1">
<label style="width:100px;display:block">FirstName</label>
</div>
<div class="col-xs-2">
<input type="text" />
</div>
<div class="col-xs-1">
<label style="width:100px;display:block;">Age</label>
</div>
<div class="col-xs-2">
<input type="text" />
</div>
<div class="col-xs-1">
<input type="submit" />
</div>
</fieldset>
</div>
I imagine this is what you are going for. The col-... divs must be immediate children of the row div.
http://jsfiddle.net/742qj/
<div style="width:80%">
<fieldset>
<legend>DashBoard Details</legend>
<div class="row">
<div class="col-xs-2">
<label>FirstName</label>
</div>
<div class="col-xs-2">
<input type="text" />
</div>
<div class="col-xs-1">
<label>Age</label>
</div>
<div class="col-xs-2">
<input type="text" />
</div>
<div class="col-xs-1">
<input type="submit" />
</div>
</div>
</fieldset>
</div>
Or perhaps
<div clas="row">
<div class="col-lg-2">...</div>
<div class="col-lg-10">
<fieldset>
<legend>DashBoard Details</legend>
<div class="row">
<div class="col-xs-2">
<label>FirstName</label>
</div>
<div class="col-xs-2">
<input type="text" />
</div>
<div class="col-xs-1">
<label>Age</label>
</div>
<div class="col-xs-2">
<input type="text" />
</div>
<div class="col-xs-1">
<input type="submit" />
</div>
</div>
</fieldset>
</div>
</div>