Background no responsive on Bootstrap - html

I have a problem with Bootstrap in a landing page that I made...
I have the following code
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>Landing page Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Bootstrap Core CSS -->
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
/* CSS used here will be applied after bootstrap.css */
body {
background: url('assets/img/4777.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: #851; /* This color is for you to see the android problem. */
}
.panel-default {
opacity: 0.95;
margin-top:50px;
}
.form-group.last {
margin-bottom:0px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-default">
<div class="panel-heading"> <strong class="">Σύνδεση στην πλατφόρμα Εργαστηρίων</strong>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="onoma-xristi" class="col-sm-3 control-label">Όνομα Χρήστη</label>
<div class="col-sm-9">
<input 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 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">Σύνδεση</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>
Which and when i load it on my browser it plays perfect however i make the window small etc.
But when i load it from my Samsung galaxy s5 mini
there is no responsivnes in the background.
It cuts the background in the middle and has white color on the next half of the page.
UPDATE 1
This problem is only detected in android smartphones with Chrome or Internet apps.
When someone tries it with iPhone it plays perfect!
This is the website
http://79.170.44.145/irem.co.vu/test-ptx/index.html
And the images from ANDROID are these.
iOS iPHONE
ANDROID CHROME BROWSER AND INTERNET ALSO
Any suggestions?


Please try this:
html{
height:100%;
min-height:100%;
}
body{
min-height:100%;
}
I found an article it sounds like the same problem which you have. Check it out here.


If you want the background image to scale based on the size of the browser window:
background-image:url('assets/img/4777.jpg');
background-repeat:no-repeat;
background-size:contain;
background-position:center;

Related

How to move the Header and search bar to the center of the screen?

I'm trying to create a website using bootstrap where the title and the search bar is at the center of the screen. I tried adding the my-auto, but that doesn't do anything. It shouldn't be difficult, but I can't make it work. Any ideas?
<!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>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="stylesheet.css" rel="stylesheet">
</head>
<body>
<div class="container" style="margin-top: 8%;">
<div class="col-md-6 col-md-offset-3">
<div class="row">
<div id="logo" class="text-center">
<h1>Movie</h1>
</div>
<form role="form" id="form-buscar">
<div class="form-group">
<div class="input-group">
<input id="1" class="form-control" type="text" name="search" placeholder="Search..." required/>
<span class="input-group-btn">
<button type="button" class="btn btn-outline-primary">search</button>
<i class="glyphicon glyphicon-search" aria-hidden="true"></i>
</span>
</div>
</div>
</form>
</div>
</div>
<p>movie!</p>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

You can use display:flex; property to center the content.
.container{
display: flex;
flex-direction:column;
align-items: center;
justify-content: center;
text-align: center;
}
<div class="container" style="margin-top: 8%;">
<div class="col-md-6 col-md-offset-3">
<div class="row">
<div id="logo" class="text-center">
<h1>Movie</h1>
</div>
<form role="form" id="form-buscar">
<div class="form-group">
<div class="input-group">
<input id="1" class="form-control" type="text" name="search" placeholder="Search..." required/>
<span class="input-group-btn">
<button type="button" class="btn btn-outline-primary">search</button>
<i class="glyphicon glyphicon-search" aria-hidden="true"></i>
</span>
</div>
</div>
</form>
</div>
</div>
<p>movie!</p>
</div>

What youre looking for is flex box,
Try adding to the <div class="row"> the style of
display: flex;
flex-direction: column;
align-items: center;

How to remove the white bar in the middle of my page?

I put a background image and I'm using a card at the middle of the page. I've a white bar that come across all the screen and I don't know how to remove it.
Here is a screenshot:
Here is my code
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<style type="text/css">
#media (min-width: 768px) {
html{
background-image: url('https://static.lpnt.fr/images/2017/08/17/9763596lpw-9763750-article-melbourne-jpg_4493712_660x281.jpg');
background-repeat: no-repeat;
background-size: 100%;
}
}
</style>
<body>
<div class="container" style="background-color: transparent;">
<main style="background-color: transparent;">
<div class="col-md-12" style="background-color: transparent;">
<div class="card mx-auto" style="width: 18rem; margin-top: 25%; background-color: red">
<div class="card-body" >
<h6 class="card-title text-center">Connexion</h6>
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
</div><br/>
<div class="text-center">
<a class="btn btn-primary" href="index.html">Se connecter</a>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>

Change your background to be set to the body instead of html:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<style type="text/css">
#media (min-width: 768px) {
body{
background-image: url('https://static.lpnt.fr/images/2017/08/17/9763596lpw-9763750-article-melbourne-jpg_4493712_660x281.jpg');
background-repeat: no-repeat;
background-size: 100%;
}
}
</style>
<body>
<div class="container" style="background-color: transparent;">
<main style="background-color: transparent;">
<div class="col-md-12" style="background-color: transparent;">
<div class="card mx-auto" style="width: 18rem; margin-top: 25%; background-color: red">
<div class="card-body" >
<h6 class="card-title text-center">Connexion</h6>
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
</div><br/>
<div class="text-center">
<a class="btn btn-primary" href="index.html">Se connecter</a>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>

