I'd to split html page into 3 devision :
1st : contain text , table ...
2nd : this part will contain form for user submit
3nd : contain hyperlink or sth like that
my code likes below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOOTSTRAP</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<!-- <style>
.form {
margin: auto;
margin-top: 100px;
width: 300px;
padding: 20px;
border: 1px solid #DDD;
border-radius: 5px;
background-color: darkgray;
}
.form-label{
/* background-color: blue; */
color:aqua
}
</style> -->
</head>
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
<form action="" method="post">
{% csrf_token %}
<div class="form" style="width: 50%;">
<h3 class="mt-3">Please input the info</h3>
<div class="form-group mb-2">
<label class="form-label" >password:</label>
<input class="form-control" type="password" name = "password"/>
</div>
<div class="form-group mb-2 mt-2">
<label class="form-label">phone:</label>
<input class="form-control" type="text" name="phone"/>
</div>
<!-- <button style="width:100%" class="btn btn-primary btn-block mb-4 mt-3">submit</button> -->
<button style="width:100%" class="btn btn-warning btn-block mb-4 mt-3">submit</button>
</form>
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
</html>
however, its layout was not my expect, I also attach the output expect, could you please help assist ?
Here you go...
You are missing a <div> closing tag!
Optional: Change col to col-md-4 col-12.
Optional: You can remove style="width: 50%;".
Optional: Add d-flex justify-content- classes if you want the first card to be positioned to the left, the second in the middle and the third to the right.
See the snippet below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOOTSTRAP</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<!-- <style>
.form {
margin: auto;
margin-top: 100px;
width: 300px;
padding: 20px;
border: 1px solid #DDD;
border-radius: 5px;
background-color: darkgray;
}
.form-label{
/* background-color: blue; */
color: aqua;
}
</style> -->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-12 d-flex justify-content-md-start justify-content-center">
1 of 3
</div>
<div class="col-md-4 col-12 d-flex justify-content-center">
<form action="" method="post">
{% csrf_token %}
<div class="form">
<h3 class="mt-3">Please input the info</h3>
<div class="form-group mb-2">
<label class="form-label">password:</label>
<input class="form-control" type="password" name="password" />
</div>
<div class="form-group mb-2 mt-2">
<label class="form-label">phone:</label>
<input class="form-control" type="text" name="phone" />
</div>
<!-- <button style="width:100%" class="btn btn-primary btn-block mb-4 mt-3">submit</button> -->
<button style="width:100%" class="btn btn-warning btn-block mb-4 mt-3">submit</button>
</form>
</div>
</div>
<div class="col-md-4 col-12 d-flex justify-content-md-end justify-content-center">
3 of 3
</div>
</div>
</div>
</body>
</html>
You can try this
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-4 border">
1 of 1
</div>
<div class="col-xs-12 col-md-4 border">
1 of 2
</div>
<div class="col-xs-12 col-md-4 border">
1 of 3
</div>
</div>
</div>
Related
How it should look
How it is not suppose to look
So my goal is to try to make my Registration form look like my login form. All I did was added extra fields and then the form went crazy. Can anyone explain? I searched the internet for help but that didn't work and I was just really trying to make this one work because it looks nice. Yes I am working and learning dJango so I just wanted this to look nice even though it is not even needed. I go the extra mile sometimes but hate when I don't understand.
This is my index html and login form
<!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://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous"
/>
{% load static %}
<link rel="stylesheet" href="{% static 'styles.css' %}" />
<title>Albert's Page</title>
</head>
<body>
<section class="Form my-4 mx-5">
<div class="container">
<div class="row no-gutters">
<div class="col-lg-5">
<img
src="../static/img/swordandshield.jpg"
alt=""
class="img-fluid"
/>
</div>
<div class="col-lg-7 px-5 pt-5">
<h1 class="font-weight-bold py3">Welcome to My place</h1>
<h4>Sign into your account</h4>
<form action="" method="post">
<div class="form-row">
<div class="col-lg-7">
<h4>User Name</h4>
<input
type="userName"
name="userName"
class="form-control my-3 p-4"
/>
</div>
</div>
<div class="form-row">
<div class="col-lg-7">
<h4>Password</h4>
<input
type="password"
name="pw"
class="form-control my-3 p-4"
/>
</div>
</div>
<div class="form-row">
<div class="col-lg-7">
<button class="btn1 mt-3 mb-5" type="submit">Login</button>
</div>
</div>
<p>
Don't have an account yet?Register here
</p>
</form>
</div>
</div>
</div>
</section>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<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/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"
></script>
</body>
</html>
This is my registration form, it uses the same css and boostrap method
<!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://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous"
/>
{% load static %}
<link rel="stylesheet" href="{% static 'styles.css' %}" />
<title>Albert's Page</title>
</head>
<body>
<section class="Form my-4 mx-5">
<div class="container">
<div class="row no-gutters">
<div class="col-lg-5">
<img
src="../static/img/swordandshield.jpg"
alt=""
class="img-fluid"
/>
</div>
<div class="col-lg-7 px-5 pt-5">
<h1 class="font-weight-bold py3">Registration Form</h1>
<h4>Sign up for an account</h4>
<form action="" method="post">
<div class="form-row">
<div class="col-lg-7">
<h4>Your Full Name</h4>
<input
type="fullName"
name="fullName"
class="form-control my-3 p-4"
/>
</div>
<div class="form-row">
<div class="col-lg-7">
<h4>User Name</h4>
<input
type="userName"
name="userName"
class="form-control my-3 p-4"
/>
</div>
</div>
<div class="form-row">
<div class="col-lg-7">
<h4>Password</h4>
<input
type="password"
name="pw"
class="form-control my-3 p-4"
/>
</div>
</div>
<div class="form-row">
<div class="col-lg-7">
<h4>Confirm Password</h4>
<input
type="password"
name="cpw"
class="form-control my-3 p-4"
/>
</div>
</div>
<div class="form-row">
<div class="col-lg-7">
<button class="btn1 mt-3 mb-5" type="submit">Register</button>
</div>
</div>
<p>Have an account then Sign In</p>
</form>
</div>
</div>
</div>
</section>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<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/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"
></script>
</body>
</html>
and this is my css
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: rgb(211, 218, 218);
}
.row {
background: white;
border-radius: 30px;
box-shadow: 12px 12px 22px;
}
img {
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
}
.btn1 {
border: none;
outline: none;
height: 50px;
width: 100%;
background-color: black;
color: white;
border-radius: 4px;
font-weight: bold;
}
.btn1:hover {
border: none;
outline: none;
height: 50px;
width: 100%;
background-color: rgb(51, 105, 38);
color: white;
border-radius: 4px;
font-weight: bold;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: rgb(211, 218, 218);
}
.row {
background: white;
border-radius: 30px;
box-shadow: 12px 12px 22px;
}
img {
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
}
.btn1 {
border: none;
outline: none;
height: 50px;
width: 100%;
background-color: black;
color: white;
border-radius: 4px;
font-weight: bold;
}
.btn1:hover {
border: none;
outline: none;
height: 50px;
width: 100%;
background-color: rgb(51, 105, 38);
color: white;
border-radius: 4px;
font-weight: bold;
}
<!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://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous"
/>
{% load static %}
<link rel="stylesheet" href="{% static 'styles.css' %}" />
<title>Albert's Page</title>
</head>
<body>
<section class="Form my-4 mx-5">
<div class="container">
<div class="row no-gutters">
<div class="col-lg-5">
<img
src="https://images.unsplash.com/photo-1602900004353-2e786ce8f35c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=658&q=80"
alt=""
class="img-fluid"
/>
</div>
<div class="col-lg-7 px-5 pt-5">
<h1 class="font-weight-bold py3">Registration Form</h1>
<h4>Sign up for an account</h4>
<form action="" method="post">
<div class="form-row">
<div class="col-lg-7">
<h4>Your Full Name</h4>
<input
type="fullName"
name="fullName"
class="form-control my-3 p-4"
/>
</div>
<!-- I added below </div> tag here. only one change and it works. -->
</div>
<!-- Change Ended. -->
<div class="form-row">
<div class="col-lg-7">
<h4>User Name</h4>
<input
type="userName"
name="userName"
class="form-control my-3 p-4"
/>
</div>
</div>
<div class="form-row">
<div class="col-lg-7">
<h4>Password</h4>
<input
type="password"
name="pw"
class="form-control my-3 p-4"
/>
</div>
</div>
<div class="form-row">
<div class="col-lg-7">
<h4>Confirm Password</h4>
<input
type="password"
name="cpw"
class="form-control my-3 p-4"
/>
</div>
</div>
<div class="form-row">
<div class="col-lg-7">
<button class="btn1 mt-3 mb-5" type="submit">Register</button>
</div>
</div>
<p>Have an account then Sign In</p>
</form>
</div>
</div>
</div>
</section>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<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/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"
></script>
</body>
</html>
If i got your question this should help you.
You need to add crispy form tag on the top of the index page. To use crispy form tags, you need to install them first;
pip install django-crispy-forms
Then on the top of the index page (or any page where the form is present or use it in the base.html page);
{% load crispy_forms_tags %}
Create your forms in a different file named as forms.py where you can create your forms from python classes.
Import these forms into the views.py file and transfer them to html pages as variables.
In html pages;
<form action=some_url>
{{ form | crispy }} <!-- here the form is the variable whose value is set to be the class which created form in forms.py -->
</form>
I am designing a responsive form. My form has 1 label, 1 input field, and 5 buttons.
Both my buttons and the input field are under col-8.
I want my buttons to be placed in such a way that:
It should start placement below and at the beginning of the input field.
(imagine 2 rows under a col-8)
Space between 2 buttons are equal.
On small screen, buttons will be shown as stack.
Here are screenshots about what I want:
For normal screens
When small screens - it should be stacked
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<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.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<body>
<div class="container bg-dark col-6" style="margin-top: 2rem;">
<form>
<div class="form-group row">
<label for="id" class="col-4 col-form-label" style="color: white;">id</label>
<div class="col-8">
<input id="id" name="id" type="text" class="form-control">
</div>
</div>
<div class="offset-4 form-group row justify-content-between">
<button type="button" class="btn btn-primary">A</button>
<button type="button" class="btn btn-warning">B</button>
<button type="button" class="btn btn-primary">C</button>
<button type="button" class="btn btn-danger">D</button>
<button type="button" class="btn btn-info">E</button>
</div>
<div class="offset-4 form-group row">
<div class="col-sm">
<button type="button" class="btn btn-primary">A</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-warning">B</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-primary">C</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-danger">D</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-info">E</button>
</div>
</div>
<div class="offset-4 form-group row justify-content-between">
<div class="col-sm">
<button type="button" class="btn btn-primary">A</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-warning">B</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-primary">C</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-danger">D</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-info">E</button>
</div>
</div>
</form>
</div>
</body>
</html>
I have tried 3 times to place the 5 buttons.
first - only row and justify-content-between
then - row and col
finally - row, col and justify-content-between
But each of them either crosses the input field width (1st screenshot) or keeps gap from input field width (2nd screenshot).
How can I properly make the 5 buttons that satisfy both justify-content-between and stack [ col inside row ] properly?
A request: I would like to have a suggestion - that doesn't excessively involved using margin and padding, since this should be good in all screen size.
Your markup has a few problems. To avoid these in the future, read each dot (bullet point) under How it works section of the Bootstrap grid section.
Here's a breakdown of what was wrong:
not all .rows were direct children of .container or .col. Because .row has negative margins, it needs a parent having horizontal "gutter" paddings to compensate the negative margins (or you could disable the gutter by applying mx-0 or no-gutters classes).
you applied .offset-4 on .row, which is designed for .cols. This is important, because by applying it to the .row you misalign all columns in that row.
to make use of .justify-content-between you don't necessarily need another level of .row + .cols. All you need is display: flex on the element, which can be applied with d-flex class.
As an alternative solution, I've changed last .row example to use a .btn-group, which is a slightly better UI solution for this type of action-bar layout. The custom CSS is mainly for switching it to vertical on mobile (which could also be achieve by applying .btn-group-vertical to it, but it doesn't sport responsive variants).
See it working:
.custom-btn-group {
width: 100%;
}
#media(max-width: 767px) {
.custom-btn-group,
.vertical-mobile {
flex-direction: column;
}
.custom-btn-group:not(#_) .btn {
margin-left: 0;
}
.custom-btn-group:not(#_) .btn:first-child {
border-top-right-radius: .25rem;
border-bottom-left-radius: 0;
}
.custom-btn-group:not(#_) .btn:last-child {
border-bottom-left-radius: .25rem;
border-top-right-radius: 0;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<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.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<form class="bg-dark col-sm-6 py-3">
<div class="form-group row">
<label for="id" class="col-sm-3 col-md-4 col-form-label text-white">id</label>
<div class="col-sm-9 col-md-8">
<input id="id" name="id" type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<div class="col offset-sm-3 offset-md-4">
<div class="d-flex justify-content-between">
<button type="button" class="btn btn-primary">A</button>
<button type="button" class="btn btn-warning">B</button>
<button type="button" class="btn btn-primary">C</button>
<button type="button" class="btn btn-danger">D</button>
<button type="button" class="btn btn-info">E</button>
</div>
</div>
</div>
<div class="form-group row">
<div class="col offset-sm-3 offset-md-4">
<div class="d-flex justify-content-between vertical-mobile">
<button type="button" class="btn btn-primary">A</button>
<button type="button" class="btn btn-warning">B</button>
<button type="button" class="btn btn-primary">C</button>
<button type="button" class="btn btn-danger">D</button>
<button type="button" class="btn btn-info">E</button>
</div>
</div>
</div>
<div class="form-group row">
<div class="col offset-sm-3 offset-md-4">
<div class="btn-group custom-btn-group">
<button type="button" class="btn btn-primary">A</button>
<button type="button" class="btn btn-warning">B</button>
<button type="button" class="btn btn-primary">C</button>
<button type="button" class="btn btn-danger">D</button>
<button type="button" class="btn btn-info">E</button>
</div>
</div>
</div>
</form>
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<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.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<body>
<div class="container bg-dark col-6" style="margin-top: 2rem;">
<form>
<div class="form-group row">
<label for="id" class="col-4 col-form-label" style="color: white;">id</label>
<div class="col-8">
<input id="id" name="id" type="text" class="form-control">
</div>
</div>
<div class="row">
<div class="offset-4 col-8">
<div class="row justify-content-between" style="margin: 0%; padding: 0%;">
<div class="col-auto" style="margin: 0%; padding: 0%;">
<button name="button" type="button" class="btn btn-primary">A</button>
</div>
<div class="col-auto" style="margin: 0%; padding: 0%;">
<button name="button" type="button" class="btn btn-success">B</button>
</div>
<div class="col-auto" style="margin: 0%; padding: 0%;">
<button name="button" type="button" class="btn btn-warning">C</button>
</div>
<div class="col-auto" style="margin: 0%; padding: 0%;">
<button name="button" type="button" class="btn btn-danger">D</button>
</div>
<div class="col-auto" style="margin: 0%; padding: 0%;">
<button name="button" type="button" class="btn btn-primary">E</button>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
I want to mention some things that worked for me:
I had to make the margin: 0% and padding: 0% each time for col-auto, if I do not, then there is a gap created like in my screenshot.
I had to put each button in col-auto then each col-auto in row. Finally, I made the row justify-content-between, and of course, margin: 0% and padding: 0% for removing unnecessary gaps.
Finally I wrapped the whole thing under offset-4 col-8 which was wrapped under row.
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>
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>
As you can see, all of my rows from buttons to my text input are off to the right occupying the first 8 of 12 columns (given that for each row I specified only 8 rows). I Want to be able to occupy column 3-10 for each row. Thank you :)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"/>
<link rel="stylesheet" type="text/css" media="all" href="css/animate.min.css"/>
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href='css/calculator.css' type="text/css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<h1 class="text-center">Calculator</h1>
<div id="calculator">
<div class="row row-centered">
<h6 class="text-center">Sandstein Incorporated</h6>
</div class="row row-centered">
<div class="row row-centered">
<input type="text" class="col-md-12" id="input" value='0'/>
</div>
<div id="innerCalc">
<div class="row row-centered">
<button class="col-md-2 btn btn-primary">AC</button>
<button class="col-md-2 btn btn-primary">CE</button>
<button class="col-md-2 btn btn-primary">%</button>
<button class="col-md-2 btn btn-primary">/</button>
</div>
<div class="row row-centered">
<button class="col-md-2 btn btn-primary">7</button>
<button class="col-md-2 btn btn-primary">8</button>
<button class="col-md-2 btn btn-primary">9</button>
<button class="col-md-2 btn btn-primary">*</button>
</div>
<div class="row row-centered">
<button class="col-md-2 btn btn-primary">4</button>
<button class="col-md-2 btn btn-primary">5</button>
<button class="col-md-2 btn btn-primary">6</button>
<button class="col-md-2 btn btn-primary">-</button>
</div>
<div class="row row-centered">
<button class="col-md-2 btn btn-primary">1</button>
<button class="col-md-2 btn btn-primary">2</button>
<button class="col-md-2 btn btn-primary">3</button>
<button class="col-md-2 btn btn-primary">+</button>
</div>
<div class="row row-centered">
<button class="col-md-2 btn btn-primary">.</button>
<button class="col-md-2 btn btn-primary">0</button>
<button class="col-md-2 btn btn-primary">Ans</button>
<button class="col-md-2 btn btn-primary">=</button>
</div>
</div>
</div>
<script src="calculator.js"></script>
</body>
</html>
body{
background-color:#4099FF;
}
#calculator{
border-radius: 5%;
background-color: rgba(250, 250, 250, .7);
width: 40%;
margin:auto;
padding-left: 1%;
padding-right: 1%;
height:230px;
}
#input{
margin:auto;
text-align:right;
width: 70%;
}
button{
font-size: 2.0em;
margin:1px;
}
#innerCalc{
text-align: center;
}
We can use bootstrap Offsetting columns to align.
Refer > http://getbootstrap.com/css/#grid-offsetting
Remove the below css:
#input{
margin:auto;
text-align:right;
width: 70%;
}
And modify the input classes like below:
<input type="text" class="col-md-8 col-md-offset-2" id="input" value='0'/>
Add col-md-offset-2 class in fist child of each row:
<button class="col-md-2 col-md-offset-2 btn btn-primary">AC</button>
<button class="col-md-2 col-md-offset-2 btn btn-primary">7</button>
....
Try the below code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"/>
<link rel="stylesheet" type="text/css" media="all" href="css/animate.min.css"/>
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href='css/calculator.css' type="text/css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
body{
background-color:#4099FF;
}
#calculator{
border-radius: 5%;
background-color: rgba(250, 250, 250, .7);
width: 40%;
margin:auto;
padding-left: 1%;
padding-right: 1%;
height:230px;
}
button{
font-size: 2.0em;
margin:1px;
}
#innerCalc{
text-align: center;
}
</style>
</head>
<body>
<h1 class="text-center">Calculator</h1>
<div id="calculator">
<div class="row">
<h6 class="text-center">Sandstein Incorporated</h6>
</div class="row">
<div class="row">
<input type="text" class="col-md-8 col-md-offset-2" id="input" value='0'/>
</div>
<div id="innerCalc">
<div class="row">
<button class="col-md-2 col-md-offset-2 btn btn-primary">AC</button>
<button class="col-md-2 btn btn-primary">CE</button>
<button class="col-md-2 btn btn-primary">%</button>
<button class="col-md-2 btn btn-primary">/</button>
</div>
<div class="row">
<button class="col-md-2 col-md-offset-2 btn btn-primary">7</button>
<button class="col-md-2 btn btn-primary">8</button>
<button class="col-md-2 btn btn-primary">9</button>
<button class="col-md-2 btn btn-primary">*</button>
</div>
<div class="row">
<button class="col-md-2 col-md-offset-2 btn btn-primary">4</button>
<button class="col-md-2 btn btn-primary">5</button>
<button class="col-md-2 btn btn-primary">6</button>
<button class="col-md-2 btn btn-primary">-</button>
</div>
<div class="row">
<button class="col-md-2 col-md-offset-2 btn btn-primary">1</button>
<button class="col-md-2 btn btn-primary">2</button>
<button class="col-md-2 btn btn-primary">3</button>
<button class="col-md-2 btn btn-primary">+</button>
</div>
<div class="row">
<button class="col-md-2 col-md-offset-2 btn btn-primary">.</button>
<button class="col-md-2 btn btn-primary">0</button>
<button class="col-md-2 btn btn-primary">Ans</button>
<button class="col-md-2 btn btn-primary">=</button>
</div>
</div>
</div>
<script src="calculator.js"></script>
</body>
</html>
use this css...
<style>
.row
{
width:80%;
margin:0px auto;
}
</style>
If you want the 3-10 columns for the grid structure you used, #Santosh's answer would work just fine.
Just a tip:
But the approach you have used to structure the grid can be much better. In other words for your structure(calculator buttons to come on the 3-10 columns), you could have divided the contents inside id="calculator" into 3 columns rather than rows. The second(middle) column could have contained the buttons and input box.