I'm using Bootstrap 4 to style a form in HTML+CSS.
I have six checkboxes with label that on certain media sizes should be display as two rows of three columns. Checkboxes on each column should be aligned. Also, the longest text on any row from the right column, should be right-aligned with the rest of the form. So far, I can only manage one of those things. So, how do I go from this:
Or this:
To this (image edited):
Below is the HTML code I'm using for the first example, with the checkboxes aligned (it's embedded within other divs but they should not have any role in this issue).
FYI, I'm adding a bit of styling with the following custom styles (included in survey01.css):
.form-inline>div>label {
white-space: nowrap;
}
#media (max-width: 767px) {
#nature-label {
margin-bottom: 0;
}
}
#media (max-width: 1199px) {
#nature-label {
margin-bottom: 0;
}
}
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- IE displays content in highest supported mode -->
<title>Do you know what proteins are?</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- width as in viewport; zoom=100% -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" media="screen" href="survey01.css" />
<!-- optimize for screens -->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1 id="title" class="display-4 text-center">Test title</h1>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p id="description" class="text-center">Test subtitle.</p>
</div>
</div>
<div class="jumbotron">
<form id="survey-form">
<div class="form-group row m-0">
<div class="container-fluid p-0">
<div class="form-row">
<div class="form-group form-group-md col-md-5 col-lg-6 mb-2">
<!-- #media modifies mb-2 -->
<div class="row m-0">
<label for="nature" id="nature-label" class="pr-2 pl-0">Do you think proteins are a natural or synthetic product?</label>
</div>
</div>
<div class="form-inline justify-content-between align-items-start col-md-7 col-lg-6 mb-3">
<div class="d-flex justify-content-around align-items-start col-12 col-sm-auto pr-0">
<label for="nature1">
<input type="radio" id="nature1" name="nature" value="natural" class="mr-1">Natural
</label>
</div>
<div class="d-flex justify-content-around align-items-start col-12 col-sm-auto pr-0">
<label for="nature2">
<input type="radio" id="nature2" name="nature" value="synthetic" class="mr-1">Synthetic
</label>
</div>
<div class="d-flex justify-content-around align-items-start col-12 col-sm-auto pr-0">
<label for="nature3">
<input type="radio" id="nature3" name="nature" value="both" class="mr-1">Both
</label>
</div>
<div class="d-flex justify-content-around align-items-start col-12 col-sm-auto pr-0">
<label for="nature4">
<input type="radio" id="nature4" name="nature" value="dontknow" class="mr-1">Don't know
</label>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row m-0">
<div class="container-fluid p-0">
<div class="form-row">
<div class="form-group form-group-md col-md-4 col-lg-6 col-xl-4 mb-2">
<!-- #media modifies mb-2 -->
<div class="row m-0">
<label for="identify" id="identify-label" class="pr-2 pl-0">Which of the following qualify as 'proteins'?</label>
</div>
</div>
<div class="form-inline justify-content-between align-items-start col-md-8 col-lg-6 col-xl-8 mb-3">
<div class="d-flex justify-content-center justify-content-sm-start align-items-start col-12 col-sm-4 col-xl-auto pr-0">
<label for="identify1">
<input type="checkbox" id="identify1" name="identify" value="meat" class="mr-1">Meat
</label>
</div>
<div class="d-flex justify-content-center justify-content-sm-start align-items-start col-12 col-sm-4 col-xl-auto pr-0">
<label for="identify2">
<input type="checkbox" id="identify2" name="identify" value="arginine" class="mr-1">Arginine
</label>
</div>
<div class="d-flex justify-content-center justify-content-sm-start align-items-start col-12 col-sm-4 col-xl-auto pr-0">
<label for="identify3">
<input type="checkbox" id="identify3" name="identify" value="haemoglobin" class="mr-1">Hæmoglobin
</label>
</div>
<div class="d-flex justify-content-center justify-content-sm-start align-items-start col-12 col-sm-4 col-xl-auto pr-0">
<label for="identify4">
<input type="checkbox" id="identify4" name="identify" value="bar" class="mr-1">Protein bar
</label>
</div>
<div class="d-flex justify-content-center justify-content-sm-start align-items-start col-12 col-sm-4 col-xl-auto pr-0">
<label for="identify5">
<input type="checkbox" id="identify5" name="identify" value="egg" class="mr-1">Egg
</label>
</div>
<div class="d-flex justify-content-center justify-content-sm-start align-items-end col-12 col-sm-4 col-xl-auto pr-0">
<label for="identify6">
<input type="checkbox" id="identify6" name="identify" value="albumin" class="mr-1">Albumin
</label>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</body>
Related
So I am trying to do a login form using HTML and Bootstrap but I can't get to align all elements in centre. They seem to be in centre but the header which is centre aligned by Bootstrap is not in one line vertically with the other elements. I am using the Grid and I need the elements to be centre-aligned in medium and small screen. In medium screen I tried to follow the logic of 12 column of the grid so to fill spaces until I arrive in centre but still the elements are not aligned correctly.
Also I can't apply the desired radius to login form. I need it to be more rounded. Bootstrap doesn't seem to work. CSS does but it applies radius to all the divs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css" >
<title>Social Network</title>
</head>
<body class="bg-primary">
<div class="row">
<div class="col-3 col-md-6"></div>
<header class="text-center fs-3 text-white my-5">
SOCIAL NETWORK
</header>
</div>
<div class="row">
<div class="col-2 col-md-4 m-1"></div>
<div class="rounded-3 text-center bg-light p-4 col-centered col-8 col-md-3 px-5">
<div>
<input type="email" class="form-control my-5" id="inputUsername" aria-describedby="emailHelp" placeholder="Username">
<input type="password" class="form-control my-5" id="inputPassword1" placeholder="Password">
</div>
<div class="text-center">
<button type="submit my-5" class="btn btn-primary">Log In</button>
</div>
<div class="text-center my-4 text-secondary">OR</div>
<div class="text-center">
<a class="text-decoration-none link-secondary" href="">Forgot Password?</a>
</div>
</div>
<div class="col-md-3"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
</div>
<div class="row">
<div class="col-1 col-md-3"></div>
<div class="col-1 col-md-1"></div>
<div class="text-center text-secondary rounded-pill col-8 col-md-3 bg-light my-4 py-3" id="signUp">
<div class="text-centered">Don't have an account? <a class="text-primary px-3" href="">Sign Up</a></div>
</div>
<div class="col-1 col-md-3"></div>
<div class="col-md-2"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
I've mocked up a simple example for you based on your Div boxes and layout. In short you can use.
There's a couple of things to not here. The centering is achieved by using Flex and justifying the content to the centre - d-flex justify-content-center
As for the border radius, I've added a rule called login-box, which sets the radius to 20px.
Hope that helps.
.login-box {
background-color: #fff;
border-radius: 20px;
}
.new-user-box {
border-radius: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css" >
<title>Social Network</title>
</head>
<body class="bg-primary">
<div class="d-flex justify-content-center">
<header class="text-center fs-3 text-white my-5">
Social Network
</header>
</div>
<div class="row d-flex justify-content-center ">
<div class="col-6 login-box">
<div>
<input type="email" class="form-control my-5" id="inputUsername" aria-describedby="emailHelp" placeholder="Username">
<input type="password" class="form-control my-5" id="inputPassword1" placeholder="Password">
</div>
<div class="text-center">
<button type="submit my-5" class="btn btn-primary">Log In</button>
</div>
<div class="text-center my-4 text-secondary">OR</div>
<div class="text-center mb-4">
<a class="text-decoration-none link-secondary" href="">Forgot Password?</a>
</div>
</div>
</div>
<div class="row d-flex justify-content-center">
<div class="text-center text-secondary col-6 bg-light my-4 py-3 new-user-box" id="signUp">
<div class="text-centered">Don't have an account? <a class="text-primary px-3" href="">Sign Up</a></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
I have two nested columns in one row, one set of columns height is greater than the other. It seems that bootstrap is adding some additional padding/margin to the checkboxes that I am unable to figure out (see image below). If I remove checkboxes for text, the layout is fine.
Is there a way to make the second nested columns have the same height (Right bordered item in picture)?
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container mt-3">
<div class="row">
<div class="col-2">
<div class="row">
<div class="col-4 d-flex justify-content-center">
<span class="">1</span>
</div>
<div class="col-4 d-flex justify-content-center">
<span class="">2</span>
</div>
<div class="col-4 d-flex justify-content-center">
<span class="">3</span>
</div>
</div>
</div>
<div class="col-10">
<div class="row">
<div class="col-2 d-flex">
<span>Service List</span>
</div>
<div class="col-8 text-center">
<span>Description</span>
</div>
<div class="col-1 px-1 text-start">
<span >Amount</span>
</div>
<div class="col-1">
<span></span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-2">
<div class="row align-items-center">
<div class="col-4 d-flex justify-content-center align-items-center ">
<div class="form-check align-items-center d-flex justify-content-center align-items-center">
<input class="form-check-input" type="checkbox" value="{{obj.total}}" id="flexCheckDefault" checked>
</div>
</div>
<div class="col-4 d-flex justify-content-center">
<div class="form-check d-flex justify-content-center align-items-center">
<input class="form-check-input" type="checkbox" value="{{obj.total}}" id="flexCheckDefault" checked>
</div>
</div>
<div class="col-4 d-flex justify-content-center border">
<div class="form-check d-flex justify-content-center align-items-center">
<input class="form-check-input" type="checkbox" value="{{obj.total}}" id="flexCheckDefault" checked>
</div>
</div>
</div>
</div>
<div class="col-10">
<div class="row align-items-center">
<div class="col-2 border">
<span>Line Item Name</span>
</div>
<div class="col-8">
<span>Line Item Description</span>
</div>
<div class="col-1">
<span>Total</span>
</div>
<div class="col-1">
<div class="form-check d-flex justify-content-center">
<input class="form-check-input align-self-center" type="checkbox" value="{{obj.total}}" id="flexCheckDefault" >
</div>
</div>
</div>
</div>
</div>
I'm trying to put extra margin space between columns on my Bootstrap grid layout.
I've tried adding custom CSS class like this
.classWithPad {
margin: 10px;
padding: 10px;
}
but didn't solve my problem, also I've tried adding ml-1 and mr-1 but I didn't get desired. Here is my code:
When I tried to add some extra margin/padding the corresponding column is moved to a new row.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="row mt-4 justify-content-between">
<div class="col-md-4 card border-radius-15 bg-shadow pt-3">
<h5>General Information</h5>
<hr/>
<div class="row">
<div class="col-md-6 pr-0">
paragraphs...
</div>
<div class="col-md-6 pl-0 text-right">
paragraphs...
</div>
</div>
</div>
<div class="col-md-4 card border-radius-15 bg-shadow pt-3">
<h5>Features</h5>
<hr/>
<div class="row">
<div class="col-md-6 pr-0">
</div>
<div class="col-md-6 pl-0 text-right">
</div>
</div>
</div>
<div class="col-md-4 card border-radius-15 bg-shadow pt-3">
<h5>Game Manufacturers</h5>
<hr/>
<div class="row">
<div class="col-md-6 pr-0">
</div>
<div class="col-md-6 pl-0 text-right">
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
You generally don't want to mix structural and presentation elements. In this case, you've combined columns with cards. Put the cards inside the columns, and if you wanted them full-height you can use h-100 on them.
That, along with the container that should be present around outer rows, and you're all good. If you want more spacing, use px-* classes on the columns.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="container-fluid">
<div class="row mt-4 justify-content-between">
<div class="col-4">
<div class="card h-100 border-radius-15 bg-shadow pt-3">
<h5>General Information</h5>
<hr/>
<div class="row">
<div class="col-md-6 pr-0">
<p>paragraphs...</p>
</div>
<div class="col-md-6 pl-0 text-right">
<p>paragraphs...</p>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card h-100 border-radius-15 bg-shadow pt-3">
<h5>Features</h5>
<hr/>
<div class="row">
<div class="col-md-6 pr-0">
<p>paragraphs...</p>
</div>
<div class="col-md-6 pl-0 text-right">
<p>paragraphs...</p>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card h-100 border-radius-15 bg-shadow pt-3">
<h5>Game Manufacturers</h5>
<hr/>
<div class="row">
<div class="col-md-6 pr-0">
<p>paragraphs...</p>
</div>
<div class="col-md-6 pl-0 text-right">
<p>paragraphs...</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
The layout of page is miss-placed when columns are nested inside another column
<div class="container">
<div class="row">
<div class="col-6">
<div class="col-6">
<label>Name</label>
<input type="text" class="form-control" />
</div>
<div class="col-6">
<label>Name</label>
<input type="text" class="form-control" />
</div>
</div>
<div class="col-6"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-6">
<label>Name</label>
<input type="text" class="form-control" />
</div>
<div class="col-6">
<label>Name</label>
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="col-6"></div>
</div>
</div>
An advanced way:
<div class="container bg-primary" style="width: 800px; height: 100px; ">
<div class="row ml-1 h-100">
<div class="col-10 ml-0 my-auto h-75 container bg-danger">
<div class="row ml-1 h-100">
<div class="col-8 ml-0 my-auto h-75 container bg-warning">
<div class="row ml-1 h-100">
<div class="col-6 ml-0 my-auto h-75 container bg-success">
<div class="row ml-1 h-100">
<div class="col-4 ml-0 my-auto h-75 container bg-dark">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Consider the following Angular HTML template section:
<div class="row" [formGroup]="saveForm">
<label for="sections" class="col-md-3 col-form-label">Sections:</label>
<div class="col-md-9">
<a class="add-link" (click)="addSection()">Add Section</a>
<div class="mt-2 mb-2" formArrayName="sections">
<div *ngFor="let section of saveForm.get('sections')['controls']; let i=index" [formGroupName]="i">
<div class="row mb-2">
<div class="col-md-3">
<label for="from">From:</label>
</div>
<div class="col-md-2">
<input class="form-control" type="text" formControlName="from">
</div>
<div class="col-md-2">
<label for="to">To:</label>
</div>
<div class="col-md-2 mb-2">
<input class="form-control" type="text" formControlName="to">
</div>
<div class="col-md-1 custom-icon">
<i class="fas fa-minus-circle fa-lg clickable" (click)="deleteRow(i)"></i>
</div>
</div>
</div>
</div>
</div>
</div>
This renders like so:
Now if I go to the mobile view in the browser it looks like this:
Both inputs will be limited to no more than 4 digits so I do not need them to be that large. Ideally I would like to have the two labels with their inputs on the same line with the delete icon below them (To be honest I'm not sure what to do with it UX wise). If that is not possible at least to have each label with its input on the same line.
I think something like the following would be best:
How can I accomplish this without breaking the full desktop view?
I am using Bootstrap 4.3.1
Thank you.
This is what you need for under the md sized devices:
divide the rows into col-4 for label
divide the rows into col-6 for input (or smaller)
style the icon via position:absolute to be on the right
Working snippet below:
#media screen AND (max-width:768px) {
.custom-icon {
position: absolute;
right: 20px;
top: -10px
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class='container-fluid'>
<div class="row" [formGroup]="saveForm">
<label for="sections" class="col-md-3 col-form-label">Sections:</label>
<div class="col-md-9">
<a class="add-link" (click)="addSection()">Add Section</a>
<div class="mt-2 mb-2" formArrayName="sections">
<div *ngFor="let section of saveForm.get('sections')['controls']; let i=index" [formGroupName]="i">
<div class="row mb-2">
<div class="col-4 col-md-3">
<label for="from">From:</label>
</div>
<div class="col-6 col-md-2">
<input class="form-control" type="text" formControlName="from">
</div>
<div class="col-4 col-md-2">
<label for="to">To:</label>
</div>
<div class="col-6 col-md-2 mb-2">
<input class="form-control" type="text" formControlName="to">
</div>
<div class="col-1 col-md-1 custom-icon">
<i class="fa fa-minus-circle fa-lg clickable" (click)="deleteRow(i)"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
you can achieve this without any custom stylesheet. its all about bootstrap classes.
I just wrapped inputs and labels in separate div and remove icon in separate div.
Please have a look at the below snippet.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" />
<div class="row" [formGroup]="saveForm">
<label for="sections" class="col-md-3 col-form-label">Sections:</label>
<div class="col-md-9">
<a class="add-link" (click)="addSection()">Add Section</a>
<div class="mt-2 mb-2" formArrayName="sections">
<div *ngFor="let section of saveForm.get('sections')['controls']; let i=index" [formGroupName]="i">
<div class="row mb-2 mb-sm-0">
<div class="col-10">
<div class="row">
<div class="col-6 col-sm-3 mb-2 mb-sm-0">
<label for="from">From:</label>
</div>
<div class="col-6 col-sm-3 mb-2 mb-sm-0">
<input class="form-control" type="text" formControlName="from">
</div>
<div class="col-6 col-sm-3">
<label for="to">To:</label>
</div>
<div class="col-6 col-sm-3">
<input class="form-control" type="text" formControlName="to">
</div>
</div>
</div>
<div class="col-2 d-flex align-items-center">
<div class=" custom-icon">
<i class="fas fa-minus-circle fa-lg clickable text-danger" (click)="deleteRow(i)"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>