I want to create css which will work for responsive button like bootstrap "img-thumbnail". That means, whatever I change the screen size, button's height and width will change accordingly.
Please help me.
It's a bit messy, but are you looking for something like this?
HTML:
<div class="button-panel">
<div class="row button-row">
<div class="col-xs-3 button-container">
<input type="button" class="btn btn-primary btn-responsive" value="Button 1">
</div>
<div class="col-xs-3 button-container">
<input type="button" class="btn btn-primary btn-responsive" value="Button 2">
</div>
<div class="col-xs-3 button-container">
<input type="button" class="btn btn-primary btn-responsive" value="Button 3">
</div>
<div class="col-xs-3 button-container">
<input type="button" class="btn btn-primary btn-responsive" value="Button 4">
</div>
</div>
<div class="row button-row">
<div class="col-xs-3 button-container">
<input type="button" class="btn btn-primary btn-responsive" value="Button 5">
</div>
<div class="col-xs-3 button-container">
<input type="button" class="btn btn-primary btn-responsive" value="Button 6">
</div>
<div class="col-xs-3 button-container">
<input type="button" class="btn btn-primary btn-responsive" value="Button 7">
</div>
<div class="col-xs-3 button-container">
<input type="button" class="btn btn-primary btn-responsive" value="Button 8">
</div>
</div>
<div class="row button-row">
<div class="col-xs-3 button-container">
<input type="button" class="btn btn-primary btn-responsive" value="Button 9">
</div>
<div class="col-xs-3 button-container">
<input type="button" class="btn btn-primary btn-responsive" value="Button 10">
</div>
<div class="col-xs-3 button-container">
<input type="button" class="btn btn-primary btn-responsive" value="Button 11">
</div>
<div class="col-xs-3 button-container">
<input type="button" class="btn btn-primary btn-responsive" value="Button 12">
</div>
</div>
</div>
CSS:
.button-panel {
height: 100vh;
}
.button-row {
height: calc(100% / 3);
}
.button-container {
padding: 0;
height: 100%;
}
.btn-responsive {
width: 100%;
height: 100%;
}
Bootply
Related
I want card type structure horizontally in Bootstrap.
Something like this and need pagination too for more cards.
Can anyone help me with this design
.card{
border:1px solid #ccc;
border-radius:0.5rem;
padding:1rem;
box-shadow: 0 0 10px #ccc;
box-shadow:0 0 10px #ccc;
transition: all 0.2s;
}
.card:hover{
transform: scale(1.1);
}
#media screen and (max-width: 568px) {
.card{
margin:1rem;
}
.card:hover{
transform: none;
}
}
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="card">
<h3>Exam Preparation</h3>
<p>The mind Map for Physics Preparation</p>
<div class='btn-toolbar'>
<button class="btn btn-sm btn-primary">Edit</button>
<button class="btn btn-sm btn-primary">Delete</button>
<button class="btn btn-sm btn-primary">share</button>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card">
<h3>Exam Preparation</h3>
<p>The mind Map for Physics Preparation</p>
<div class='btn-toolbar'>
<button class="btn btn-sm btn-primary">Edit</button>
<button class="btn btn-sm btn-primary">Delete</button>
<button class="btn btn-sm btn-primary">share</button>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card">
<h3>Exam Preparation</h3>
<p>The mind Map for Physics Preparation</p>
<div class='btn-toolbar'>
<button class="btn btn-sm btn-primary">Edit</button>
<button class="btn btn-sm btn-primary">Delete</button>
<button class="btn btn-sm btn-primary">share</button>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card">
<h3>Exam Preparation</h3>
<p>The mind Map for Physics Preparation</p>
<div class='btn-toolbar'>
<button class="btn btn-sm btn-primary">Edit</button>
<button class="btn btn-sm btn-primary">Delete</button>
<button class="btn btn-sm btn-primary">share</button>
</div>
</div>
</div>
</div>
</div>
I have stuck with that for a while. I have a bunch of inputs within my modal window to create a season. But it is still not responsive (looks very bad on smaller screens).
Also those two buttons should be on the right side of the well. I tried things like "pull-right" class or "float left" and absolute position but then they are always cross the grey background. How can I fix that?
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="pull-left">Seasons</h3>
</div>
<div class="modal-body" style="position: relative;">
<div class="well">
<div class="row" style="width: 80%; margin: 0;">
<div class="col-sm-6">
<span class="bold">Season name</span>
<input type="text" placeholder="e.g. High season">
</div>
<div class="col-sm-3">
<span class="bold">From</span>
<input type="date" style="font-size: 1.23rem; display: inline-block;">
</div>
<div class="col-sm-3">
<div style="margin-left: 40px;">
<span class="bold">To</span>
<input type="date" style="font-size: 1.23rem;display: inline-block;">
</div>
</div>
</div>
<br>
<button type="button" class="btn btn-default" data-dismiss="modal" style="position: absolute; right: 50px;">Close</button>
<button type="button" class="btn btn-primary" style="position: absolute; right: 20px;">Save</button>
</div>
</div>
</div>
And code online goes here: http://www.bootply.com/ojhdwC4y4x#
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="pull-left">Seasons</h3>
</div>
<div class="modal-body">
<div class="well">
<div class="input-group">
<input type="text" class="form-control" placeholder="Season name" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="From" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="To" aria-describedby="basic-addon1">
</div>
</div>
<br>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
It caused by <span> tag before <input> tag, I think. And let's try above code, using bootstrap input instead.
And result:
<div class="row" style="width: 80%; margin: 0;">
<div class="col-sm-6">
<span class="bold">Season name</span>
<input class="form-control" type="text">
</div>
<div class="col-sm-3">
<span class="bold">From</span>
<input class="form-control" type="date">
</div>
<div class="col-sm-3">
<span class="bold">To</span>
<input class="form-control" type="date">
</div>
</div>
how about to change it default of bootstrap style?
For the buttons you should use modal-footer like described here. For the responsive code try this:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="pull-left">Seasons</h3>
</div>
<div class="modal-body">
<div class="well">
<div class="row">
<div class="col-sm-5">
<span class="bold">Season name</span>
<input type="text">
</div>
<div class="col-sm-3">
<span class="bold">From</span>
<input type="date" style="font-size: 1.23rem;">
</div>
<div class="col-sm-3">
<span class="bold">To</span>
<input type="date" style="font-size: 1.23rem;">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
Note that the modal component has limted size, and rows define some margins, but the native HTML 5 date will not fit on the well div nicely. So you can remove one column from "Season name". If you have a lot more elements I recomend divide them on multiple rows.
I have one modal in my new web application ,I want to print the modal content,the modal is scrollable.Now i can only print the content that is viewable.What are the corrections that i should make in my style.css.
index.html
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog ">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 ALIGN="center" class="modal-title">MR FINANCE</h4>
</div>
<div class="modal-body" >
<div class="row">
<div class="col-xs-6">
<div class="form-group">
Name:<input type="text" ng-model="cstmrname" class="form-control" placeholder="Jane Doe" >
</div>
<div class="form-group">
Phone:<input type="number"ng-model="cstmrphone" class="form-control" placeholder="8086502009">
</div>
</div>
<div class="col-xs-6 ">
<div class="text-right">
<p ><STRONG >GLID:{{(GLID.GLID-0)+1}}</STRONG></p>
{{date | date:'MM-dd-yyyy'}}<br/>
{{place}}
</div>
<div class="form-group">
Address: <textarea type="text" class="form-control" ng-model="cstmradress" rows="2"></textarea>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12">
<h4 align="center">
Ornaments
</h4>
<form class="form-inline form-group">
<fieldset data-ng-repeat="choice in choices">
<div class="col-xs-3">
<div class="form-group">
<select class="form-control" id="optioin1" ng-model="choice.option1" >
<option value="Ring" >Ring</option>
<option value="Earings" >Earings</option>
<option value="Chains">Chains</option>
<option value="Necklaces">Necklaces</option>
<option value="Bangles">Bangles</option>
</select>
</div>{{choice.option1}}
</div>
<div class="col-xs-4">
<div class="input-group">
<input type="number" step="0.01" ng-model="choice.weight" class="form-control" placeholder="Weight" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">gm</span>
</div>
</div>
<div class="col-xs-4 pull-right">
<button class="btn btn-default" ng-show="$last" ng-click="removeChoice() "><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
<button class="btn btn-default" ng-show="$last" ng-click="addNewChoice()"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
</div>
</fieldset>
</form>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<p class="text-left"> Total Numbers:{{ choices.length}}</p>
</div>
<div class="col-xs-6"><p>Total Weight: {{total(number)}}gm</p>
</div>
</div>
<hr>
<form align="center" class="form-inline">
PledgeAmt:
<div class="input-group">
<input type="number" ng-model="pledgeamt" class="form-control" placeholder="{{(total()*2050)-3000}}-{{total()*2050}}" >
<span class="input-group-addon" id="basic-addon2">RS</span>
</div>
</form>
<hr>
<div class="row">
<h5 align="center"> Interest</h5>
<div class="col-xs-6">
<p> 1-3Month:{{ intrst[0].INTR1}}%({{(pledgeamt/100)*1}}RS/day)</p>
</div>
<div class="col-xs-6">
<p > 3-12Month:{{ intrst[0].INTR2}}%({{(pledgeamt/100)*2}}RS/day)</p>
</div>
</div>
<tr ng-repeat="ornament in data">
<td>{{ornament.GLID}}</td>
<td>{{ornament.WEIGHT}}</td>
<td>{{ornament.TOTGRAM}}</td>
</tr>
<div class="modal-footer">
<button type="button" ng-click="insertvalue()" class="btn btn-default" >Submit</button>
<button type="button" class="btn btn-default" onclick="js:window.print()">print modal content</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
style.css
.printable { display: none; }
#media print
{ .modal-footer,
.non-printable { display: none; }
.printable1 {
width: auto;
height: auto;
overflow: visible !important; }
}
You implementation of your css is the right approach but you will need to make whatever the class that currently has the scroll, visible when you print out the document.
If you wanted the css to be changed but not the html:
#media print {
/* if modal-body is your scrollable class */
.modal-body {
width: auto;
height: auto;
overflow: visible !important;
}
}
Code pen link
I'm trying to fix the vertical position of a bootstrap column without success.
<div class="col-sm-9 col-xs-12 fixed">
<div class="row pad-20">
<div class="col-xs-6">
<button type="button" value="0" class="btn {{color1}} btn-lg btn-block choice">{{choice1}}</button>
</div>
<div class="col-xs-6">
<button type="button" value="1" class="btn {{color2}} btn-lg btn-block choice">{{choice2}}</button>
</div>
</div>
</div>
</div>
Where fixed is:
.fixed{
position: fixed;
bottom: 5px;
}
The proportion sm-9 and xs-12 are not respected ...
Any help?
Do you have a <div class="container"> around the markup you show? Also, in the markup you show there's an extra closing </div> tag.
Seems to be working in this JSFiddle I put together:
https://jsfiddle.net/o540r7cf/
HTML:
<div class="container">
<div class="row">
<div class="col-sm-9 col-xs-12 fixed">
<div class="row">
<div class="col-md-6 col-xs-6">
<button type="button" value="0" class="btn btn-primary btn-lg btn-block"> Choice 1</button>
</div>
<div class="col-md-6 col-xs-6">
<button type="button" value="1" class="btn btn-primary btn-lg btn-block">Choice 2</button>
</div>
</div>
</div>
</div>
</div>
CSS:
.fixed {
position: fixed;
bottom: 5px;
}
I am trying to play with adding columns to my bootstrap forms.
<section class="test-form">
<h3>Test Form</h3>
<div class="form-group form-group-sm">
<select name="" class="form-control">
<!-- Various Options -->
</select>
</div>
<div class="form-group form-group-sm">
<select class="form-control" name="" >
<!-- Various Options -->
</select>
</div>
<div class="form-group form-group-sm">
<input class="form-control" type="number" min="0"/>
</div>
<div class="form-group form-group-sm">
<button class="btn btn-block btn-primary">Test Button 1</button>
</div>
<div class="form-group form-group-sm col-xs-6">
<button class="btn btn-primary btn-block">Test Button 2</button>
</div>
<div class="form-group form-group-sm col-xs-6">
<button class="btn btn-primary btn-block">Test Button 3</button>
</div>
<div class="form-group form-group-sm col-xs-4">
<button class="btn btn-primary btn-block">Test Button 4</button>
</div>
<div class="form-group form-group-sm col-xs-4">
<button class="btn btn-primary btn-block">Test Button 5</button>
</div>
<div class="form-group form-group-sm col-xs-4">
<button class="btn btn-primary btn-block">Test Button 6</button>
</div>
</section>
The problem with the above is that my desired output is as follows:
The left side of test button 2 and test button 4 should be inline with the left side of test button 1.
The right side of test button 3 and right side of test button 6 should be in-line with the right side of test button 1
Any advice on the correct way of achieving this?
Screenshot to explain below.
The spacing you are seeing is caused by the padding bootstrap adds to col-* classes. You can either override this padding for those elements or wrap all the elements of the form in a row and add a col-* class wrapping div to elements which don't have this class.
Here is an example of the latter.
HTML:
<section class="test-form">
<div class="row">
<div class="col-xs-12">
<h3>Test Form</h3>
<div class="form-group form-group-sm">
<select name="" class="form-control">
<!-- Various Options -->
</select>
</div>
<div class="form-group form-group-sm">
<select class="form-control" name="" >
<!-- Various Options -->
</select>
</div>
<div class="form-group form-group-sm">
<input class="form-control" type="number" min="0"/>
</div>
<div class="form-group form-group-sm">
<button class="btn btn-block btn-primary">Test Button 1</button>
</div>
</div>
<div class="form-group form-group-sm col-xs-6">
<button class="btn btn-primary btn-block">Test Button 2</button>
</div>
<div class="form-group form-group-sm col-xs-6">
<button class="btn btn-primary btn-block">Test Button 3</button>
</div>
<div class="form-group form-group-sm col-xs-4">
<button class="btn btn-primary btn-block">Test Button 4</button>
</div>
<div class="form-group form-group-sm col-xs-4">
<button class="btn btn-primary btn-block">Test Button 5</button>
</div>
<div class="form-group form-group-sm col-xs-4">
<button class="btn btn-primary btn-block">Test Button 6</button>
</div>
</div>
</section>
Live example: http://www.bootply.com/1H1KXSAVqm
Bootply
The quickest fix I found was doing this:
<div class="form-group form-group-sm col-xs-12">
<select name="" class="form-control">
<!-- Various Options -->
</select>
</div>
<div class="form-group form-group-sm col-xs-12">
<select class="form-control" name="" >
<!-- Various Options -->
</select>
</div>
<div class="form-group form-group-sm col-xs-12">
<input class="form-control" type="number" min="0"/>
</div>
<div class="form-group form-group-sm col-xs-12">
<button class="btn btn-block btn-primary">Test Button 1</button>
</div>
Basically, where you didn't have the right padding, I added a col-xs-12 class to style them similar to the rest of your inputs.
Hope that helps!
This is how I achieved what it sounds like you are going for.
<div class='row'>
<div class='col-md-6 column'>
*Inputs*
</div>
</div>
<div class='row'>
<div class='col-md-6 column'>
*Inputs*
</div>
</div>