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>
Related
I am trying to create a spending board with Bootstrap 4.
Right now that's what I did, and I want buttons to be displayed as in the picture below.
I have no idea how to do it ..
What I get right now:
What I want to get in the end:
.btn-warning {
border: 1px solid black;
height: 85px;
}
.middel {
background-color: #ff00008a;
border: 4px solid black;
height: 270px;
border-radius: 50%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container" style="border: 1px solid black">
<div class="row">
<div class="col-6" style="border: 1px solid black;height: 85px;"> בוצע על ידי
<select class="form-control">
<option> moshe </option>
<option> haim </option>
<option> kobi </option>
</select>
</div>
<div class="col-6" style="border: 1px solid black; height: 85px;"> באמצעות
<select class="form-control">
<option> moshe </option>
<option> haim </option>
<option> kobi </option>
</select>
</div>
</div>
<div class="row">
<button class="col-3 btn btn-warning"> אוכל לבית </button>
<button class="col-3 btn btn-warning"> בילוים </button>
<button class="col-3 btn btn-warning"> אינטרנט חשמל וכבלים </button>
<button class="col-3 btn btn-warning"> ארנונה </button>
<button class="col-3 btn btn-warning"> ארנונה </button>
<button class="col-6 middel">
<h2>expense</h2>
<div style="font-size: 120%; color: red"> <b>1900</b></div>
<div style="font-size: 75%; color: green"><b> 3500</b></div>
</button>
<button class="col-3 btn btn-warning"> חשבונות בית </button>
<button class="col-3 btn btn-warning"> הוצאות רפואיות </button><button class="col-3 btn btn-warning">
חשבונות בית </button>
<button class="col-3 btn btn-warning"> הוצאות רפואיות </button>
<button class="col-3 btn btn-warning"> חשבונות בית </button>
<button class="col-3 btn btn-warning"> הוצאות רפואיות </button>
<button class="col-3 btn btn-warning"> חשבונות בית </button>
<button class="col-3 btn btn-warning"> הוצאות רפואיות </button>
<button class="col-3 btn btn-warning"> חשבונות בית </button>
</div>
<div class="row" style="margin: 5px;height: 75px;border: 1px solid black">
<div class="col-4">
בחר את תאריך ביצוע הפעולה :
</div>
<div class="col-8">
<input class="form-control" type="date">
</div>
</div>
<div class="row" style="margin: 5px;height: 75px; border: 1px solid black">
<input class="col-12" type="text" placeholder="תאר את ההוצאה (לא חובה)">
</div>
<div class="row" style="margin: 5px;height: 75px; border: 1px solid black">
<button class="btn btn-dark col-12"> הוסף </button>
</div>
</div>
Attaching photo after #connexo answer:
Consider using CSS grid. Please note that your HTML is actually invalid. button cannot contain either of h2 and div, only non-interactive phrasing content.
body {
margin: 0;
}
.grid {
width: 100vw;
height: 100vh;
display: grid;
grid-template-rows: repeat(5, minmax(0, 1fr));
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-gap: 2px;
}
.grid button {
background-color: orange;
}
.grid .centercell {
background-color: lime;
grid-row: 2/5;
grid-column: 2/4;
border-radius: 50%;
}
<div class="grid">
<button> אוכל לבית </button>
<button> בילוים </button>
<button> אינטרנט חשמל וכבלים </button>
<button> ארנונה </button>
<button> ארנונה </button>
<button class="centercell">
<span>expense</span>
<span style="font-size: 120%; color: red"> <b>1900</b></span>
<span style="font-size: 75%; color: green"><b> 3500</b></span>
</button>
<button> חשבונות בית </button>
<button> הוצאות רפואיות </button><button>
חשבונות בית </button>
<button> הוצאות רפואיות </button>
<button> חשבונות בית </button>
<button> הוצאות רפואיות </button>
<button> חשבונות בית </button>
<button> הוצאות רפואיות </button>
<button> חשבונות בית </button>
</div>
I think you need to change your html struct like this:
.btn-warning {
border: 1px solid black;
height: 85px;
}
.middel {
background-color: #ff00008a;
border: 4px solid black;
height: 270px;
border-radius: 50%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container" style="border: 1px solid black">
<div class="row">
<div class="col-6" style="border: 1px solid black;height: 85px;"> בוצע על ידי
<select class="form-control">
<option> moshe </option>
<option> haim </option>
<option> kobi </option>
</select>
</div>
<div class="col-6" style="border: 1px solid black; height: 85px;"> באמצעות
<select class="form-control">
<option> moshe </option>
<option> haim </option>
<option> kobi </option>
</select>
</div>
</div>
<div class="row">
<button class="col-3 btn btn-warning"> אוכל לבית </button>
<button class="col-3 btn btn-warning"> בילוים </button>
<button class="col-3 btn btn-warning"> אינטרנט חשמל וכבלים </button>
<button class="col-3 btn btn-warning"> ארנונה </button>
</div>
<div class="row">
<div class="col-3">
<button class="col-12 btn btn-warning"> ארנונה </button>
<button class="col-12 btn btn-warning"> הוצאות רפואיות </button>
<button class="col-12 btn btn-warning">
חשבונות בית </button>
</div>
<div class="col-6">
<button class="col-12 middel">
<h2>expense</h2>
<div style="font-size: 120%; color: red"> <b>1900</b></div>
<div style="font-size: 75%; color: green"><b> 3500</b></div>
</button>
</div>
<div class="col-3">
<button class="col-12 btn btn-warning"> חשבונות בית </button>
<button class="col-12 btn btn-warning"> חשבונות בית </button>
<button class="col-12 btn btn-warning"> הוצאות רפואיות </button>
</div>
</div>
<div class="row">
<button class="col-3 btn btn-warning"> הוצאות רפואיות </button>
<button class="col-3 btn btn-warning"> חשבונות בית </button>
<button class="col-3 btn btn-warning"> הוצאות רפואיות </button>
<button class="col-3 btn btn-warning"> חשבונות בית </button>
</div>
<div class="row" style="margin: 5px;height: 75px;border: 1px solid black">
<div class="col-4">
בחר את תאריך ביצוע הפעולה :
</div>
<div class="col-8">
<input class="form-control" type="date">
</div>
</div>
<div class="row" style="margin: 5px;height: 75px; border: 1px solid black">
<input class="col-12" type="text" placeholder="תאר את ההוצאה (לא חובה)">
</div>
<div class="row" style="margin: 5px;height: 75px; border: 1px solid black">
<button class="btn btn-dark col-12"> הוסף </button>
</div>
</div>
I would like to align all button to bottom on the page:
The editor with code:
https://codesandbox.io/s/angular-7-bootstrap-4-3pv0p?from-embed
<div class="container-fluid py-2">
<div class="row">
<div class="col-md-12 mx-auto">
<div class="card rounded-0">
<div class="card-header">
<h2>Boot Container View</h2>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="ws-details" style="background:gray; height:100px">
Element1
</div>
<div
class="order-details"
style="background:lightgray; height:200px"
>
Element 2
</div>
</div>
<div class="col-md-6">
<div style="background:gray; height:305px">Element3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="center-block">
<div class="btn-group-vertical">
<p>
<button class="btn btn-info btn-sm btn-block">
Button 1a
</button>
</p>
<p>
<button class="btn btn-info btn-sm btn-block">
Button 2a
</button>
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="center-block">
<div class="btn-group-vertical">
<p>
<button class="btn btn-info btn-sm btn-block">
Button 1b
</button>
</p>
<p>
<button class="btn btn-info btn-sm btn-block">
Button 2b
</button>
</p>
<p>
<button class="btn btn-info btn-sm btn-block">
Button 3b
</button>
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="center-block">
<div class="btn-group-vertical">
<p>
<button class="btn btn-info btn-sm btn-block">
Button 1c
</button>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I tried with position absolute and relative with parent/child element. But still I have problem with the proper align buttons. Also - I would like to change size (width of buttons), and after change style width there is problem with center button.
Changes in app.component.html file:
On line 25 in your html file change <div class="row"> to <div class="row position-relative">.
On line 27 and line 65 change <div class="center-block"> to <div class="center-block align-to-bottom">
Changes in app.component.css file:
Add:
#media only screen and (min-width: 767px) {
.align-to-bottom {
bottom: 0;
position: absolute;
}
}
Link to the editor: https://codesandbox.io/s/angular-7-bootstrap-4-u5uet
To change the width of the button you could add button.btn-info {width: 150px;} to your css. You said then there was a problem with the center button but what problem do you mean?
use this css properties:
bottom:0
position:absolute
It seems that you are using a bootstrap for this code and thus if you need to align the buttons to the bottom, you can use a custom css. Let this css class be alignBottom.
.alignBottom{
position: absolute;
bottom: 0px;
}
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
I've set relative position for my row and then I tried to align my social buttons to the bottom right corner but failed ;(
I've also set absolute position for my social buttons class and it doesn't seem to align properly. Why is this so?
JsFiddle
HTML
<div class="container">
<div class="jumbotron">
<div class="row fixed-height">
<div class="col-xs-4">
<button class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-ok"></span>
Some button!
</button>
</div>
<div class="col-xs-8">
<div class="social-buttons">
<div class="btn-group-xs">
<button class="btn btn-default">
<span class="glyphicon glyphicon-thumbs-up"></span>
</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-thumbs-down"></span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.jumbotron {
margin: 10px;
}
.row {
margin: 8px 0;
border: solid;
}
.fixed-height {
height: 100%;
}
.social-buttons{
position: absolute;
bottom: 0;
right: 0;
}
Here is a possible solution:http://jsfiddle.net/cpveg8Lo/5/
CSS
Add position as relative in row css
.row {
margin: 2px 0;
border: solid;
position: relative;
}
and make the following change in social button css
.social-buttons{
position:absolute;
right: 0;
padding-right:0px;
bottom:0;
}
HTML
Update your html as shown below,
<div class="container">
<div class="jumbotron">
<div class="row fixed-height">
<div class="col-xs-4">
<button class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-ok"></span>
Some button!
</button>
</div>
<div class="col-xs-8 social-buttons">
<div class="pull-right">
<div class="btn-group-xs">
<button class="btn btn-default">
<span class="glyphicon glyphicon-thumbs-up"></span>
</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-thumbs-down"></span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
Here check this snippet. This will keep those button vertically centered as well. Try this -
.jumbotron {
margin: 10px;
}
.row {
margin-top: 8px;
margin-bottom: 8px;
border: solid;
}
.fixed-height {
height: 100%;
position:relative;
}
.social-buttons{
position:absolute;
right:15px;
top: 50%;
-moz-transform: translatey(-50%);
-ms-transform: translatey(-50%);
-o-transform: translatey(-50%);
-webkit-transform: translatey(-50%);
transform: translatey(-50%);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="jumbotron">
<div class="row fixed-height">
<div class="col-xs-4">
<button class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-ok"></span>
Some button!
</button>
</div>
<div class="social-buttons">
<div class="btn-group-xs">
<button class="btn btn-default">
<span class="glyphicon glyphicon-thumbs-up"></span>
</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-thumbs-down"></span>
</button>
</div>
</div>
</div>
</div>
</div>
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;
}