Add transparent to your body as well
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<style type="text/css">
#media (min-width: 768px) {
html{
background-image: url('https://static.lpnt.fr/images/2017/08/17/9763596lpw-9763750-article-melbourne-jpg_4493712_660x281.jpg');
background-repeat: no-repeat;
background-size: 100%;
}
}
</style>
<body style="background-color: transparent">
<div class="container" style="background-color: transparent">
<main style="background-color: transparent;">
<div class="col-md-12" style="background-color: transparent;">
<div class="card mx-auto" style="width: 18rem; margin-top: 25%; background-color: red">
<div class="card-body" >
<h6 class="card-title text-center">Connexion</h6>
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
</div><br/>
<div class="text-center">
<a class="btn btn-primary" href="index.html">Se connecter</a>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>

there is background color in your body tag.
you can set background color to transparent.
body {
background-color: transparent;
}

The issue is caused by this line which is associated with the head tag.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
Use the below code and the issue will be fixed. The change that I made is, I changed the background property of the body to transparent which was assigned by default by the above tag. Now it works perfectly. Hope it helps.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<style type="text/css">
#media (min-width: 768px) {
html{
background-image: url('https://static.lpnt.fr/images/2017/08/17/9763596lpw-9763750-article-melbourne-jpg_4493712_660x281.jpg');
background-repeat: no-repeat;
background-size: 100%;
}
body{
background-color: transparent;
}
}
</style>
<body>
<div class="container" style="background-color: transparent;">
<main style="background-color: transparent;">
<div class="col-md-12" style="background-color: transparent;">
<div class="card mx-auto" style="width: 18rem; margin-top: 25%; background-color: red">
<div class="card-body" >
<h6 class="card-title text-center">Connexion</h6>
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
</div><br/>
<div class="text-center">
<a class="btn btn-primary" href="index.html">Se connecter</a>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>

Bootstrap 4 Card Image Resizing on Mobile

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>

How to center content in Login Screen of Framework7?

I'm creating cross-platform mobile application with Framework7. I made modal Login screen like in tutorial from https://www.tutorialspoint.com/framework7/login_screen_start_app.htm
The code of my index.html with this login modal:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap:">
<title>App Title</title>
<link rel="stylesheet" href="styles/framework7.min.css">
<link rel="stylesheet" href="styles/my-app.css">
<link rel="stylesheet" href="styles/icons.css">
</head>
<body>
<div id="app">
<!-- Status bar overlay for fullscreen mode-->
<div class="statusbar"></div>
<div class="panel-overlay"></div>
<div class="views">
<div class="login-screen modal-in">
<!-- Default view-page layout -->
<div class="view">
<div class="page">
<div class="page-content login-screen-content" style="background: whitesmoke; align-items: center;">
<div class="block-header">Login</div>
<!-- Login form -->
<div class="list color-theme-blue">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Имя пользователя</div>
<div class="item-input-wrap">
<input type="text" name="username" placeholder="Имя пользователя" required validate>
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Пароль</div>
<div class="item-input-wrap">
<input type="password" name="password" placeholder="Пароль" required validate>
<span class="input-clear-button"></span>
</div>
</div>
</li>
</ul>
</div>
<div class="list">
<ul>
<li>
<div class="row justify-content-space-around">
<button class="col-80 button button-fill color-gray">Войти</button>
</div>
</li>
</ul>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/framework7.min.js"></script>
<script src="js/my-app.js"></script>
</body>
</html>
My problem is that login's form stays on the top of screen but I want to see it in the middle. To achieve this I've tried some framework css align classes from https://framework7.io/docs/typography.html but it didn't bring any effect. So I need your help to solve this issue

give some width to your login-screen-content div and make it center using margin:0 auto
.login-screen-content {
width: 400px;
margin: 0 auto;
}
or create one div and put your login form there and use above css to it

Shifting around the image in bootstrap

Hi i know this is an amateur question, but i have some trouble.
This is my CSS`:
body{
background-image: url(street-photography1.jpg);
background-size: cover;
color: white;
background-repeat: no-repeat;
background-position:center;
background-attachment: fixed;
}
form{
background-color: rgba(19, 18, 18, 0.66);
color: white;
padding: 40px;
margin-top: 200px;
padding-bottom: 60px;
}
.form-control{
background-color: rgba(14, 14, 14, 0.35);
border-radius: 0px;
color: white;
}
.logo1{
padding: 40px;
margin-top: 200px;
}
h1{
text-align: center;
}
.btn{
width: 100%;
margin-top: 20px;
}
<!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>Bootstrap 101 Template</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<!-- 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.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="style2.css" />
</head>
<body>
<div class="container">
<div class="column">
<div class=" col-sm-5">
<img class="logo1" src="images/capture.png" alt=" logo">
</div>
</div>
<div class="row">
<div class="col-sm-offset-6 col-sm-7">
<form>
<h1>Hello, world!</h1>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember Password
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
<footer class="container">
<div class="row">
<p class="col-sm-5">
Copyright © 2016 , Singapore. All rights reserved.</p>
</div>
</footer>
</body>
</html>
So currently my webpage looks like this.
How can i shift my message logo so that the logo and my validation form are in the same line with each other?

You can next the two col divs inside of a row. i.e.
<div class="row">
<div class="col-sm-12>
<div class="row">
<div class="col-sm-6>...Logo...
<div class="col-sm-6>...Form...
</div>
</div>
</div>
</div>

Try adding col-sm-offset-6 to the logo container if you want to align them vertically.
<div class="col-sm-offset-6 col-sm-5">
<img class="logo1" src="images/capture.png" alt=" logo">
</div>
Or, if you want them aligned horizontally, the answer posted by #DPalmquist should do it.