I want the icon to be aligned with the text box and centered on the container
i tried this but the icon stay upper than text box
<div class="container d-flex justify-content-center" id="baseContainer">
<div class="row">
<input type="text" class="input-form col-sm-3 offset-sm-0" id="searchForm" placeholder="Busque um filme ou série">
<i class="fa-solid fa-magnifying-glass col-sm" onclick="foo()"></i>
</div>
</div>
and if i remove the row and container div, stay the way i want but uncentered
Add a class align-items-center to the row
<div class="container d-flex justify-content-center" id="baseContainer">
<div class="row align-items-center">
<input type="text" class="input-form col-sm-3 offset-sm-0" id="searchForm" placeholder="Busque um filme ou série">
<i class="fa-solid fa-magnifying-glass col-sm" onclick="foo()"></i>
</div>
</div>
You can use Flexbox to align the search icon vertically:
<div class="container d-flex justify-content-center" id="baseContainer">
<div class="row">
<input
type="text"
class="input-form col-sm-3 offset-sm-0"
id="searchForm"
placeholder="Busque um filme ou série"
/>
<i
class="fa-solid fa-magnifying-glass col-sm d-flex align-items-center"
onclick="foo()"
></i>
</div>
</div>
Related
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 am creating a Template HTML CSS page for a To-Do Application and I am using Grid Layout; Container-Fluid with Rows and Columns. I have spaced a Button, some Text, and further 2 Buttons as follows:
<div class="container-fluid">
<div class="row">
<div class="col-3"></div>
<div class="col-6">
<div class="card">
<div class="card-body">
<div class="flex-heading">
<i
class="fas fa-clipboard-list fa-4x icon-backgroundcolor addmain-icon"
></i>
<p class="subhead">ADD ITEM</p>
</div>
<hr />
<div class="row within">
<div class="col-6">
<label class="add_line"
>What do you want to do?</label
>
</div>
</div>
<div class="row within">
<div class="col-8">
<div class="md-form form-group">
<input
type="text"
class="form-control"
name = "description"
[(ngModel)] = "description"
placeholder="I want to do something good"
(keydown.enter)="onKeydown($event, content)"
/>
</div>
</div>
<div class="col-4">
<button
type="button"
class="btn btn-flat add-button"
(click)="open(content)"
>
<i
class="fas fa-plus-circle fa-2x add-icon"
></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-3"></div>
</div>
</div>
There are Gutters between each Column and the text goes to the next line. What can be a good way to decrease gutter space and let the text space out?
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>
Can anyone help me figure out what's wrong with my layout? I am adding some controls to a card and the content overflows. I want the card to be as wide as the widest row...
<div class="container">
<div class="row">
<div class="col-auto p-4 ">
<div class="card">
<div class="card-header"><h4>Find a contact</h4></div>
<div class="card-body">
<div class="row flex-nowrap">
<div class="col-4 p-1 text-right">First:</div>
<div class="col-8 p-1"><input type="text">
</div>
</div>
<div class="row p-1 flex-nowrap">
<div class="col-4 p-1 text-right">Last:</div>
<div class="col-8 p-1"><input type="text">
</div>
</div>
<div class="row p-1 flex-nowrap">
<div class="col-4 p-1 text-right">Compnay:</div>
<div class="col-8 p-1"><input type="text">
</div>
</div>
<div class="row p-1">
<div class="col-8 p-1 offset-4 text-nowrap"><input type="submit" value="Search" class="btn btn-sm m-2"/>My contacts only: <input id="checkBox" type="checkbox[enter link description here][1]"></div>
</div>
</div>
<div class="card-footer">
<div class="row ">
<div class="col">more search</div>
</div>
</div>
</div>
</div>
</div>
Here is the jsfiddle: https://jsfiddle.net/msz2ndkr/21/
The problem with your html is the following line:
<div class="row p-1">
<div class="col-8 p-1 offset-4 text-nowrap"><input type="submit" value="Search" class="btn btn-sm m-2"/>My contacts only: <input id="checkBox" type="checkbox"/></div>
</div>
Bootstrap assumes 12 columns and you have specified 8 columns (col-8). All your other rows have 12. Also, get rid of the offset-4. Here is my solution:
<div class="row p-1">
<div class="col-12 p-1 text-nowrap"><input type="submit" value="Search" class="btn btn-sm m-2"/>My contacts only: <input id="checkBox" type="checkbox"/></div>
</div>
Here is a fiddle
There seems to be a problem with how 'width: auto' is calculated and set on certain elements and their parents. Try making your nowrap container a flexbox and set some width for it's children like:
`
.nowrap-elems-container {
display: flex;
flex-wrap: nowrap;
white-space: nowrap;
}
`
https://jsfiddle.net/a0godL7b/25/
it's not too elegant but it should work
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>