I'm coming from Semantic UI and I'm trying to do the same as this
So here is my code for Bulma
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<div class="field has-addons">
<div class="control">
<input class="input" type="text" placeholder="Find domain">
</div>
<div class="control">
<div class="select">
<select>
<option>.com</option>
<option>.edu</option>
</select>
</div>
</div>
</div>
and it looks like this
I was wondering if anyone knows how can I style the dropdown to be like semantic's ui? Is there a way in Bulma to change the icon for select input and the background or I have to write my own css?
You can use bulma dropdown along with input
<div class="dropdown is-active">
<div class="dropdown-trigger">
<div class="field">
<p class="control is-expanded has-icons-right">
<input class="input" type="search" placeholder="Search..."/>
<span class="icon is-small is-right"><i class="fas fa-search"></i></span>
</p>
</div>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
Dropdown item
Other dropdown item
<hr class="dropdown-divider">
With a divider
</div>
</div>
</div>
You can change the background by adding a color helper (e.g. has-background-light) to the select tag.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<div class="field has-addons">
<div class="control">
<input class="input" type="text" placeholder="Find domain">
</div>
<div class="control ">
<div class="select ">
<select class="has-background-light">
<option>.com</option>
<option>.edu</option>
</select>
</div>
</div>
</div>
You'd have to write your own css for the icon.
Related
I'm setting up some input tags using bootstrap grid system. In a row, I'm having four input tags including a submit button. In the actual window, the elements are showing up as desired but when the screen is resized, some elements are moved down.
This code is running on angular 6
<div class="row">
<div class="col-sm-5">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<span>Package</span>
</span>
</div>
<select>
<option [ngValue]="undefined" disabled selected> --Please choose a
package--</option>
<option> Fetching some data from backend </option>
</select>
</div>
</div>
<div class="col-sm-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<span>Start Date:</span>
</span>
</div>
<input type="text" placeholder="Choose a date" readonly required>
</div>
</div>
<div class="col-sm-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<span>End Date:</span>
</span>
</div>
<input type="text" placeholder="Choose a date" readonly required>
</div>
</div>
<div class="col-sm-1">
<div class="input-group">
<button class="btn btn-primary" (click)="OnSubmit()"> Submit </button>
</div>
</div>
</div>
What I'm expecting is to get the row elements in the same line as to when it is resized also. but when the screen is resized, the row elements are dis aligned.
There were a class missing:
class="form-control"
<div class="row">
<div class="input-group col-sm-5">
<div class="input-group-prepend">
<span class="input-group-text">
<span>Package</span>
</span>
</div>
<select class="form-control">
<option [ngValue]="undefined" disabled selected> --Please choose a
package--</option>
<option> Fetching some data from backend </option>
</select>
</div>
<div class="input-group col-sm-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<span>Start Date:</span>
</span>
</div>
<input class="form-control" type="text" placeholder="Choose a date" readonly required>
</div>
</div>
<div class="col-sm-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<span>End Date:</span>
</span>
</div>
<input class="form-control" type="text" placeholder="Choose a date" readonly required>
</div>
</div>
<div class="col-sm-1">
<div class="input-group">
<button class="btn btn-primary" (click)="OnSubmit()"> Submit </button>
</div>
</div>
</div>
My form is not centered on my page. See below my html file and the output. How do I center my view?
Herewith my html:
<div class="container">
<div class='row justify-content-center'>
<div class='col'>
<p></p>
<h1>Member Details: </h1>
<p>Name: JP</p>
<p>Surname: Roux</p>
<p>ID Nr: 7604195133089</p>
<p>Mobile Nr: 0741115552</p>
<p>Email: jp#test.com</p>
<p>D.O.B: 1976-04-19</p>
<p>Language: Afrikaans</p>
<p>Interests:
<ul>
<li>Tennis</li>
<li>Squash</li>
</ul>
</p>
<p>Created At: 2018-06-06 09:31:31</p>
<div class="page-header">
Edit
</div>
</div>
</div>
You can put your form like below:
<div class="container">
<div class='row justify-content-center'>
<div class='col-6 border border-primary'>
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br> Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
jsfiddle.
Never use justify-content-center for the row. If you want to align center content of a column , use d-flex and justify-content-center for the column and wrap its content with a w-auto div.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class='row'>
<div class='col d-flex justify-content-center'>
<div class="w-auto">
<p></p>
<h1>Member Details: </h1>
<p>Name: JP</p>
<p>Surname: Roux</p>
<p>ID Nr: 7604195133089</p>
<p>Mobile Nr: 0741115552</p>
<p>Email: jp#test.com</p>
<p>D.O.B: 1976-04-19</p>
<p>Language: Afrikaans</p>
<p>Interests:
<ul>
<li>Tennis</li>
<li>Squash</li>
</ul>
</p>
<p>Created At: 2018-06-06 09:31:31</p>
<div class="page-header">
Edit
</div>
</div>
</div>
</div>
https://codepen.io/anon/pen/eKBNKY
Centered form
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class='row'>
<div class='col d-flex justify-content-center'>
<form class="w-auto">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
https://codepen.io/anon/pen/rKWVqV
Using w-auto is unnecessary. If you wish, you can omit.
How can I combine all the form group items such as Select, Input items together just using bootstrap framework?
I have tried the below way but as expected I am getting the space between Select and Input Box
DEMO
The problem is your declaration of mx-sm-3. This applies for the -sm breakpoint and greater if there is no other declaration. The simplest way to correct this is add a reset at the larger breakpoint: mx-md-0:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="form-inline">
<div class="form-group">
<select class="custom-select mx-md-0">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</div>
<div class="form-group mx-sm-3 mx-md-0">
<input class="form-control" type="text">
</div>
<div class="form-group mx-sm-3 mx-md-0">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
Expand the above code snippet to see how it will render when you exceed the -sm breakpoint. I also changed your <select> to make use of the custom-select class.
I'm not sure if this is what you're after, but if it's not, clarify what you're after a little more and I might be able to help.
If you're just wanting to group the items together, bootstrap has a card class that allows you to group elements into a container of sorts. The code below is wrapped in bootstraps grid system. I've put your code into a div tag with a card class. In a second example, I've removed a the inline form class, so you can see how the inputs are stacked vertically.
<div class="container mt-5">
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<div class="form-inline">
<div class="form-group mx-sm-3 mb-2">
<select class="form-control form-control-sm">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</div>
<div class="form-group mx-sm-3 mb-2">
<input class="form-control" type="text">
</div>
<div class="form-group mx-sm-3 mb-2">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<div class="form">
<div class="form-group mx-sm-3 mb-2">
<select class="form-control form-control-sm">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</div>
<div class="form-group mx-sm-3 mb-2">
<input class="form-control" type="text">
</div>
<div class="form-group mx-sm-3 mb-2">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here's a codeply project so you can see how the layout.
I am using foundation for styling my react component. I have a form which contain User Role filed to be selected from dropdown. I am rendering user form in modal, I am not using form tag for my form.
When I open the form the select tag losing its css, question is simple but not able to find anywhere.
I am rendering modal just above from the </body> tag. Input text field is properly style, please check the image.
<div id="user_creation_form" class="reveal-modal open" style="top: 304px; opacity: 1; visibility: visible; display: block;">
<div data-react-class="UserForm" class="edit-modal-1">
<div data-reactroot="" class="user-form">
<div>
<h3 class="subheader"></h3>
<div class="user-form">
<h4>User Information</h4>
<div>
<div class="row">
<div class="field dropdown">
<label>User Role</label>
<select>
<option value="admin">Admin</option>
<option value="user">User</option>
</select>
</div>
</div>
</div>
<div class="form-section-divider"></div>
<div>
<h4>Authentication Method</h4>
<div class="auth-container">
<ul class="auth-methods">
<li class="auth-methods--selector ">Email</li>
</ul>
</div>
</div>
<div>
<div class="field">
<label>Full Name</label>
<span class="optionalLabel">(Optional)</span>
<input type="text" value="dsjdfksdjaflkdsjlafjdlskaklfds">
</div>
<div class="field">
<label>Email</label>
<span class="optionalLabel">(Optional)</span>
<input type="text">
</div>
</div>
<div class="action-buttons">
<div class="button radius submit-button">
Update User
</div>
</div>
</div>
</div>
</div>
</div>
<a class="close-reveal-modal">×</a>
</div>
I am new to bootstrap and I have the following code.
<form name="filesearch" id="filesearch" method="post" action="index.cfm">
<div class="input-group col-lg-5">
<span class="input-group-addon"><input name="searchBy" id="mfrmtrlRadio" type="radio">Manufacturer</span>
<input id="mfr" name="mfr" type="text" class="form-control">
<span class="input-group-addon">Material Name</span>
<input id="mtrlname" name="mtrlname" type="text" class="form-control">
</div>
</form>
This is not an inline form and I am trying to put space between the first input and the second span. So between input id mfr and the span of Material Name.
You can use the grid instead of using multiple add-ons inside one group.
Place your inputs inside of XS columns, then reduce the padding of the columns so the space between the two inputs isn't as large.
See working Snippets.
*Sidenote: I places an additional example as the add-ons are so large that on a mobile device there is nearly no usable input space which may or may not matter.
.no-gutter >[class*='col-'] {
padding-right: 5px;
padding-left: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="well">
<p>XS Columns</p>
</div>
<form role="form" method="post" id="myForm">
<div class="container">
<div class="row no-gutter">
<div class="col-xs-6">
<div class="input-group"> <span class="input-group-addon">
<input type="radio" aria-label="..."> Manufacturer</span>
<input type="text" class="form-control" aria-label="...">
</div>
</div>
<div class="col-xs-6">
<div class="input-group"> <span class="input-group-addon" id="basic-addon1"> Material Name</span>
<input type="text" class="form-control" aria-describedby="basic-addon1">
</div>
</div>
</div>
</div>
</form>
<hr>
<div class="well">
<p>SM Columns</p>
</div>
<form role="form" method="post" id="myForm">
<div class="container">
<div class="row no-gutter">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon">
<input type="radio" aria-label="..."> Manufacturer</span>
<input type="text" class="form-control" aria-label="...">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon" id="basic-addon1"> Material Name</span>
<input type="text" class="form-control" aria-describedby="basic-addon1">
</div>
</div>
</div>
</div>
</div>
</form>
<hr>