I have a HTML page with forms ad content that i built with bootstrap which occupies full width and height of Opera,IE,Firefox and Chrome but when i run it in Edge it only occupies like 75 % ,only when i set the zoom to 125% in edge it renders the same way as it did in other browsers . Is there like any meta tag
like
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
to make Edge use the same settings like IE?
I was using this meta tag ,right after the header tag
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
my html page:
html {
min-height: 100%;
width: 100%;
height: 100vh;
}
body {
margin-top: 50px;
min-height: 100%;
width: 100%;
height: 100vh;
}
.fullwidth {
width: 100%;
}
.halfwidth {
width: 50%;
}
.fullscreen {
height: 100%;
width: 100%;
}
.halfscreen {
height: 50%;
width: 100%;
}
.verticalscrollbar {
overflow-y: scroll;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Best Taxi</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/site.css" />
<script src="js/jquery-3.1.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="shortcut icon" href="Images/favicon.ico" type="image/x-icon">
<link rel="icon" href="Images/favicon.ico" type="image/x-icon">
</head>
<body class="background-plain">
<div id="page">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Best Taxi</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>City Attractions</li>
<!--Code for drop down link ,sub menu-->
<!-- <li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Drop Down Link
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>The Museum</li>
<li>The Palace</li>
<li>The Zoo</li>
</ul>
</li>-->
<li>Tour Packages</li>
<li>Pricing</li>
<li class="active">Contact Us</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<section id="Main" class="container col-lg-12 col-md-12 col-sm-12 col-xs-12 fullscreen">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 halfscreen">
<div id="Address" class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<h2>Address</h2>
<hr />
<div id="col-lg-6 col-md-6" style="float: left;">
<h5>Address:Flat Number 1,</h5>
<h5>Building Number 1000</h5>
<h5>EverGlade Street,</h5>
<h5>Way Number 15678,</h5>
<h5>DownTown,Thimphu</h5>
<h5>Bhutan</h5>
<h5>Phone:0000000000</h5>
<h5>Mail:info#besttaxi.com</h5>
</div>
<div id="AddressImage" class="col-lg-6 col-md-6 visible-lg visible-md">
<img src="Images/taxi_mail.png" class="img-responsive" />
</div>
</div>
<div id="ContactUsForm" class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<form>
<h2>Contact Us</h2>
<hr />
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4">
<h5>Name:</h5>
</div>
<div class="col-lg-10 col-md-10 col-sm-8 col-xs-8">
<input id="ContactName" type="text" class="form-control" required />
</div>
<br />
<br />
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4">
<h5>Email:</h5>
</div>
<div class="col-lg-10 col-md-10 col-sm-8 col-xs-8">
<input id="ContactEmail" type="text" class="form-control" required />
</div>
<br />
<br />
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4">
<h5>Subject:</h5>
</div>
<div class="col-lg-10 col-md-10 col-sm-8 col-xs-8">
<input id="ContactSubject" type="text" class="form-control" required placeholder="joe#gmail.com" />
</div>
<br />
<br />
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4">
<h5>Message:</h5>
</div>
<div class="col-lg-10 col-md-10 col-sm-8 col-xs-8">
<textarea rows="5" cols="70" class="form-control"></textarea>
</div>
<br />
<br />
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4"></div>
<div class="col-lg-10 col-md-10 col-sm-8 col-xs-8">
<br />
<button type="submit" class="btn btn-default btn-yellow">Submit</button>
</div>
</form>
</div>
</div>
<div id="AddressMap" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 halfscreen">
<br />
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d3539.890031078142!2d89.6358250609653!3d27.47268275781882!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1485174584064" class="fullwidth" height="260"></iframe>
</div>
<hr />
</section>
<footer class="container navbar-fixed-bottom hidden-xs hidden-sm">
<p class="hidden-xs hidden-sm">Copyrights © 2017 Best Taxi rights reserved | Developed by Nakki </p>
</footer>
</div>
</body>
</html>
Related
With this, I want to achieve stacked columns on mobile devices, but I run on a problem here.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="row border-top border-bottom border-info">
<div class="col-lg-1 col-md-1 col-sm-1 col-12 my-1 sortable position-relative">
<a class="position-absolute" href="#">rb</a>
</div>
<div class="col-12 col-sm-11 col-md-11 col-lg-3 my-1 sortable position-relative">
<a class="position-absolute" href="#">folder</a>
</div>
<div class="col-6 col-sm-3 col-md-3 col-lg-1 my-1 sortable position-relative">
<a class="position-absolute" href="#">modtime</a>
</div>
<div class="col-6 col-sm-4 col-md-4 col-lg-2 my-1 ">
img
</div>
<div class="col col-sm-1 col-md-1 col-lg-1 my-1 sortable position-relative">
<a class="position-absolute" href="#">width</a>
</div>
<div class="col col-sm-1 col-md-1 col-lg-1 my-1 sortable position-relative">
<a class="position-absolute" href="#">height</a>
</div>
<div class="col col-sm-1 col-md-1 col-lg-1 my-1 sortable position-relative">
<a class="position-absolute" href="#">filesize</a>
</div>
<div class="col col-sm-1 col-md-1 col-lg-1 my-1 sortable position-relative">
<a class="position-absolute" href="#">linked</a>
</div>
<div class="col col-sm-1 col-md-1 col-lg-1 my-1">
delete?
</div>
</div>
</div>
</body>
</html>
where you can see that the first two columns are overlapped without any particular reason. Why?
Thanks,
Dejan
UPDATE
as was mentioned down bellow, positioning was causing the problem, thanks all for contributing
You can use with col class only for that don't put extra CSS class on it. It will create a problem here is what u want without overlapping to each other simply use this code
<div class="container">
<div class="row border-top border-bottom border-info">
<div class="col">
rb
</div>
<div class="col">
folder
</div>
<div class="col">
modtime
</div>
<div class="col">
<p>
img
</p>
</div>
<div class="col">
width
</div>
<div class="col">
height
</div>
<div class="col">
filesize
</div>
<div class="col">
linked
</div>
<div class="col">
<p>
delete?
</p>
</div>
</div>
</div>
</body>
if u want on navbar then simply use this code
<nav class="navbar navbar-expand-md navbar-light bg-light">
Brand
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav">
rb
folder
modtime
img
width
height
<a href="#" class="nav-item nav-link" tabindex="-1">
filesize</a>
linked
delete?
</div>
</div>
</nav>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="row border-top border-bottom border-info">
<div class="col">
rb
</div>
<div class="col">
folder
</div>
<div class="col">
modtime
</div>
<div class="col">
<p>
img
</p>
</div>
<div class="col">
width
</div>
<div class="col">
height
</div>
<div class="col">
filesize
</div>
<div class="col">
linked
</div>
<div class="col">
<p>
delete?
</p>
</div>
</div>
<br><br>
<nav class="navbar navbar-expand-md navbar-light bg-light">
Brand
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav">
rb
folder
modtime
img
width
height
<a href="#" class="nav-item nav-link" tabindex="-1">
filesize</a>
linked
delete?
</div>
</div>
</nav>
</div>
</body>
</html>
Edit or preview Here
More about Bootstrap 4 Grid System Here
More about Bootstrap 4 Navbar Code and Example Here
i am new to ARIA tags. Kindly excuse if i am stupid.
What i want is a custom drop down to be visible when i click the down arrow.
The problem is the popup comes write below the icon as shown in this pic.
CSS
.vertical-align {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
}
.bkcolor {
background-color: #009cf6;
width: 305px;
/*#008bdd*/
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app">
<div id="container">
<div class="row" style="background:#009DF8;" id="namebardiv">
<div class="col-xs-10 col-md-5">
<div class="row">
<div class="col-xs-3 col-md-3">
</div>
<div class="col-xs-6 col-md-6">
<div class="row" style="color: white;font-size: 11px;">
</div>
</div>
<div class="col-xs-3 col-md-3">
</div>
</div>
<div class="row vertical-align">
<div class="col-xs-3 col-md-3">
<i class="icon-arrow-left21 pull-right" style="color:white;font-size:30px;"></i>
</div>
<div class="col-xs-7 col-md-7">
<div class="row vertical-align">
<div class="col-xs-7 col-md-7" style="color: white; font-size: 35px;display: inline-block;">
Benarsi Das
</div>
<div class="col-xs-1 col-md-1 dropdrown">
<div class="dropdown-toggle" style="color: white; font-size: 35px;display: inline-block;" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</div>
<ul class="dropdown-menu bkcolor" aria-labelledby="dropdownMenu1" style="min-height: 165px;">
something
</ul>
</div>
<div class="col-xs-4 col-md-4">
<span style="color: white;font-size: 23px;padding-top: 10px;"></span>
</div>
</div>
</div>
<div class="col-xs-2 col-md-2">
</div>
</div>
</div>
<div class="col-xs-1 col-md-1"></div>
<div class="col-xs-10 col-md-5 vertical-align">
<div class="row">
</div>
</div>
<div class="col-xs-1 col-md-1"></div>
</div>
</body>
</html>
But I need it like this
I know I can achieve it with this code
.vertical-align {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
}
.bkcolor {
background-color: #009cf6;
width: 305px;
/*#008bdd*/
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app">
<div id="container">
<div class="row" style="background:#009DF8;" id="namebardiv">
<div class="col-xs-10 col-md-5">
<div class="row">
<div class="col-xs-3 col-md-3">
</div>
<div class="col-xs-6 col-md-6">
<div class="row" style="color: white;font-size: 11px;">
</div>
</div>
<div class="col-xs-3 col-md-3">
</div>
</div>
<div class="row vertical-align">
<div class="col-xs-3 col-md-3">
<i class="icon-arrow-left21 pull-right" style="color:white;font-size:30px;"></i>
</div>
<div class="col-xs-7 col-md-7">
<div class="row dropdown" id="dropdownrow">
<div class="dropdown-toggle" style="color: white; font-size: 35px; width:210px;display: inline-block;" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<div id="dropdownlabel" style="color: white; font-size: 35px;display: inline-block;width:180px;font-family:'Roboto-Regular',san-serif">
Benarsi Das
</div>
<span class="caret"></span>
</div>
<ul class="dropdown-menu bkcolor" aria-labelledby="dropdownMenu1" style="min-height: 165px;">
something
</ul>
</div>
</div>
<div class="col-xs-2 col-md-2">
</div>
</div>
</div>
<div class="col-xs-1 col-md-1"></div>
<div class="col-xs-10 col-md-5 vertical-align">
<div class="row">
</div>
</div>
<div class="col-xs-1 col-md-1"></div>
</div>
</body>
</html>
But this makes the dropdown(popup) visible even the text is clicked. I want it only to be visible only when the dropdown icon is clicked.
Any help would be greatly appreciated.
In your stylesheet, add the declaration
transform: translate(-60px, 26px);
to the style rules for .bkcolor.
N.B. You can alter the x-translate (-60px) and the y-translate (26px) to achieve the exact positioning that you want.
Working Example:
.vertical-align {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
}
.bkcolor {
background-color: #009cf6;
width: 305px;
/*#008bdd*/
transform: translate(-60px, 26px);
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app">
<div id="container">
<div class="row" style="background:#009DF8;" id="namebardiv">
<div class="col-xs-10 col-md-5">
<div class="row">
<div class="col-xs-3 col-md-3">
</div>
<div class="col-xs-6 col-md-6">
<div class="row" style="color: white;font-size: 11px;">
</div>
</div>
<div class="col-xs-3 col-md-3">
</div>
</div>
<div class="row vertical-align">
<div class="col-xs-3 col-md-3">
<i class="icon-arrow-left21 pull-right" style="color:white;font-size:30px;"></i>
</div>
<div class="col-xs-7 col-md-7">
<div class="row vertical-align">
<div class="col-xs-7 col-md-7" style="color: white; font-size: 35px;display: inline-block;">
Benarsi Das
</div>
<div class="col-xs-1 col-md-1 dropdrown">
<div class="dropdown-toggle" style="color: white; font-size: 35px;display: inline-block;" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</div>
<ul class="dropdown-menu bkcolor" aria-labelledby="dropdownMenu1" style="min-height: 165px;">
something
</ul>
</div>
<div class="col-xs-4 col-md-4">
<span style="color: white;font-size: 23px;padding-top: 10px;"></span>
</div>
</div>
</div>
<div class="col-xs-2 col-md-2">
</div>
</div>
</div>
<div class="col-xs-1 col-md-1"></div>
<div class="col-xs-10 col-md-5 vertical-align">
<div class="row">
</div>
</div>
<div class="col-xs-1 col-md-1"></div>
</div>
</body>
</html>
I am using bootstrap and am trying to fix a div to the top of the body-container div.
Using this css, I am able to accomplish fixing the div to the top of the container, but it spills outside the right of the body-container div:
.top-bar {
position: fixed;
z-index: 1030;
top: 60px;
width: 100%;
}
.top-bar .item-count h4{
text-align: center;
}
Here is the all my html/css: https://jsfiddle.net/rttvqa3k/
Check this if its helpful.. :)
OLD:
<div class="top-bar panel panel-default">
<div class="panel-body row">
<div class="col-xs-4 col-sm-4 col-md-4">
<button class="btn btn-default">Button 1</button>
<button class="btn btn-default">Button 2</button>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 matter-count">
<h4>### Items in Report</h4>
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<button class="btn btn-default pull-right">Button 3</button>
</div>
</div>
</div>
NEW:
<div class="navbar-fixed-top container" style="top:60px;">
<div class="panel panel-default">
<div class="panel-body row">
<div class="col-xs-4 col-sm-4 col-md-4">
<button class="btn btn-default">Button 1</button>
<button class="btn btn-default">Button 2</button>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 matter-count">
<h4>### Items in Report</h4>
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<button class="btn btn-default pull-right">Button 3</button>
</div>
</div>
</div>
</div>
This answer explains the issue with position: fixed relative to a container. The answer does offer ways to accomplish this but it deals with known widths.
The problem with using "fixed" positioning is that it takes the
element out of flow. thus it can't be re-positioned relative to its
parent because it's as if it didn't have one.
You can set the width or the max-width (.top-bar width 750px) of the fixed element, but then you will have to deal with the media queries for different screen sizes.
I'll just post this so that you get things clear since it would be too long for a comment in the answer marked as correct.
There are several values you can use in the CSS property position.
Static, which is the default, relative, absolute and fixed.
Read more about that here.
If you use position: fixed; without defining top and left values, your element will default these values to where its parent element is rendered.
Here's an example for clarity:
If your body content has padding-left: 15px; your element with position: fixed; will have a default value of left: 15px;. The same goes for top, if your parent element is positioned (X)px top from the viewport, lets say X equals to 60 your position: fixed; element will default to top: 60px;
You can see this behavior here: (Notice that I did not reference bootstrap.js so you can see it has nothing to do with your problem.)
.top-bar {
position: fixed;
z-index: 1030;
width: 100%;
}
body {
padding-top: 135px;
}
footer {
text-align: center;
}
.top-bar {
position: fixed;
z-index: 1030;
width: 100%;
}
.top-bar .matter-count h4 {
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Application name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a class="navbar-brand" href="/">Home</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<div class="top-bar panel panel-default">
<div class="panel-body row">
<div class="col-xs-4 col-sm-4 col-md-4">
<button class="btn btn-default">Button 1</button>
<button class="btn btn-default">Button 2</button>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 matter-count">
<h4>### Items in Report</h4>
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<button class="btn btn-default pull-right">Button 3</button>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
Some region
</div>
<div class="panel-body">
some content
<br/>
<br />
<br />
<br />
<br />
<br />
<br />
<br/>some more content
<br />
<br />
<br />
<br />
<br />
<br />
<br/>event more content
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
Some region
</div>
<div class="panel-body">
some content
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />some more content
<br />
<br />
<br />
<br />
<br />
<br />
<br />event more content
</div>
</div>
<hr />
<footer>
<p>© Some Application</p>
</footer>
</div>
</body>
So the correct approach is to set this properties so they don't default.
This way:
.top-bar {
position: fixed;
top: 60px;
left: 0;
z-index: 1030;
width: 100%;
}
body {
padding-top: 135px;
}
footer {
text-align: center;
}
.top-bar {
position: fixed;
top: 60px;
left: 0;
z-index: 1030;
width: 100%;
}
.top-bar .matter-count h4{
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Application name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a class="navbar-brand" href="/">Home</a></li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<div class="top-bar panel panel-default">
<div class="panel-body row">
<div class="col-xs-4 col-sm-4 col-md-4">
<button class="btn btn-default">Button 1</button>
<button class="btn btn-default">Button 2</button>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 matter-count">
<h4>### Items in Report</h4>
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<button class="btn btn-default pull-right">Button 3</button>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
Some region
</div>
<div class="panel-body">
some content
<br/>
<br />
<br />
<br />
<br />
<br />
<br />
<br/>
some more content
<br />
<br />
<br />
<br />
<br />
<br />
<br/>
event more content
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
Some region
</div>
<div class="panel-body">
some content
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
some more content
<br />
<br />
<br />
<br />
<br />
<br />
<br />
event more content
</div>
</div>
<hr />
<footer>
<p>© Some Application</p>
</footer>
</div>
</body>
Add overflow-x to your class description. This will add a scroll bar when needed
overflow-x:auto;
Currently I have my website looking like this.
http://imgur.com/jS1vEKq
Here's the html
<html ng-app="app">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/opencv_css.css" />
</head>
<nav class="navbar navbar-default">
<div class="container"> <!-- top intro part -->
<div class="navbar-header">
<a class="navbar-brand" href="#/"> OPENCV 3.0.0</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
<body ng-controller="MainController">
<div class="row"> <!-- Dropdown menu -->
<div class="col-md-20">
<div id="main">
<form class="form-horizontal" role="form">
<label class="control-label col-md-2">Filter List:</label>
<div class="col-md-5">
<select class="form-control"
ng-model="template"
ng-options="t as t for t in templates">
</select>
</div>
</form>
</div>
</div>
<input type="file" id="fileToUpload" name="fileToUpload">
<button ng-click="add()">Upload</button>
</div>
<div class="row">
<div class="col-md-push-2 col-sm-push-1 col-lg-push-1 col-md-8-col-sm-8 col-lg-6 text-warning">
<div id="imagesData">
<img id="img1" src="" alt="" class="data-image" />
</div>
</div>
<div class="col-md-push-4 col-sm-push-2 col-lg-push-2 col-md-16-col-sm-16 text-warning">
<div id="imagesData">
<img id="img2" src="" alt="" class="data-image" />
</div>
</div>
</div>
<script src="js/jQuery.js"></script>
<script src="js/angular.js"></script>
<script src="js/ui-bootstrap-tpls-0.14.3.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
I was wondering how I would move image elements just a few pixels lower so that they aren't right against the upload button? And I know that the way I've placed the images in bootstrap must be completely wrong and awful. I'm still a noob to web dev so I simply looked at someone else's code and made it fit to my needs.
Try a < br> (Without Space) it will break one line ;)
I saw this answer was given already, sorry
You can add a margin to your .data-image class
.data-image {
margin: 10px 0px;
}
Well theres a few ways you could do this firstly (kinda cheaty) just use simple <br> tags like so...
<br><br> <--- right here
<div class="row">
<div class="col-md-push-2 col-sm-push-1 col-lg-push-1 col-md-8-col-sm-8 col-lg-6 text-warning">
<div id="imagesData">
<img id="img1" src="" alt="" class="data-image" />
</div>
</div>
<div class="col-md-push-4 col-sm-push-2 col-lg-push-2 col-md-16-col-sm-16 text-warning">
<div id="imagesData">
<img id="img2" src="" alt="" class="data-image" />
</div>
</div>
</div>
you can add it in before or after the row tag i think but try this
I've tried playing with putting the indents and placement in different places but it still appear underneath the navigation button. I want it on the same line across the top.
I might of made it a bit messy trying to get it on the same line, if so just take out whenever isn't necessary.
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap For Beginners</title>
<meta name="description" content="Hello World">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<style>
.nav {
}
.nav container-fluid {
}
.nav li {
display: inline;
padding: 20px;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
}
.jumbotron {
}
.jumbotron container-fluid {
}
.jumbotron h1 {
.footer {
}
.footer container-fluid {
}
.footer p {
}
</style>
</head>
<body>
<div class="nav">
<div class="container-fluid">
<ul class="nav nav-pills">
<li class="pull-right">Contact</li>
<li class="pull-right">About</li>
</ul>
<form class="form-horizontal">
<div class="form-group">
<div class="col-md-6">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Have Feedback?">
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-default">Submit Feedback</button>
</div>
</div>
</form>
</div>
</div>
<div class="jumbotron">
<div class="container-fluid">
<div class="row">
<h1>Student</h1>
<h1>Business</h1>
</div>
</div>
</div>
<div class="footer">
<div class="container-fluid">
<p>By:</p>
<p>For:</p>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
The input bar doesn't seem to be responsive on really really small windows, is that normal?
I also want the footer to be the same size as the nav header and the jumbotron to fill up the rest of the space in between, everything fits in the window with no scrolling.
Thanks in advance.
Your code looks great, all you have to do is wrap the form and nav in a wrapper / container then separate the sections with col-md-6. I built an example for you here http://www.bootply.com/P7VmPZOfXp.
/* CSS used here will be applied after bootstrap.css */
.footer {
height: 58px;
background: #ccc;
}
<div class="wrapper">
<div class="container">
<div class="row">
<div class="container-fluid">
<div class="col-md-6 col-lg-6">
<form class="form-horizontal">
<div class="form-group">
<div class="col-md-6">
<input class="form-control" id="exampleInputEmail2" placeholder="Have Feedback?" type="email">
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-default">Submit Feedback</button>
</div>
</div>
</form><!-- .form-horizontal -->
</div><!-- .col-6 -->
<div class="col-md-6 col-lg-6">
<div class="nav">
<ul class="nav nav-pills">
<li class="pull-right">Contact</li>
<li class="pull-right">About</li>
</ul>
</div><!-- .nav -->
</div><!-- .col-6 -->
</div><!-- .fluid container -->
</div><!-- .row -->
</div><!-- .container-->
</div><!-- .wrapper-->
<div class="jumbotron">
<div class="container-fluid">
<div class="row">
<h1>Student</h1>
<h1>Business</h1>
</div>
</div>
</div><!-- .jumbotron -->
<div class="footer">
<div class="container-fluid">
<p>By:</p>
<p>For:</p>
</div>
</div><!-- .footer -->
To address part of your issue, try putting the sections you would like to be side-by-side in the same div.row, then wrap a div.col-xx-x around each. For example:
<div class="nav">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<ul class="nav nav-pills">
<li class="pull-right">Contact</li>
<li class="pull-right">About</li>
</ul>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<form class="form-horizontal">
<div class="form-group">
<div class="col-md-6">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Have Feedback?">
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-default">Submit Feedback</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
I'm really not sure why you're not using the <navbar> class. It's there and ready to accomplish exactly what you're looking for. See this Bootply for example:
Bootply - Navbar
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input class="form-control" placeholder="Have Feedback?" type="text">
</div>
<button type="submit" class="btn btn-default">Submit Feedback</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
There is a way to do it like you have it, but I'm not sure how to get the <form> to align perfectly with the <nav> class, since there's padding on it and moves it down from the top a bit. You may need some custom CSS to handle that.
Bootply - Original
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">
<form class="form-horizontal">
<input class="form-control" id="exampleInputEmail2" placeholder="Have Feedback?" type="email">
</form>
</div>
<div class="col-xs-2">
<button type="submit" class="btn btn-default">Submit Feedback</button>
</div>
<div class="col-xs-6">
<ul class="nav nav-pills">
<li class="pull-right">Contact</li>
<li class="pull-right">About</li>
</ul>
</div>
</div>
</div>
Give them both a look and see if either works for you.
Hope that helps!