I'm using bootstrap to style the page, using standard bootstrap classes like container, row, col-sm-offset-n (to get appropriate spacing). But some of the components look very bad on mobile screen.
I have following bootstrap components on my page
container
|------row
|-----bootstrap panel
|------row
|-----div which holds error messages
|------row
|-----a form having a textarea and a button
|------row
|-----span tag
The website looks good on large screen but on smaller screen the textarea within the form gets to the leftmost side of the mobile screen. I want it to be shown in the middle. Similarly the last span tag gets attached to the leftmost side of the mobile screen. I want it to be shown in the middle.
Here is what is looks like on bigger and smaller screens respectively.
Larger Screens
Smaller Screens
You can see the problem here screen size
Below is the markup I used
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="icon" href="/images/favicon.png" type="image/x-icon">
<title>Say your heart out ...</title>
<!--<meta name='viewport' content='user-scalable=no'>-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="/libs/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/libs/css/custom.css"/>
<link rel="stylesheet" href="/libs/css/toaster.min.css"/>
<script src="/libs/js/jquery.min.js" type="text/javascript"></script>
<script src="/libs/js/jquery.bootstrap.newsbox.min.js" type="text/javascript"></script>
<script src="/libs/js/angular.min.js" type="text/javascript"></script>
<script src="/libs/js/main.js" type="text/javascript"></script>
<script src="/libs/js/spin.min.js" type="text/javascript"></script>
<script src="/libs/js/angular-spinner.min.js" type="text/javascript"></script>
</head>
<body ng-app="mean" ng-controller="MainCtrl">
<toaster-container></toaster-container>
<br/>
<div class="container">
<div class="row">
<div class="col-sm-offset-3 col-md-7">
<div class="panel panel-default">
<div class="panel-heading">
<span class="glyphicon glyphicon-envelope"></span>
<span><b>So what you wanna do before you die ...</b></span>
<span><span class="glyphicon glyphicon-refresh"></span>Load messages</span>
</div>
<div class="panel-body" >
<div ng-cloak class="row">
<div class="spinner" ng-show="formModel.loadingData">
<span us-spinner></span>
<br/><br/><br/><br/><br/>
<p style="text-align:center">Loading Awesomeness ... </p>
</div>
<div class="col-xs-12">
<ul class="demo1">
<li class="news-item" ng-repeat="item in records" on-last-element>
<table>
<tr>
<td>
<img height="60" ng-src="/images/{{($index+11) % 10}}.png" class="img-circle" /> </td>
<td style="">{{item.message}} <span class="text-primary">#{{item.username}}</span></td>
</tr>
</table>
</li>
</ul>
</div>
</div>
</div>
<div class="panel-footer"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-offset-3 col-sm-7 col-xs-12">
<p style="text-align:center" ng-cloak class="alert alert-danger"
ng-show="formModel.messageEmpty">
Oh gosh ! Really you don't wanna do anything before you are gone !!! ohh... come on
</p>
<p style="text-align:center" ng-cloak class="alert alert-danger"
ng-show="formModel.messageTooLong">
You are trying to do too many things buddy, just 150 characters !!!
</p>
<p style="text-align:center" ng-cloak class="alert alert-danger"
ng-show="formModel.usernameEmpty">
Looks like you forgot to mention your name !!!</p>
<p style="text-align:center" ng-cloak class="alert alert-danger"
ng-show="formModel.usernameTooLong">
Sorry we can't handle such a long name, please type a short name !!!</p>
</div>
</div>
<div class="row">
<form name="messageForm"
novalidate="novalidate" ng-submit="onSubmit()" id="message-box">
<div class="form-group" >
<textarea class="col-sm-offset-4 col-sm-5 col-xs-12 " required
ng-model="formModel.message"
style="border:double 4px #2B689D;border-radius: 0.5em;"
rows="3" id="message"
placeholder="Choose your life's best 150 characters followed by # and your name, then shoot it.."></textarea>
<br/>
<button style="margin-left: 5px" class="col-sm-1 col-xs-12 btn btn-primary" type="submit">Shoot it</button>
<br/>
</div>
<br/><br/>
<p class="col-sm-offset-3 col-xs-12 col-sm-7 alert alert-success"
style="text-align:center">
e.g. Will love to go to antarctica for adventure, feels kinda penguin#amy
</p>
<br/>
</form>
</div>
<div class="row">
<div class="col-sm-12 col-xs-12">
<span style="font-weight:bold;">
Made with the help of <span style="text-decoration:line-through">5 </span>15 cups of coffee by
</span>
<a style="color:white" href="https://twitter.com/alammahtab08" target="_blank">#alammahtab08</a>
</div><br/>
</div>
</div>
<script src="/libs/js/angular-animate.min.js"></script>
<script src="/libs/js/toaster.min.js"></script>
</body>
</html>
After comments below added bootstrap classes for small screens col-xs and col-sm
Now it looks as this
Just copy and replace below class in your textarea. Refer below image to understand how column class works.
col-sm-offset-4 col-xs-12 col-sm-5
For spacing problem in mobile view you need to use media query, See the below code.
You can add your custom class also for button.
#media (max-width: 768px){
.btn-primary{
margin-top: 2rem;
margin-bottom: 2rem;
}
}
Related
I am using BootStrap grid to design my html pages. Everything is working fine except for small screens. In small screens the views are overlapping like below
I am using the below code
div class="container" >
<div class="row">
<div class=" col-xs-6 col-sm-offset-1
col-sm-4 col-md-offset-2 col-md-3">
<div id="poster">
<img src="http://ia.media-imdb.com/images/M/MV5BMTk2NTI1MTU4N15BMl5BanBnXkFtZTcwODg0OTY0Nw##._V1_SX300.jpg">
</div>
</div>
<div class="col-sm-offset-1 col-sm-4 col-xs-6 col-md-2" >
<div id="ratingdiv">
<label>Your Rating</label>
<div id="rateYo"></div>
<div class="editbtn">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Edit</button>
</div>
<div class="deletebtn">
<button>Delete</button>
</div>
</div>
</div>
</div>
</div>
I gave "col-xs-6" but still its not working.
Could some one tell me what I am doing wrong.
Really appreciate any ideas or suggestions.
Thanks in advance
You missed some closing tags. Here you go. Let me know if this is what you've expected.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-8 col-md-6 col-lg-4">
<img src="http://ia.media-imdb.com/images/M/MV5BMTk2NTI1MTU4N15BMl5BanBnXkFtZTcwODg0OTY0Nw##._V1_SX300.jpg" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-2 col-lg-2">
<div id="ratingdiv">
<div class="row">
<label>Your Rating</label>
<div id="rateYo"></div>
</div>
<div class="row">
<button type="button" class="btn btn-info btn-md">Edit</button>
<button type="button" class="btn btn-danger btn-md">Delete</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
you don't have provide any css , that's why i got two opinions. first one i think you images overlapping the col-xs-6 and the solution is below . may be this will fix your issue
#poster {
width:100%;
float:left;
}
#poster img {
width:100%;
}
otherwise i think you have set position:absolute to #ratingdiv , if you set postion to #ratingdiv just change position:relative to the media queries
I am trying to move an input group inside of my page header. When I try to use a row with columns, the HR doesn't run all the way through which bothers me.
This is what I am trying to achieve:
<div class="row">
<div class="col-md-8">
<div class="page-header">
<h3 class="text-primary">EMP <small>My Dashboards</small></h3>
</div>
</div>
<div class="col-md-4">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="fa fa-search"></i> Search</span>
<input type="text" class="form-control" placeholder="Search Results..." id="search" name="search">
</div>
</div>
</div>
Here is a fiddle: https://jsfiddle.net/eo75juzL/
I am just trying to move the search input group to be right-aligned with the H3 and keep the line running all the way through.
I've updated your fiddle.
The horizontal line is part of the page-header, so I moved your columns within this div. Normal bootstrap behavior now applies, and your search box is right aligned.
To place your search box inside header You need to add this css.
.dash_input {
margin-top: -30px;
}
.dashboard {
margin-top: -40px;
}
.dash_input {
margin-top: -30px;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="row">
<div class="page-header">
<div class=" dashboard col-md-8 col-lg-8 col-sm-8 col-xs-8 ">
<h3 class="text-primary">EMP <small>My Dashboards</small></h3>
</div>
<div class="dash_input col-md-4 col-lg-4 col-sm-4 col-xs-4 pull-right">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="fa fa-search"></i> Search</span>
<input type="text" class="form-control" placeholder="Search Results..." id="search" name="search">
</div>
</div>
</div>
</div>
</body>
</html>
You had some problem with your div mark-up. tried to fix that. take a look at the above snippet. Also I would suggest you to use class="navbar". in that case you would have more flexibility.
I want my cordova app to look less like a web app and more like a real app by eliminating left and right scroll.
I've set the overflow-x property to hidden on the html and body tags, and that works for all but the page below, which scrolls left and right but shouldn't.
Have I misconstructed the grid? I've tried to apply the "overlow-x: hidden" property to an enclosing div instead of the body and html as suggested elsewhere, tried applying the property to the individual divs, attempted limiting width on the divs. I've tried changing the html position to fixed (which fixes the left-right scroll but also stops up down which I need). You can view the page below on an iOS device to see the behaviour here. Which of my lousy skillsets -- css, html, or bootstrap -- is letting me down here?
<!DOCTYPE html>
<html lang="en" style="position: relative; min-height: 100%;">
<head>
<meta charset="utf-8" />
<title>
My Awesome Title
</title>
<meta name="generator" content="BBEdit 11.0" />
<link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/entypo.min.css">
<script type="text/javascript" src="scripts/jquery-2.0.3.min.js">
</script>
<script type="text/javascript" src="scripts/bootstrap.min.js">
</script>
<script type="text/javascript" src="scripts/bootbox.min.js">
</script>
<style>
html, body {
overflow-x: hidden !important;
}
</style>
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no' />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3" style="background-color:#F8F8F8;">
<h2 class="text-center">
My Awesome Title
</h2>
<br />
<div id="hexpix" class="center-block">
<br /><br />
<div id="hexpixdiv">
</div>
</div>
<!-- Alert Space -->
<div id="AlertSpace" class="center-block" style="text-align:center; width:75%">
</div>
<br />
<!-- Hex Content Space for text -->
<div id="hexindex" class="text-center">
</div>
<!-- hexindex close -->
<div id="hexcontent" class="text-center">
<!--
<p>
Blah blah this text should NOT scroll left and right because overflow-x is set to hidden but it slides back and forth like a hotplate on butter. Why, people, Why?
<p>
-->
</div>
<!-- hexcontent close -->
<div id='HelpButton'>
</div>
</div>
<!-- Column class close-->
</div>
<!-- Row class close-->
<br />
</div>
<!--Container close-->
<div id="sharestrip" style="position: absolute; bottom:40px; width:100%; height:10px;">
<div class="row">
<div class="col-xs-2 text-center">
<a href="javascript:void(0)" class="Reddit">
<span>
</span>
</a>
</div>
<div class="col-xs-2 text-center">
<a href="javascript:void(0)" class="SMS">
<span class="icon-export">
</span>
</div>
<div class="col-xs-2 text-center">
<a href="javascript:void(0)" class="Email">
<span class="icon-gmail">
</span>
</a>
</div>
<div class="col-xs-2 text-center">
<a href="javascript:void(0)" class="Twitter">
<span class="icon-twitter">
</span>
</a>
</div>
<div class="col-xs-2 text-center">
<a href="javascript:void(0)" class="Facebook">
<span class="icon-facebook">
</span>
</a>
</div>
<div class="col-xs-2 text-center">
<a href="javascript:void(0)" class="tumblr">
<span>
</span>
</a>
</div>
</div>
<!-- Row -->
</div>
<!-- Sharestrip -->
<div id="footer" style="position: absolute;
bottom: 0;
width: 100%; height: 20px;">
<!-- See hex.css for custom css on this -->
<div class="col-xs-12 navbar-inverse navbar-fixed-bottom">
<div class="container">
<div class="row">
<div class="col-xs-3 text-center">
<a href="javascript:void(0)">
<span class="nav-link">
</span>
</a>
</div>
<div class="col-xs-2 text-center">
<a href="javascript:void(0)"
<span class="nav-link">
1
</span>
</a>
</div>
<div class="col-xs-2 text-center">
<a href="javascript:void(0)">
<span class="nav-link">
2
</span>
</a>
</div>
<div class="col-xs-2 text-center">
<a href="javascript:void(0)">
<span class="nav-link">
3
</span>
</a>
</div>
<div class="col-xs-3 text-center">
<a href="javascript:void(0)">
<span class="nav-link">
</span>
</a>
</div>
</div>
<!-- End Row -->
</div>
<!-- End Container -->
</div>
<!-- End Navbar -->
</div>
<!-- End Footer -->
</body>
</html>
When you set overflow: hidden to element it doesn't mean it stops to be scrollable... it just hides the scrollbar. Since mobile devices scroll contents when touching anywhere on the element, it just remains scrollable.
The fact is - your website is scrollable on X-Axis even on desktop devices, you just hide it by using overflow-x: hidden on body tag.
The reason why your website is x-scrollable on all devices is that you forgot to add class="container" to <div id="sharestrip"... and the row inside it has 100%+15px(left margin)+15px(right margin) which is bigger than window width.
This behaviour is reduced by .container by it's padding-left: 15px and padding-right: 15px, so simply you need to remember of adding class="container" to parent of the row.
I've made a small little Bootstrap panel, and I have 3 Bootstrap buttons in the panel at the bottom. What I'm trying to do is make all the buttons be on one line and have a small gap, not bunched together. Here's what I have right now, and here's what it's doing:
.recent
{
margin-top: 50px;
margin-right: 500px;
}
.recent input
{
float: left;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="recent">
<div class="container">
<div class="col-lg-3">
<div class="panel panel-primary">
<div class="panel-heading"><center><span class="label label-danger">Recent</span></center></div>
<div class="panel-body">
<p>- Aurora, Colorado : Blah Blah Blah</p>
<input type="button" value="View all" onClick="#" class="btn btn-primary">
<input type="button" value="Last 24 hours" onClick="#" class="btn btn-danger">
<input type="button" value="Last 48 hours" onClick="#" class="btn btn-warning">
</div>
</div>
</div>
</div>
</div>
What's happening is this:
https://gyazo.com/46b7c219adc26be516475c8f3b4d803d
Is there any way to make them stay on one line, or would I have to make the column larger?
You'll need to make the column width wider. Since you're using col-lg-3 class, the last button is wrapping to the next line. Try changing it to a larger column (i.e. col-lg-6). To answer the second part of your question, you can add a CSS rule like .btn {margin: 0 5px;} if you want some space between the buttons.
you can also achieve with out using float property. You use display:inline-block instead of float.
or you use 3 multiple division(.col-sm, .col-md, .col-lg) in .row or .container
You can try this code
<div class="recent">
<div class="container">
<div class="row">
<div class="panel panel-primary">
<div class="panel-heading"><center><span class="label label-danger">Recent</span></center></div>
<div class="panel-body">
<p>- Aurora, Colorado : Blah Blah Blah</p>
<div class="col-lg-2"><input type="button" value="View all" onClick="#" class="btn btn-primary"></div>
<div class="col-lg-2"><input type="button" value="Last 24 hours" onClick="#" class="btn btn-danger"></div>
<div class="col-lg-2"><input type="button" value="Last 48 hours" onClick="#" class="btn btn-warning"></div>
</div>
</div>
</div>
</div>
</div>
Here are few points.
Why are you giving 500 margin right to recent class? it will create problem in responsiveness. Even if you are targeting only desktop screen it is not good practice. 500 margin forcing to reduce width of recent.
you are using col-lg-3 It might be fine to use col-lg-3 for larger screens more than 1200px wide.. for small screens there are col-md-3, col-sm-3 and col-xs-3
Give a little margin-right to buttons so that they have a little space.
.recent
{
margin-top: 50px;
}
.recent input
{
float: left;
}
.m-right{
margin-right:5px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="recent">
<div class="container">
<div class="col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading"><center><span class="label label-danger">Recent</span></center></div>
<div class="panel-body">
<p>- Aurora, Colorado : Blah Blah Blah</p>
<input type="button" value="View all" onClick="#" class="btn btn-primary m-right">
<input type="button" value="Last 24 hours" onClick="#" class="btn btn-danger m-right">
<input type="button" value="Last 48 hours" onClick="#" class="btn btn-warning m-right">
</div>
</div>
</div>
</div>
</div>
I have following HTML code with bootstrap with a simple login. I want to make a box behind the login form and to be something like this.
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Login Page</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- HOVER CSS -->
<link href="css/hover-min.css" rel="stylesheet" media="all">
<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="logo" class="col-xs-4 col-xs-offset-1">
<img src="img/tei.png" class="img-responsive" alt="Responsive image">
</div>
<!-- NAVBAR -->
<div class="navbar navbar-default navbar-custom navbar-fixed-top" role="navigation">
<div class="container container-nav">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle Nav</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Contact
</li>
</ul>
</div>
</div>
</div>
<!-- END NAVBAR -->
<!-- LOGIN BOX -->
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-6">
<div class="panel panel-default hvr-glow">
<div class="panel-heading"> <strong class="">Σύνδεση στην πλατφόρμα Εργαστηρίων</strong>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form" method="post">
<div class="form-group">
<label for="onoma-xristi" class="col-sm-3 control-label">Όνομα Χρήστη</label>
<div class="col-sm-9">
<input name="username" type="text" class="form-control" id="onoma-xristi" placeholder="" required="">
</div>
</div>
<div class="form-group">
<label for="kwdikos-xristi" class="col-sm-3 control-label">Κωδικός</label>
<div class="col-sm-9">
<input name="password" type="password" class="form-control" id="kwdikos-xristi" placeholder="" required="">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="checkbox">
<label class="">
<input type="checkbox" class="">Να με θυμάσαι</label>
</div>
</div>
</div>
<div class="form-group last">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-success btn-sm hvr-grow-shadow">Σύνδεση</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- END LOGIN BOX -->
<!-- HEADER -->
<div class="header">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
</div>
</div>
</div>
</div>
<!-- END HEADER -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
And live at
Live here
I searched a lot for this border or box but i didnt find anything at all at bootstrap site.
Can anyone guide me of how to make this border and put the login box in the middle of the box and i will play with the margin top.
Thanks a lot for your time!
Wrap it in a container element. A "Bootstrap" way to do this would be something along the lines of nesting columns.
<div class="container">
<div class="row"><!-- new -->
<div class="col-md-12 form-container"><!-- new -->
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-default hvr-glow">
<!-- rest of your markup -->
</div>
</div>
</div>
</div><!-- new -->
</div><!-- new -->
</div>
Style .form-container as needed; i.e. background-color: white; border-radius: 10px;.
I see you have a custom CSS selector on your navbar's .container element of .container-nav that limits the width of the navbar. You'd have to apply something similar if you wanted what I have above to only be as wide as the navbar.
It looks like this project is a work-in-progress as I foresee issues with your logo and the layout you currently have. So I think any answer you get won't be exactly on point.
Hope this gets you pointed in the right direction though.