New to bootstrap and been struggling with this implementation.
I want to have a text input and drop down toggle with no margin's but I can't seem to figure it out.
This is what I'd like it to be like:
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="60" disabled>
</div>
<div class="col"><button class="btn btn-secondary dropdown-toggle btn-square-only" disabled>months</button>
</div>
</div>
This is what I am getting. The btn-square-only just is a styling feature nothign else. Any ideas?
Any guidance is greatly appreciated.
You can follow below Bootstrap structure and define width as you want so I have define width-150px class with has 150px width of input-group div.
.width-150px{
width: 150px!important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container my-4">
<div class="row">
<div class="col">
<div class="input-group width-150px">
<input type="text" class="form-control text-center rounded-0" placeholder="60" disabled>
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle rounded-0" type="button" data-toggle="dropdown" disabled>Month</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">January</a>
<a class="dropdown-item" href="#">February</a>
<a class="dropdown-item" href="#">March</a>
</div>
</div>
</div>
</div>
</div>
</div>
group`. You can find more via bootstrap official documentation
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="form-group row ">
<div class="col-3 pr-0">
<input type="text" class="form-control mx-0 " placeholder="60" disabled>
</div>
<div class="col-3 px-0"><button class="btn btn-secondary dropdown-toggle btn-square-only mx-0 "
disabled>months</button>
</div>
</div>
Also if you inspect the elements with computed tab you see that how margin and padding affect to the <div> .That is why I have put pr-0 and mx-0.
Thanks
Related
In my current ASP.Net core I am trying to do the boot strap styling for search component on the page. I want the UI to look like
where the label/input box and the Search button to appear in the middle of the screen and the Create New To show in the same row but to appear right side of the screen
I have tried like below
<div class="center">
<form asp-action="Index" method="get">
<div class="row">
<div class="col-lg-12">
<div class="row mb-3">
<div class="col-lg-4 col-md-2 form-check-inline mr-0">
<label class="col-auto" for="holiday"> Find by Holiday </label>
<input type="text" class="form-control" name="SearchString" value="#ViewData["CurrentFilter"]" />
</div>
<div class="col-lg-4 col-md-2 form-check-inline mr-0">
<input type="submit" value="Search" class="btn btn-info" />
<a class="btn btn-link" asp-action="Index">Back to Full List</a>
</div>
<div class="col-lg-4 col-md-2 form-check-inline mr-0" style="text-align:right">
<a class="btn btn-info" asp-action="Create">Create New</a>
</div>
</div>
</div>
</div>
</form>
</div>
And the UI shows up like below
Can anyone help say what is that I am missing why all the things appear so close, I tried adding the style="text-align:right" so the Create new will appear towards the right
***** EDIT *****
You could try this way to implement accordingly as per your
expectations like below:
Asp.net Submit Form With CSS
<div class="center">
<form asp-action="Index" method="get">
<div class="row">
<div class="col-md-12">
<div class="col-md-2">
<label class="col-auto" for="holiday" style="margin-top:10px;"> Find by Holiday </label>
</div>
<div class="col-md-3" style="margin-left: -50px;" >
<input type="text" class="form-control" name="SearchString" value="#ViewData["CurrentFilter"]" />
</div>
<div class="col-md-1">
<input type="submit" value="Search" class="btn btn-info" />
</div>
<div class="col-md-3">
<a class="btn btn-link" asp-action="Index">Back to Full List</a>
</div>
<div class="col-md-2">
<a class="btn btn-info" asp-action="Create">Create New</a>
</div>
<div class="col-md-1"></div>
</div>
</div>
</form>
</div>
Output
Note: You could set your CSS in different class file. I have shown you how could you achieve that using inline CSS snippet. You
could use separate file as well. But this is the right and convenient
way to do what you are trying to.
My first guess is caused by your class 'col-md-2'. You can change all of 'col-md-2' to 'col-md-4' to test.
try adding ml-auto on the 'Create New' button
For some reason, my first button has a space before it and I can't get rid of it.
<div class="container">
<div class="row">
<div class="col-xs-4 col-md-3">
<button #onclick="ShowModal" class="btn btn-primary"><i class="oi oi-plus"></i>New Member</button>
</div>
<div class="col-xs-4 col-md-3" style="margin:auto">
<button #onclick="#RefreshData" class="btn btn-primary"><i class="oi oi-loop-circular"></i> Refresh Data</button>
</div>
<div class="input-group col-xs-4 col-md-4 offset-md-5">
<input type="text" class="form-control" placeholder="Search Members" #bind="#searchTerm" />
<div class="input-group-append">
<button #onclick="#SearchMember" class="btn btn-primary"><i class="oi oi-magnifying-glass"></i></button>
</div>
</div>
</div>
This how it looks
This forces the search to go on the next row. How can I fix this?
It's a problem with margins; just make sure you get rid of the left margin. If you're ever in doubt about what a space is, take a peek at the element in dev tools and it'll normally help you out.
div.container {
margin-left: 0px
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-4 col-md-3">
<button #onclick="ShowModal" class="btn btn-primary"><i class="oi oi-plus"></i>New Member</button>
</div>
<div class="col-xs-4 col-md-3" style="margin:auto">
<button #onclick="#RefreshData" class="btn btn-primary"><i class="oi oi-loop-circular"></i> Refresh Data</button>
</div>
<div class="input-group col-xs-4 col-md-4 offset-md-5">
<input type="text" class="form-control" placeholder="Search Members" #bind="#searchTerm" />
<div class="input-group-append">
<button #onclick="#SearchMember" class="btn btn-primary"><i class="oi oi-magnifying-glass"></i></button>
</div>
</div>
</div>
I used the following code to output the interface as shown below.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-12">
<div class="card m-b-30">
<div class="card-header container-fluid">
<div class="row">
<h2 class="card-title">Customer Profile Types</h2>
<div class="col-md-4 float-right">
<button class="btn btn-primary">Add</button>
<button class="btn btn-primary" style="margin-left: 1em">Update</button>
<button class="btn btn-primary" style="margin-left: 1em">Cancel</button>
</div>
</div>
</div>
<br>
<div class="CustomerProfileTypes-body">
<form>
<div class="form-group row">
<label for="Name" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="inputText">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label id="gridCheck"> Active</label>
</div>
</div>
</form>
</div>
</div>
</div>
But I need to get the output as shown below and align all the things in my interface.
The name also needs to be centered and textbox, and the checkbox also should be aligned.
I'm still a beginner can anyone help me.
There can be two solutions for the result you are trying to achieve.
Make use of bootstrap columns like you are using right now.
Use flexbox
Solution 1
Make a slight change to your code:
<div class="row">
<div class="col-md-6>
<h2 class="card-title">Customer Profile Types</h2>
</div>
<div class="col-md-6 text-right">
<button class="btn btn-primary">Add</button>
<button class="btn btn-primary" style="margin-left: 1em">Update</button>
<button class="btn btn-primary" style="margin-left: 1em">Cancel</button>
</div>
</div>
Solution 2
Without the bootstrap row and col, pure flexbox (using bootstrap classes).
<div class="d-flex justify-content-between align-items-center">
<h2 class="card-title">Customer Profile Types</h2>
<div>
<button class="btn btn-primary">Add</button>
<button class="btn btn-primary" style="margin-left: 1em">Update</button>
<button class="btn btn-primary" style="margin-left: 1em">Cancel</button>
</div>
</div>
If you want to use CSS, try to use flexbox with property "space-between" on this div (because is father):
<div class="card-header container-fluid">
It should make space between h2 and B's elements.
<div class="col-lg-12" style="padding: 10px">
<div class="card m-b-30">
<div class="card-header container-fluid">
<div class="row">
<h2 class="card-title" style="padding: 10px">Customer Profile Types</h2>
<div align="right" class="col-md-8 float-right">
<button class="btn btn-primary">Add</button>
<button class="btn btn-primary" style="margin-left: 1em">Update</button>
<button class="btn btn-primary" style="margin-left: 1em">Cancel</button>
</div>
</div>
</div>
<br>
<div class="CustomerProfileTypes-body">
<form>
<div class="form-group row">
<label for="Name" class="col-sm-2 col-form-label" style="text-align: center"> Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="inputText">
<input class="form-check-input" type="checkbox" id="gridCheck" style="margin-left: 2px" >
<label id="gridCheck" style="margin-left: 15px"> Active </label>
</div>
</div>
</form>
</div>
</div>
I've started to explore Bootstrap 4 and HTML5/CSS in general. I want to create a text area with two buttons on the side (centered horizontally to each other) :
The code I got is the following:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="container mt-2">
<div class="row">
<div class="col-10">
<textarea class="form-control" rows="3" id="sent_text" placeholder="Just write some text.."></textarea>
</div>
<div class="col-2">
<div class="row">
<button class="btn btn-success btn-sm m-1" type="button">Send</button>
</div>
<div class="row">
<button class="btn btn-info btn-sm m-1" type="button">Clear</button>
</div>
</div>
</div>
</div>
I've created a row with 2 columns in it. The second column contains two rows.
Is that correct way to go?
Thanks
A better way of doing it with justify-content-around d-flex flex-column on the buttons column. There was no need of additional row element in the col-2 div.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="container mt-2">
<div class="row">
<div class="col-10">
<textarea class="form-control" rows="3" id="sent_text" placeholder="Just write some text.."></textarea>
</div>
<div class="col-2 justify-content-around d-flex flex-column">
<div>
<button class="btn btn-success btn-sm" type="button">Send</button>
</div>
<div>
<button class="btn btn-info btn-sm" type="button">Clear</button>
</div>
</div>
</div>
I think this method is way better. (:
Use col for the textarea column so that it takes all the available space.
Use col-auto for the buttons column so that it takes as much as space as it needs. And then use d-flex flex-column to change its direction.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="container mt-2">
<div class="row">
<div class="col">
<textarea class="form-control" rows="3" id="sent_text" placeholder="Just write some text.."></textarea>
</div>
<div class="col-auto d-flex flex-column">
<button class="btn btn-success btn-sm m-1" type="button">Send</button>
<button class="btn btn-info btn-sm m-1" type="button">Clear</button>
</div>
</div>
</div>
You should place each button in a div with 'col-...' class.
Bootstrap documentation about nesting elements in a row
Codepen with your example to show you the difference when you use 'col-...' class.
Codepen
<div class="container mt-2">
<div class="row">
<div class="col-10">
<textarea class="form-control" rows="3" id="sent_text"
placeholder="Just write some text.."></textarea>
</div>
<div class="col-2">
<div class="row">
<button class="btn btn-info btn-sm m-1" type="button">Clear</button>
</div>
<div class="row">
<div class="col-12">
<button class="btn btn-success btn-sm m-1" type="button">Send in col</button>
</div>
</div>
<div class="row">
<div class="offset-6 col-6">
<button class="btn btn-success btn-sm m-1" type="button">Send centered using col</button>
</div>
</div>
</div>
Also making the textarea none-reziable is good.Thus
Try this
textarea.form-control{
resize: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="container mt-2">
<div class="row">
<div class="col-10">
<textarea class="form-control" rows="3" id="sent_text" placeholder="Just write some text.."></textarea>
</div>
<div class="col-2">
<div class="row">
<div class="d-flex flex-column">
<button class="btn btn-success btn-sm m-1" type="button">Send</button>
<button class="btn btn-info btn-sm m-1" type="button">Clear</button>
</div>
</div>
</div>
</div>
</div>
My Current implementation of what I want is done using ng-bootstrap for Angular4.
Image
As you can see I used the Check box button to display a response from the backend. If you click on the button the x button will be not be shown and it will also hide some other html elements below.
Upon clicked (checked)
I am actually looking to improve the layout, where I wish that the x button would somehow be spanned together for a smooth feeling.
I do not know of any components from Bootstrap4.x or ng-bootstrap itself that could do something.
Any design suggestions or improvements is what I am looking for.
code
<!-- Search Keywords go here -->
<div class="container" *ngIf="Output.length">
<div class="row">
<div class="col-sm-2">
<label class="col-form-label-lg"><b> Search History </b></label>
</div>
<div class="col-sm-10">
<div class="btn-group btn-group-toggle" *ngFor="let keyword of Output; let cbIndex = index">
<label class="btn-primary" ngbButtonLabel>
<input type="checkbox"
ngbButton
#kwCheck
(change)="cbInput= kwCheck.checked; hideKW(cbIndex)"
> {{keyword.kw}}
</label>
<span><button class="btn btn-xs btn-danger"
(click)="deleteKW(keyword.kw); $event.stopPropagation()"
[disabled]=kwCheck.checked
[hidden]="kwCheck.checked">×</button>
</span>
</div>
</div>
</div>
</div>
Output.length is an array of JSON responses from the backend.
There are, at least, two ways that you can do so.
Use btn-group. It is pretty well semantic also, except that you use btn class for the input container which is a not button.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="btn-group" role="group" aria-label="Basic example">
<label class="btn d-flex align-items-center bg-primary px-3 mb-0">
<input type="checkbox" class="" id="customCheck1">
<span class="px-1 mb-0" for="customCheck1">Check</span>
</label>
<button type="button" class="btn btn-danger">×</button>
</div>
Use input-group. I prefer this approach because all of the classes have meaning.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="input-group w-auto">
<label class="d-flex align-items-center w-auto bg-primary px-3 mb-0">
<input type="checkbox" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
<span class="pl-2">Check</span>
</label>
<div class="input-group-prepend">
<button class="btn btn-danger" type="button">×</button>
</div>
</div>
Update
In order to hide the checkbox's tick mark, use btn-group-toggle. It is the same method that bootstrap does.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="input-group w-auto ">
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary" style="border-radius: 0;">
<input type="checkbox" autocomplete="off"> Check
</label>
</div>
<div class="input-group-prepend">
<button class="btn-danger btn" id="basic-addon1">×</button>
</div>
</div>
As far as i know, there is no way to reset the border to zero. So, you have to use custom CSS.*
https://codepen.io/anon/pen/qKOdJv?editors=1000