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>
Related
Whats up friends, great friday for yous!
So I been rebuilding the website for the company I work to learn HTML+CSS.
Just doing a replica of the original website and its been going great.
So I am having some issues on the the footer right now, the items are mixing on smaller screens.
On the image below you can see (1) how it is and the desired result and (2) what is happening with me.
Here is my code:
.footer {
color: #fff;
height: 140px;
background: linear-gradient(180deg, #130936, #130936) no-repeat center;
font-family: 'Open Sans', sans-serif;
}
.container {
width: 70%;
}
p, p a {
text-decoration:none;
color: hsla(0, 0%, 100%, 0.72);
letter-spacing: 0.3px;
font-size:14px;
}
.footer-brand {
width: 136px;
background: url(https://i.ibb.co/zbq2q4D/pngwing-com-1.png) left center no-repeat;
border: 0;
text-indent: -99999px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
i {
color: #fff;
font-size: 30px;
padding-left: 4px;
padding-right: 4px;
text-align: center;
}
<!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.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css">
</head>
<body>
<footer class="footer">
<div class="container-md h-100">
<div class="row align-items-center h-100 row-cols-4">
<div class="col-3"><img class="footer-brand" src="https://i.ibb.co/zbq2q4D/pngwing-com-1.png" alt=""></div>
<div class="col-3">
<p class="p1">+44 (0) 700 677 1336</p>
<p>info#companyIwork.com</p>
</div>
<div class="col-3 text-center">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter"></i>
<i class="bi bi-instagram"></i>
<i class="bi bi-linkedin"></i>
</div>
<div class="col-3">
<p>© 2022 - TheCompanyIWork Limited</p>
</div>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
I do appreciate your help.
I think what you're missing is the use of the responsiveness prefixes for the col class, when you declare col or col-x as a class it means that the class would automatically be with a fixed size in relation to the other grids, to overcome content overlapping you'll need to the prefixed to determine the screen size from which the content is being displayed upon i.e col-sm-x, col-md-x etc
Read more about bootstrap grid from here https://getbootstrap.com/docs/5.3/layout/grid/
<!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.0" />
<title>Document</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css"
/>
</head>
<body>
<footer class="footer">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-xs-12 col-md-3 text-center">
<img
class="footer-brand image-fluid"
src="https://i.ibb.co/zbq2q4D/pngwing-com-1.png"
alt=""
style="width:80px"
/>
</div>
<div class="col-xs-12 col-md-3 text-center">
<p class="p1">
+44 (0) 700 677 1336
</p>
<p>
info#companyIwork.com
</p>
</div>
<div class="col-xs-12 col-md-3 text-center">
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter"></i>
<i class="bi bi-instagram"></i>
<i class="bi bi-linkedin"></i>
</div>
<div class="col-xs-12 col-md-3 text-center">
<p>© 2022 - TheCompanyIWork Limited</p>
</div>
</div>
</div>
</footer>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"
></script>
</body>
</html>
NOTE: The snippet above does not consider your stylesheet, so be cautious your stylesheet might override some bootstrap styles
SUGGESTION: Also consider reading bootstrap colors from https://getbootstrap.com/docs/5.0/utilities/colors/
I am making a website for learning purposes in HTML with a sign-in form but, when I put an image near the form the form moved to the bottom. I tried padding-top, padding-bottom nothing is helping how do I resolve this issue? My website :
Here's my 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.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="App.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#1,900&display=swap" rel="stylesheet">
</head>
<body style="background-color: #FFB30A;">
<div>
<div>
<nav class="navbar navbar-light " style="background-color: #000029 ;">
<div class="container-fluid">
<img src="House real estate logo template 2.png" style="width: 60px; height: 60px; padding-left: 10px;" alt="">
<form class="d-flex">
<button class="btn btn-success" style="width: 90px; font-family: 'Roboto', sans-serif;" type="submit">Sign Up</button>
</form>
</div>
</nav>
</div>
<div style="width: 600px;">
<img src="House real estate logo template.png" style="padding-left: 100px; margin-top: 50px ;" alt="Hope">
</div>
<div style="width: 600px; float: right;">
<form style="width: 600px; padding-right: 100px; " >
<div class="row mb-3" >
<label for="inputEmail3" style="font-family: 'Roboto', sans-serif;" class="col-sm-2 col-form-label">User Id</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3">
</div>
</div>
<div class="row mb-3">
<label for="inputPassword3" style="font-family: 'Roboto', sans-serif;" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3">
</div>
</div>
<button type="submit" style="font-family: 'Roboto', sans-serif; " class="btn btn-success">Sign in</button>
</form>
</div>
<div style="border-left: 3px solid #1f1f1f; height: 500px; position: absolute; left: 45%; margin-left: -3px; top: 0; margin-left: 50px; margin-top: 100px;"></div>
</div>
</body>
</html>
One solution can be :
Wrap the components that have to appear side-by-side into a div and apply flex CSS to the wrapper div
Add flex-grow CSS to the children according to the layout ratios.
Plus, add elements to the container div in right to left order, while using relative positioning.
The following solution does the same.
<!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.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="App.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#1,900&display=swap" rel="stylesheet">
</head>
<body style="background-color: #FFB30A;">
<div>
<div>
<nav class="navbar navbar-light " style="background-color: #000029 ;">
<div class="container-fluid">
<img src="https://joeschmoe.io/api/v1/random" style="width: 60px; height: 60px; padding-left: 10px;" alt="">
<form class="d-flex">
<button class="btn btn-success" style="width: 90px; font-family: 'Roboto', sans-serif;" type="submit">Sign Up</button>
</form>
</div>
</nav>
</div>
<div style="display: flex">
<div style="width: 600px; flex-grow: 1">
<img src="https://joeschmoe.io/api/v1/random" style="padding-left: 100px; margin-top: 50px ;" alt="Hope">
</div>
<div style="border-left: 3px solid #1f1f1f; height: 500px; position: relative; margin-left: -3px; top: 0; margin-left: 50px; margin-top: 100px;">
</div>
<div style="width: 600px; float: right; flex-grow: 1; margin-left: 50px; margin-top: 100px;">
<form style="width: 600px; padding-right: 100px; " >
<div class="row mb-3" >
<label for="inputEmail3" style="font-family: 'Roboto', sans-serif;" class="col-sm-2 col-form-label">User Id</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3">
</div>
</div>
<div class="row mb-3">
<label for="inputPassword3" style="font-family: 'Roboto', sans-serif;" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3">
</div>
</div>
<button type="submit" style="font-family: 'Roboto', sans-serif; " class="btn btn-success">Sign in</button>
</form>
</div>
</div>
</div>
</body>
</html>
float: right will move an element to the right and let content that follows it bubble up to its left.
The form is at the end of the page, so there is nothing that follows it.
When using floats for layout, you need to float the first element and not the last element.
That said, do not use floats for layout. They aren't designed for it even if they where the best thing CSS had for hacking a layout into a webpage 20 years ago.
We now have Flexbox (for organising rows of data) and Grid (for organising rows + columns of data).
Use those instead.
Since you have tagged this bootstrap-5, you might want to use its Flexbox based grid system (where it has some predefined styles for laying out content in a grid that you apply by adding classes to the elements).
Solution
I have added float: left; at tag where hope image is there
and added margin-top property .
<div style="width: 600px; float: left; ">
<img src="img.jpg" style="display: block; margin-left: 50px; margin-right: auto; margin-top: 130px ; width: 100%;" alt="Hope">
</div>
<div style="width: 600px; float: right; margin-top: 200px;" >
<form style="width: 600px; padding-right: 100px; " >
<div class="row mb-3" >
<label for="inputEmail3" style="font-family: 'Roboto', sans-serif;" class="col-sm-2 col-form-label">User Id</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3">
</div>
</div>
<div class="row mb-3">
<label for="inputPassword3" style="font-family: 'Roboto', sans-serif;" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3">
</div>
</div>
<button type="submit" style="font-family: 'Roboto', sans-serif; " class="btn btn-success">Sign in</button>
</form>
</div>
You Can Check My Output In Image
<!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.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="App.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#1,900&display=swap" rel="stylesheet">
</head>
<body style="background-color: #FFB30A;">
<div>
<div>
<nav class="navbar navbar-light " style="background-color: #000029 ;">
<div class="container-fluid">
<img src="House real estate logo template 2.png" style="width: 60px; height: 60px; padding-left: 10px;" alt="">
<form class="d-flex">
<button class="btn btn-success" style="width: 90px; font-family: 'Roboto', sans-serif;" type="submit">Sign Up</button>
</form>
</div>
</nav>
</div>
<div style="width: 600px; float: left; ">
<img src="https://i.ibb.co/Vg1Jyfz/images.jpg" style="display: block; margin-left: 50px; margin-right: auto; margin-top: 130px ; width: 100%;" alt="Hope">
</div>
<div style="width: 600px; float: right; margin-top: 200px;" >
<form style="width: 600px; padding-right: 100px; " >
<div class="row mb-3" >
<label for="inputEmail3" style="font-family: 'Roboto', sans-serif;" class="col-sm-2 col-form-label">User Id</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3">
</div>
</div>
<div class="row mb-3">
<label for="inputPassword3" style="font-family: 'Roboto', sans-serif;" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3">
</div>
</div>
<button type="submit" style="font-family: 'Roboto', sans-serif; " class="btn btn-success">Sign in</button>
</form>
</div>
<div style="border-left: 3px solid #1f1f1f; height: 500px; position: absolute; left: 45%; margin-left: -3px; top: 0; margin-left: 50px; margin-top: 100px;"></div>
</div>
</body>
</html>
Hello I am unable to align the button with the above text box on right side. There is no effect to set the margin of the fieldset.
Below is my 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.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<title>Document</title>
<style>
*{
box-sizing: border-box;
}
.container{
max-width:520px;
max-height:180px;
background-color:antiquewhite;
}
fieldset{
max-width:518px;
max-height:178px;
padding-right:15px;
padding-left:15px;
}
/*.form-group{
max-width:518px;
}*/
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class ="col-sm-6 col-sm-offset-3 form-box">
<form role="form" action method="post" class="registration-form"
style="width:482px;height:175px;background-color:aqua;margin-left:5px;margin-right:5px;"
>
<fieldset><!--Start 2nd form field set-->
<div class="form-bottom">
<div class="form-group" style="margin-left:5px;margin-right:5px;margin-top:20px;width:100%;padding-right:5px;padding-left:5px;" >
<input type="text" name="form-email" placeholder="Enter Your email" class="form-email form-control" id="form-email">
</div><!--End of 2nd form groupdiv-->
<button type="button" class="btn btn-primary btn-next" style="margin-top:20px;margin-bottom:20px;margin-left:10px;padding-right:15px;width:100%">Get Started</button>
</div><!--End of bottom div-->
</fieldset><!--End of second form fieldset-->
</form>
</body>
</html>
Please fix the problem and tell me when we set the margin of fieldset 10px from right side then it will br the boundary of fieldset of 110px for element? Is it ok or there is any other concept?
try 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.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
.container {
max-width: 520px;
max-height: 180px;
background-color: antiquewhite;
}
fieldset {
max-width: 518px;
max-height: 178px;
padding-right: 15px;
padding-left: 15px;
}
/*.form-group{
max-width:518px;
}*/
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3 form-box">
<form role="form" action method="post" class="registration-form" style="width:482px;height:175px;background-color:aqua;margin-left:5px;margin-right:5px;padding-left: 20px;padding-right: 20px;">
<fieldset>
<!--Start 2nd form field set-->
<div class="form-bottom">
<div class="form-group" style="margin-top:20px;width:100%;">
<input type="text" name="form-email" placeholder="Enter Your email" class="form-email form-control" id="form-email">
</div>
<!--End of 2nd form groupdiv-->
<button type="button" class="btn btn-primary btn-next" style="margin-top:20px;margin-bottom:20px;padding-right:15px;width:100%">Get Started</button>
</div>
<!--End of bottom div-->
</fieldset>
<!--End of second form fieldset-->
</form>
</body>
</html>
I attach a snipped below, as you can see, the 2 buttons show a different height, I would like them to have the same height when I change the page size, and be on the same line.
I don't want to just say height: 100px, because when I open it on a phone it would deform.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
.dropbtn {
background-color: #264653;
border: none;
color: white;
padding: 0.1%;
text-align: center;
cursor: pointer;
width: 100%;
flex-grow: 1;
display: block;
}
.dropdown {
position: relative;
display: block;
width: 100%;
}
</style>
</head>
<body>
<h1 align="center" style="padding-left: 20px; width: 100%">ANNOTATION TOOL</h1>
<div style="width: 100%; height: 100%;" class="container-fluid">
<div class="dropdown" style="width: 50%; float:left; height: 100%;">
<button class="dropbtn" style="width: 100%; height:100%;"><h2>File: 2019717_1828_FMCI_107.txt Device 107 </h2> </button>
</div>
<div class="dropdown" style="width: 50%; float:right; height: 100%;">
<button class="dropbtn" style="height: 100%;"><h2> Channel:0 <i class="fa fa-caret-down"></i></h2> </button></div>
</body>
Thank you very much for your help.
you can use bootstrap container for it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<title>Title</title>
</style>
</head>
<body>
<h1 align="center" style="padding-left: 20px; width: 100%">ANNOTATION TOOL</h1>
<div class="container">
<div class="row">
<div class="col-sm">
<button type="button" class="btn btn-primary" style="width: 100% " >Primary</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-primary" style="width: 100% "> Primary</button>
</div>
</div>
</div>
<div style="width: 100%; height: 100%;" class="container-fluid">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
check: https://jsfiddle.net/pk78ntze/
I have the folowing code that renders different from what I was expecting when you add the form tag.
Try removing the form tags to see the difference.
<!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.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ=" crossorigin="anonymous" />
<title>Hello, world!</title>
<style>
html, body {
height: 100%;
}
.min-100 {
min-height: 100%;
}
.fondo {
background-image: url('https://source.unsplash.com/uR6dIgDnt38/1920x1080');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.sombra{text-shadow: 1px 1px 2px rgb(0, 0, 0);}
</style>
</head>
<body>
<div class="container-fluid min-100 d-flex flex-column">
<div class="row flex-grow-1 vh-100 bg-info">
<main class="col p-4 flex-grow-1 fondo">
<div class="container d-flex h-100">
<div class="row justify-content-center align-self-center col-md-12">
<h1 class="text-white mb-4 sombra">Title</h1>
<form action="">
<div class="form-group col-md-12">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><i class="fas fa-link"></i></span>
</div>
<input type="text" class="form-control" placeholder="Upload File">
<div class="input-group-append">
<button class="btn btn-success">Guardar</button>
</div>
</div>
</div>
</form>
<p class="text-white lead sombra">A paragraph!</p>
</div>
</div>
</main>
</div>
</div>
</body>
</html>
With form tag
Without form tag
I want it to look like the second picture, but dont know why the form tag changes the alignment.
Your form tag should has a col-sm-12 class
<form action="" class="col-sm-12">
...
</form>
Change your form code with following code :
<form action="" class="col-sm-12">
<div class="row">
<div class="form-group col-md-12">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><i class="fas fa-link"></i></span>
</div>
<input type="text" class="form-control" placeholder="Upload File">
<div class="input-group-append">
<button class="btn btn-success">Guardar</button>
</div>
</div>
</div>
</div>
</form>
Align it and you should use col class only inside row class.
<!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.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ=" crossorigin="anonymous" />
<title>Hello, world!</title>
<style>
html, body {
height: 100%;
}
.min-100 {
min-height: 100%;
}
.fondo {
background-image: url('https://source.unsplash.com/uR6dIgDnt38/1920x1080');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.sombra{text-shadow: 1px 1px 2px rgb(0, 0, 0);}
</style>
</head>
<body>
<div class="container-fluid min-100 d-flex flex-column">
<div class="row flex-grow-1 vh-100 bg-info">
<main class="col p-4 flex-grow-1 fondo">
<div class="container d-flex h-100">
<div class="row justify-content-center align-self-center col-md-12">
<h1 class="text-white mb-4 sombra">Title</h1>
<form action="" class="w-100">
<div class="form-group col-md-12">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><i class="fas fa-link"></i></span>
</div>
<input type="text" class="form-control border-0" placeholder="Upload File">
<div class="input-group-append">
<button class="btn btn-success">Guardar</button>
</div>
</div>
</div>
</form>
<p class="text-white lead sombra">A paragraph!</p>
</div>
</div>
</main>
</div>
</div>
</body>
</html>
Try this structure. It will easy for you.
.fondo {
background-image: url('https://source.unsplash.com/uR6dIgDnt38/1920x1080');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 100vh
}
.sombra{text-shadow: 1px 1px 2px rgb(0, 0, 0);}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ=" crossorigin="anonymous" />
<title>Hello, world!</title>
</head>
<body>
<div class="fondo d-flex justify-content-center align-items-center flex-column">
<h1 class="text-white mb-4 sombra">Title</h1>
<form action="">
<div class="form-group">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><i class="fas fa-link"></i></span>
</div>
<input type="text" class="form-control" placeholder="Upload File">
<div class="input-group-append">
<button class="btn btn-success">Guardar</button>
</div>
</div>
</div>
</form>
<p class="text-white lead sombra">A paragraph!</p>
</div>
</body>
</html>