https://jsfiddle.net/8tcupybL/
<!doctype html>
<html lang="en">
<head>
<title>Hello, world!</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/ussettler.css">
<link rel="stylesheet" type="text/css" href="css/sykesuss.css">
<body>
<div class="container-fluid">
<div class="row">
<div id="ussnav" class="col-12 col-md-12 nopadding">
<ul>
<li><img src="images/ussettler.png" id="logo"></li>
<li></li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</div>
<div class="row">
<div id="ussbody" class="col-12 col-md-12 nopadding container-fluid">
<div class="row">
<div id="paneluss" class="col-9 col-md-9 nopadding container-fluid">
<div class="row">
<div id="contactuss" class="col-xs-12 col-md-12 nopadding container-fluid">
</div>
<div id="galleryuss" class="col-xs-12 col-md-12 nopadding container-fluid">
<!--<div class="carousel">
<div>1<img src="images/ussettler"></div>
<div>2<img src="images/ussettler"></div>
<div>3<img src="images/ussettler"></div>
<div>4<img src="images/ussettler"></div>
<div>5<img src="images/ussettler"></div>
<div>6<img src="images/ussettler"></div>
<div>7<img src="images/ussettler"></div>
</div>-->
</div>
<div id="teaminfouss" class="col-xs-12 col-md-12 nopadding container-fluid">
<div id="infotext"><p>More introduction on service and team.</p></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div id="ussfooter" class="col-12 col-md-12 nopadding">
<ul class="footerlist fixedfooter">
<li>USSettler # 2017</li>
|
<li>Disclaimer</li>
|
<li>Privacy Policy</li>
|
<li>Join Our Team</li>
|
<li>Contact Us</li>
|
<li>
<span>Sign up for our updates</span>
</li>
<li>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
crossorigin="anonymous"></script>
<script src="js/ussettler.js"></script>
In the fiddle above I am looking to add a reponsive image carousel to the middle section. There is an example in the mock image posted. I am new to carousel's and would prefer little to no javascript if possible. Or if anyone has a good link to where I can learn the html/css version or the javascript required to make one that would be awesome thanks!
Mock Webpage
Related
I'm trying to add a vertical gutter between two rows using Bootstrap 5. But as you can see in the jsfiddle, there is no gutter. Does somebody know what is wrong here?
https://jsfiddle.net/re4879wt/
As far as I understand gutters (https://getbootstrap.com/docs/5.0/layout/gutters/#vertical-gutters) can be added to a .row using g-* or gy-*. None of both works in my case.
You have two div with gy-3 that is needed. put them together:
<div class="row gy-3">
<div class="col-12">
First part
</div>
<div class="col-12">
second part
</div>
</div>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Devices Demo!</h1>
<div class="container overflow-hidden">
<div class="row gy-3">
<div class="col-12">
<ul id="device-list" class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
</div>
<div class="col-12">
<div class="card">
<div class="card-header">
Add new device
</div>
<div class="card-body">
<form>
<div class="row mb-3">
<label for="deviceName" class="form-label col-sm-2">Device Name</label>
<input type="name" class="form-control col-sm-10" id="deviceName" placeholder="Network Switch">
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
I have tried to use a bootstrap search box in my code that is supposed to be rendered like this:
But for some reason it does not render correctly in my layout which is something like this:
Here is my html code for this basic layout. Is there anything I can do so the button renders corrctly on the search box?
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Weather Dashboard</title>
</head>
<body>
<div class="container">
<div class="row" id="firstRow">
<div class="col" id="top-bar">
1 of 2
</div>
</div>
<div class="row" id="secondRow">
<div class="col col-lg-3">
<h4>Search for a city:</h4>
<div class="input-group md-form form-sm form-2 pl-0">
<input class="form-control my-0 py-1 amber-border" type="text" placeholder="Search"
aria-label="Search">
<div class="input-group-append">
<span class="input-group-text amber lighten-3" id="basic-text1">
<i class="fas fa-search text-grey" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
<div class="col">
2 of 3
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
</body>
</html>
You can check the below code. or below youtube link for the better explanation:
https://youtu.be/34Ee-HLtMgU
Only fontawesome library was missing.
I have added one more search box. try to add submit button instead of adding span tag. This is the best practice.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Weather Dashboard</title>
</head>
<body>
<div class="container">
<div class="row" id="firstRow">
<div class="col" id="top-bar">
1 of 2
</div>
</div>
<div class="row" id="secondRow">
<div class="col col-lg-3">
<h4>Search for a city:</h4>
<div class="input-group md-form form-sm form-2 pl-0">
<input class="form-control my-0 py-1 amber-border" type="text" placeholder="Search"
aria-label="Search">
<div class="input-group-append">
<span class="input-group-text amber lighten-3" id="basic-text1">
<i class="fas fa-search text-grey" aria-hidden="true"></i>
</span>
</div>
</div>
<div class="input-group mt-3">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-append">
<button class="btn btn-secondary" type="submit">
<i class="fas fa-search text-grey" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
<div class="col">
2 of 3
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
</body>
</html>
I don't know if you missed this point, but you didn't include the "fontAwesome" CDN link. You need to use it to display the search icon. I also interpreted some of your code to create the image. You can check it.
And if you want search input to cover the entire line, you should use col-lg-12 instead of col-lg-3. The Bootstrap grid system uses a 12 column system. You must know that. https://getbootstrap.com/docs/4.4/layout/grid/
I used bootstrap's own classes to set border and icon background color. warning color for your situation
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/dc0c634418.js" crossorigin="anonymous"></script>
<div class="container">
<!-- <div class="row" id="firstRow">
<div class="col" id="top-bar">
1 of 2
</div>
</div> -->
<div class="row" id="secondRow">
<div class="col col-lg-12">
<h4>Search for a city:</h4>
<div class="input-group md-form form-sm form-2 pl-0">
<input class="form-control border border-warning my-0 py-1 amber-border" type="text" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<span class="input-group-text amber lighten-3 bg-warning" id="basic-text1">
<i class="fas fa-search text-grey" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
<!-- <div class="col">
2 of 3
</div> -->
</div>
</div>
First try changing fa fa-search in order to the icon display.
in this line => idk if u can use amber try using bg-warning (this is bootstrap), but if you want the exact color i would use css.
and maybe it is grey because the icon is not there.
I'm working on a responsive web app in Bootstrap 4 and use cards with images on one of the pages. Everything works fine through any window resizing on a desktop view; however, when I view them on mobile the card image height is completely off and about half the size of what it should be.
Here's the HTML:
<div class="container">
<header class="jumbotron">
<div class="container">
<h1>By The Numbers.</h1>
<p>View our growing database:</p>
<p>
<a class="btn btn-primary btn-large" href="/players/new">Add New Player</a>
</p>
<p>
<form action="/players" method="GET" class="form-inline">
<div class="form-group">
<input type="text" name="search" placeholder="Player Search..." class="form-control">
<input type="submit" value="Search" class="btn btn-default">
</div>
</form>
</p>
</div>
</header>
<div class="row text-center">
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="card">
<img src="https://t3.ftcdn.net/jpg/02/12/43/28/240_F_212432820_Zf6CaVMwOXFIylDOEDqNqzURaYa7CHHc.jpg" id="playerCardImage" class="card-img-top" alt="Name">
<div class="card-body">
<h5 class="card-title">Name</h5>
<h5 class="card-title">Detail</h5>
More Info
</div>
</div>
</div>
</div>
The below CSS was added to ensure the cards all remain the same height, but this seems to cause the issue where the image is extremely small on mobile.
CSS:
#playerCardImage {
width: 100%;
height: 15vh;
object-fit: cover;
}
A codepen with the card example can be found here: https://codepen.io/franchise/pen/MWaoXOp.
Detail:
Cannot replicate sizing issue with Chrome Dev Tools mobile view, it only shows what I would expect the card to look like on mobile
To recreate the issue, view the Codepen on mobile to see the image is about half of the size compared to viewing the Codepen on a desktop
What am I missing here? Thanks in advance for the help.
Instead of creating a style based on id, can try to create the style based on class card-img-top.
.card-img-top {
width: 100%;
height: 150px;
object-fit: cover;
}
<!DOCTYPE html>
<html>
<head>
<title>Footer Pen</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/stylesheets/main.css">
<script src="https://kit.fontawesome.com/175e0bfa97.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<header class="jumbotron">
<div class="container">
<h1>By The Numbers.</h1>
<p>View our growing database:</p>
<p>
<a class="btn btn-primary btn-large" href="/players/new">Add New Player</a>
</p>
<p>
<form action="/players" method="GET" class="form-inline">
<div class="form-group">
<input type="text" name="search" placeholder="Player Search..." class="form-control">
<input type="submit" value="Search" class="btn btn-default">
</div>
</form>
</p>
</div>
</header>
<div class="row text-center">
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="card">
<img src="https://t3.ftcdn.net/jpg/02/12/43/28/240_F_212432820_Zf6CaVMwOXFIylDOEDqNqzURaYa7CHHc.jpg" id="playerCardImage" class="card-img-top" alt="Name">
<div class="card-body">
<h5 class="card-title">Name</h5>
<h5 class="card-title">Detail</h5>
More Info
</div>
</div>
</div>
</div>
</div>
https://stackoverflow.com/questions/61617160/bootstrap-4-card-image-resizing-on-mobile#
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
You should use height in percent
#playerCardImage {
width: 100%;
object-fit: cover;
}
#media all and (max-width:768px){
#playerCardImage {
width: 100%;
height: 110px;
object-fit: cover;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Footer Pen</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/stylesheets/main.css">
<script src="https://kit.fontawesome.com/175e0bfa97.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<header class="jumbotron">
<div class="container">
<h1>By The Numbers.</h1>
<p>View our growing database:</p>
<p>
<a class="btn btn-primary btn-large" href="/players/new">Add New Player</a>
</p>
<p>
<form action="/players" method="GET" class="form-inline">
<div class="form-group">
<input type="text" name="search" placeholder="Player Search..." class="form-control">
<input type="submit" value="Search" class="btn btn-default">
</div>
</form>
</p>
</div>
</header>
<div class="row text-center">
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="card">
<img src="https://t3.ftcdn.net/jpg/02/12/43/28/240_F_212432820_Zf6CaVMwOXFIylDOEDqNqzURaYa7CHHc.jpg" id="playerCardImage" class="card-img-top" alt="Name">
<div class="card-body">
<h5 class="card-title">Name</h5>
<h5 class="card-title">Detail</h5>
More Info
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
Having problem with one of my development work that from time to time the page is rendering as text. Look at the http header and I cannot see anything wrong. Can someone give me a helping eye.
Thanks
0000
HTTP/1.1 200 OK
Date: Fri, 09 Dec 2016 13:15:49 GMT
Content-Length: 5621
Content-Type: text/html; charset=ISO-8859-1
Content-Language: en
X-Powered-By: Servlet/2.5 JSP/2.1
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>RunDetails</title>
<script type="text/javascript" src="/environment/resources/js/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="/environment/resources/dev/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/environment/resources/js/angularjs/1.4.4/angular.js"></script>
<script type="text/javascript" src="/environment/resources/js/angularjs/1.4.4/angular-animate.js"></script>
<script type="text/javascript" src="/environment/resources/js/angularjs/1.4.4/angular-resource.js"></script>
<script type="text/javascript" src="/environment/resources/js/bootstrap/ui-bootstrap-tpls-0.13.3.js"></script>
<script type="text/javascript" src="/environment/resources/jquery-ui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="/environment/resources/js/angular-strap/2.3.1/angular-strap.js"></script>
<script type="text/javascript" src="/environment/resources/js/angular-strap/2.3.1/tooltip.js"></script>
<script type="text/javascript" src="/environment/resources/js/angular-strap/2.3.1/angular-strap.tpl.js"></script>
<script type="text/javascript" src="/environment/resources/js/underscore-min.js"></script>
<link rel="stylesheet" type="text/css" href="/environment/resources/dev/css/em.css" />
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css" href="/environment/resources/dev/bootstrap-3.3.5/css/bootstrap.min.css" />
<!-- Bootstrap theme -->
<link rel="stylesheet" type="text/css" href="/environment/resources/dev/bootstrap-3.3.5/css/bootstrap-theme.min.css" />
<!-- jQuery/Bootstrap JS -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div id="envmon-header">
<div class="row">
<div class="col-md-1" id="logo">
<img src="/environment/resources/dev/img/flight.jpg">
</div>
<div class="col-md-10">
<div class="row">
<div class="col-md-6" id="headertitle">
<!-- <h1>Environment Monitoring</h1> -->
<h1>Environment Monitoring</h1>
</div>
</div>
<ul class="nav nav-pills">
<li><h2>Run A REPORT</h2></li>
<li class="dropdown" >
<h2 class="dropdown-toggle" data-toggle="dropdown">CONFIGURATION <b class="caret"></b></h2>
<ul class="dropdown-menu1" role="menu">
<li>Component Search</li>
<li>Component Group Search</li>
<li>Time Period Search</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id="envmon-body" >
<div id="angularTestPage" class="theme-showcase row" ng-controller="RunDetailsPageController">
<!-- Error container. This should be populate with right error message on execution. -->
<div ng-cloak class="row">
<div ng-cloak class="alert-danger" ng-repeat="error in headerErrors">
{{error.message}}
</div>
<div ng-cloak class="alert-warning" ng-repeat="warning in headerWarnings">
{{warning.message}}
</div>
<div ng-cloak class="alert-info" ng-repeat="info in headerInfos">
{{info.message}}
</div>
<div ng-cloak class="global-error alert alert-success header-errors" ng-repeat="success in headerSuccesses">
{{success.message}}
</div>
</div>
<!-- vvvvvvvvvvvvvvvvvvvvvvv Actual Content Start Here vvvvvvvvvvvvvvvvvvvvvvv -->
<div id="content-title" class="row">
<div class="col-md-6 pageTitle align-left">Test Run Details</div>
<div class="col-md-6" >
<input type="submit" ng-click="exportButtonClicked()" id="btnExport" class="styled-button pull-right" value="EXPORT" />
</div>
</div>
<div id="run-detailsid" class="row">
<div id="" name="" class="row table-header-row" >
<div class="col-md-1">Component</div>
<div class="col-md-1">Status</div>
<div class="col-md-4">Test Name</div>
<div class="col-md-2">Service</div>
<div class="col-md-2">Operation</div>
<div class="col-md-2">Created Date</div>
</div>
<div id="" name="" class="row table-detail-row-wrap" ng-repeat="runDetail in runDetails">
<div class="col-md-1 table-cell centered">{{runDetail.componentName}}</div>
<div class="col-md-1 table-cell centered">
<div ng-show="runDetail.testLogId != ''">
<a href="" ng-click="runSelectedTestId(runDetail.testLogId);">
<img ng-src="{{runDetail.status == 2 ? redCircleImageLocation : greenCircleImageLocation}}" border="0" >
</a>
</div>
</div>
<div class="col-md-4 ">{{runDetail.testName}}</div>
<div class="col-md-2 ">{{runDetail.service}}</div>
<div class="col-md-2 ">{{runDetail.operation}}</div>
<div class="col-md-2 ">{{runDetail.createdDate}}</div>
</div>
</div>
<div> </div>
<div class="col-md-12 centered">runId = {{runDetails[0].runId}} </div>
</div>
<script type="text/javascript" src="/environment/resources/js/controllers/rundetails.js"></script>
</div>
<div id="envmon-footer">
<div class="row">
<div id="footer">
</div>
</div>
</div>
</div>
</body>
</html>
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.