I was wondering if anyone could tell me how to space out 6 buttons. I want is so that three of the buttons are at the top, while the other 3 are below the top row. So basically it would be two separate rows of aligned buttons.
I know this seems fairly easy but I'm having a difficult time with it. Any help is really appreciated. Thanks.
You could simply do something as such:
<div id="button-wrapper">
<div class="button-row">
<input type="button" value="button1" />
<input type="button" value="button2" />
<input type="button" value="button3" />
</div>
<div class="button-row">
<input type="button" value="button4" />
<input type="button" value="button5" />
<input type="button" value="button6" />
</div>
</div>
You could do something like
#top
{
width: 100%
}
#bottom
{
width: 100%;
}
.button
{
float: left
width: 33%;
}
<div id="top">
<div class="button">
<!-- code for button here -->
</div>
<div class="button">
<!-- code for button here -->
</div>
<div class="button">
<!-- code for button here -->
</div>
</div>
<div id="bottom">
<div class="button">
<!-- code for button here -->
</div>
<div class="button">
<!-- code for button here -->
</div>
<div class="button">
<!-- code for button here -->
</div>
</div>
You can play with the button div width and add margins/padding ect.
To ensure column alignment, you could add a column class to each, and specify a width in that column class.
HTML:
<div id="button-wrapper">
<div class="button-row">
<input type="button" value="blah blah" class="c0"/>
<input type="button" value="lorem ipsum" class="c1"/>
<input type="button" value="really long button label" class="c2"/>
</div>
<div class="button-row">
<input type="button" value="button4" class="c0"/>
<input type="button" value="button5" class="c1"/>
<input type="button" value="button6" class="c2"/>
</div>
</div>
CSS:
.c0{
width: 80px;
}
.c1{
width: 100px;
}
.c2{
width: 150px;
}
Related
I am using the materializecss framework: http://materializecss.com
I want to have a login form inside the middle of the container:
I already tried setting the container div to 100% but that makes it 100% + the navbar so it will add a scrollbar. This is my html how I have it now:
<div class="container">
<router-outlet></router-outlet>
<app-login>
<div class="valign-wrapper full-height">
<div class="center-block">
<form novalidate="" class="ng-untouched ng-pristine ng-valid">
<div class="input-field">
<i class="material-icons prefix">perm_identity</i>
<input id="username" type="text">
<label for="username" class="">Gebruikersnaam</label>
</div>
<div class="input-field">
<i class="material-icons prefix">lock</i>
<input id="password" type="password">
<label for="password">Wachtwoord</label>
</div>
<div class="valign-wrapper">
<button class="btn waves-effect waves-light center-block" name="login" type="submit">
Inloggen
</button>
</div>
</form>
</div>
</div>
</app-login>
</div>
I did see some answers on stackoverflow but those don't really make it responive and most of them are position: absolute which I dont want because I want it inside the container.
Give the div an ID.
Then, in style.css add:
#id {
width: 100%;
height: 100%;
}
This code:
<div class="row">
<div class="col-sm-6">
<div class="input-group">
<textarea v-model="notes" maxlength="1000" class="form-control" row="2" :disabled="laptop.scrapped !== 0">
</textarea>
<button class="btn btn-default input-group-addon" :disabled="!notes">Save</button>
</div>
</div>
<div class="col-sm-2">
</div>
<div class="col-sm-4 text-right button">
<button class="btn btn-primary">Return</button>
<button class="btn">Select and Return</button>
</div>
</div>
Results in this:
I had to add the following CSS to get the buttons to sit on the bottom and not float in the middle, and I wonder if this has something to do with it:
.row {
position: relative;
}
.button {
position: absolute;
bottom:0;
right:0;
}
I suggest that you use Flexbox with media queries instead of absolute positioning. DEMO
#media(min-width: 768px) {
.row.flex {
display: flex;
align-items: flex-end;
}
}
<div class="row">
<div class="col-sm-6">
<div class="input-group">
<textarea v-model="notes" maxlength="1000" class="form-control" row="2" :disabled="laptop.scrapped !== 0">
</textarea>
<div class="clear"></div>
<button class="btn btn-default input-group-addon" :disabled="!notes">Save</button>
</div>
</div>
<div class="col-sm-2">
</div>
<div class="col-sm-4 text-right button">
<button class="btn btn-primary">Return</button>
<button class="btn">Select and Return</button>
</div>
and the new code for class clear is:
.clear {clear: both;}
Now the button will always placed at bottom not float in middle.
If i m correct you want the save button next to textarea.
Having a class="form-control"on textarea will make it take the whole width.
Removing the class the code is as below :
<div class="row">
<div class="col-sm-6">
<div class="input-group">
<textarea v-model="notes" maxlength="1000" row="2" :disabled="laptop.scrapped !== 0">
</textarea>
<button class="btn btn-default input-group-addon" :disabled="!notes">Save</button>
</div>
</div>
<div class="col-sm-2">
</div>
<div class="col-sm-4 text-right button">
<button class="btn btn-primary">Return</button>
<button class="btn">Select and Return</button>
</div>
</div>
Now the Save Button will be placed exactly next textarea . You can use margin and padding to position it properly the way u like.
EDIT for aligned buttons:
<div class="row">
<div class="col-sm-2">
<div class="input-group">
<textarea v-model="notes" maxlength="1000" row="2" :disabled="laptop.scrapped !== 0">
</textarea>
</div>
</div>
<div class="col-sm-2">
<button class="btn btn-default" style="margin-left:-30px;">Save</button>
</div>
<div class="col-sm-8 text-right button">
<button class="btn btn-primary">Return</button>
<button class="btn">Select and Return</button>
</div>
</div>
I have the below HTML and CSS - how do I make the search-bar and add-contacts the same height? I currently have their height set to 100% in CSS to expand inside their container div but that doesn't work Is it possible to change their height even though they are bootstrap units?
HTML
<div className="container">
<form className="form-inline search-bar" role="form">
<div className="form-group has-success has-feedback">
<label className="control-label" htmlFor="inputSuccess4"></label>
<input type="text" className="form-control" id="inputSuccess4" type="text" placeholder="Search" onChange={handleChange}/>
<span className="glyphicon glyphicon-search flipped form-control-feedback"></span>
</div>
</form>
<div className="add-contacts">
<button type="button" className="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
+ Contacts Keeper
</button>
</div>
</div>
CSS
.table-container {
margin: 20px;
}
.search-bar {
margin-left: 20px;
float: left;
height: 100%;
}
.add-contacts {
margin-right: 20px;
float: right;
height: 100%;
}
Just change the height of the search bar.
Or you could put search bar in same div as add contacts bar.
I find simpler is better with Bootstrap. I try to avoid adding custom CSS for most of the HTML elements already styled by Bootstrap:
<div class="container">
<div class="row">
<div class="col-md-12">
<form class="form-horizontal">
<div class="col-md-3 text-left">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Search</label>
<div class="input-group">
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Search">
<div class="input-group-addon"><i class="fa fa-search"></i></div>
</div>
</div>
</div>
<div class="col-md-6"></div>
<div class="col-md-3 text-right">
<button type="submit" class="btn btn-primary">+ add stuff</button>
</div>
</form>
</div>
</div>
</div>
How can I add a gap between the input and the button using input-group on Bootstrap 3? jsFiddle
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Example</h1>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</div>
</div>
Add your custom class to class="input-group-btn" and use padding to create the space.
See working example. > class="input-group-btn input-space"
.input-group-btn.input-space {
padding-left: 15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Example</h1>
<div class="input-group">
<input type="text" class="form-control"> <span class="input-group-btn input-space">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</div>
</div>
Just add padding-left to .input-group-btn, for example:
.input-group-btn {
padding-left: 10px !important;
}
Another way is to overwrite the form-control class like this:
.form-control {
width: 90% !important;
}
I've been trying to get the search box to stay to the bottom of the div but to no avail, what happens is the search box goes off the screen, I've spent the past couple hours and I'm still struggling, if someone could help me I'd be most greatful, thanks Danielle.
Edit: I forgot to add this is inside a bootstrap layout
<div class="container">
<div class="col-md-6">
Left<br />
Left<br />
Left<br />
Left<br />
Left<br />
</div>
<div class="col-md-6">
<div class="input-group search">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
CSS code:
.search {
position: absolute;
bottom: 0;
right: 0;