a.cr-button {
border: solid blue;
}
.job-entry a {
height: 65px;
margin: 5px;
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group-vertical col-md-offset-3 col-md-6 col-sm-offset-2 col-sm-8 col-xs-12" style="display:table;">
<div class="job-entry row large-text" style="display:table-row;">
<div style="display:table-cell;width:75px;">
<a class="btn cr-button pad">
<img src="http://dummyimage.com/64x64/000/fff" width="50">
</a>
</div>
<div style="display:table-cell">
<a class="btn cr-button pad-lg" href="#">Test Job 1</a>
</div>
<div style="display:table-cell;width:75px;">
<a href="/Builder/DeleteJob" class="btn cr-button pad">
<img src="http://dummyimage.com/64x64/000/fff" width="50">
</a>
</div>
</div>
</div>
So how do I line these three anchors? I've tried vertical-align in every tag that makes sense with every value that makes sense.
JsFiddle version
You need to give your div elements a vertical-align set to top, not the a elements contained within them:
<div style="vertical-align:top; display:table-cell">
<a class="btn cr-button pad-lg" href="#">Test Job 1</a>
</div>
Do like this
.cr-button {
border: solid blue;
}
.job-entry a {
height: 65px;
margin: 5px;
display: block;
}
.block{vertical-align: top;}
<div class="btn-group-vertical col-md-offset-3 col-md-6 col-sm-offset-2 col-sm-8 col-xs-12" style="display:table;">
<div class="job-entry row large-text" style="display:table-row;">
<div class="block" style="display:table-cell;width:75px;">
<a class="btn cr-button pad">
<img src="http://dummyimage.com/64x64/000/fff" width="50">
</a>
</div>
<div class="block" style="display:table-cell">
<a class="btn cr-button pad-lg" href="#">Test Job 1</a>
</div>
<div class="block" style="display:table-cell;width:75px;">
<a href="/Builder/DeleteJob" class="btn cr-button pad">
<img src="http://dummyimage.com/64x64/000/fff" width="50">
</a>
</div>
</div>
</div>
Related
I am new here so apologies if anything wrong I mention.
I want to make my bootstrap buttons mobile responsive. but, I am new to CSS. i want to display my buttons and text in middle of screen for small devices after video.so please tell me how to do it.
Here is my HTML code:
<div class="row" style="margin-top: 5%">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 ">
<p style="float: right; color: black;">I'm Ready to get my risk free <br /> membership today! <br /> (Limited Time and Quantities) </p>
</div>
</div>
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 ">
<a href="#">
<button class="btn btn-theme btn-sm" style="background: white;color: #404040">
My Email Address
</button> </a>
<a href="#">
<button class="btn btn-theme btn-sm" style="background: #404040; border-radius: 10px; color: white">
Keep me on your email list
</button> </a>
<a href="#">
<button class="btn btn-theme btn-sm" style="background: yellow; border-radius: 10px; float: right; color: black">
Get My Risk <br /> Free Membership today
</button> </a>
</div>
</div>
Here is the code. Hope it will Help you. I have added some of classes into p and a tag. Even i put css for mobile view. If any changes please let me know.
#media screen and (max-width: 767px) {
.email-wrap {
display: block;
margin-bottom: 20px;
text-align: center;
}
.text-wrap {
text-align: center;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="main-wrapper">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
<p class="text-wrap">I'm Ready to get my risk free <br /> membership today! <br />
(Limited Time and Quantities) </p>
</div>
</div>
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
<a href="#" class="email-wrap"><button class="btn btn-theme btn-sm" style="background: white;color: #404040">
My Email Address
</button> </a>
<a href="#" class="email-wrap"><button class="btn btn-theme btn-sm" style="background: #404040; border-radius: 10px; color: white">
Keep me on your email list
</button> </a>
<a href="#" class="email-wrap"><button class="btn btn-theme btn-sm" style="background: yellow; border-radius: 10px;color: black">
Get My Risk <br /> Free Membership today
</button> </a>
</div>
You can use media query for it or bootstrap 4 classes.
here is link for bootstrap class:
https://getbootstrap.com/docs/4.0/utilities/display/
#media (max-width: 575px){
p{
text-align: center;
float: unset !important;
}
a {
display: flex;
justify-content: center;
margin-bottom: 15px;
}
}
<div class="row" style="margin-top: 5%">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 ">
<p style="float: right; color: black;">I'm Ready to get my risk free <br /> membership today! <br />
(Limited Time and Quantities) </p>
</div>
</div>
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
<a href="#"><button class="btn btn-theme btn-sm" style="background: white;color: #404040">
My Email Address
</button> </a>
<a href="#"><button class="btn btn-theme btn-sm" style="background: #404040; border-radius: 10px; color: white">
Keep me on your email list
</button> </a>
<a href="#"><button class="btn btn-theme btn-sm" style="background: yellow; border-radius: 10px; float: right; color: black">
Get My Risk <br /> Free Membership today
</button> </a>
</div>
</div>
I have implemented tabs using uib-tabset. There is issue with alignment of tab.
As you can see in below image, my 'Current' tab is shifted to left and it is moving out of card leaving uncomfortable space between 'Current' and 'Upcoming'.
I want both tabs to aligned perfectly with card.
Is there any way?
I have tried changing CSS in a lot of ways (.nav-tabs especially) but no luck.
HTML:
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="card" style="margin-left:3%;margin-right:3%" ng-controller="AppointmentsCtrl">
<uib-tabset active="active">
<div class="row">
<div class="col-xs-6 nav nav-tabs">
<uib-tab index="0" heading="Current"> <!-- -->
<ul class="list-group">
<li class="list-group-item">
<!-- <div id="accordion" role="tablist" aria-multiselectable="true"> -->
<div class="panel panel-default" style="border-color: white;">
<div class="panel-heading" role="tab" id="headingOne"
style="background-color: #686868; margin-top: 5%;">
<div class="row">
<div class="col-xs-2">
<div class="myimage">
<img id="image" src="img/Calender.png"
style="width: 30px; height: 30px;"></img>
<p id="text">26</p>
</div>
</div>
<div class="col-xs-8">
<p class="panel-title" data-toggle="collapse"
data-parent="#accordion"
ng-click="isCollapsed = !isCollapsed" aria-expanded="true"
aria-controls="collapseOne"
style="color: white; font-size: 15px">
Monday, 26 Sep 2016<br> 02:00 PM
</p>
</div>
<div class="col-xs-2">
<a data-toggle="collapse" data-parent="#accordion"
ng-click="isCollapsed = !isCollapsed" aria-expanded="true"
aria-controls="collapseOne"><img id="arrow"
src="img/Down_Arrow.png" style="width: 30px; height: 30px;"></img></a>
</div>
</div>
</div>
<div id="collapseOne" uib-collapse="isCollapsed"
class="panel-collapse collapse" role="tabpanel"
aria-labelledby="headingOne"
style="background-color: #d5d5d5;">
<div class="row">
<div class="col-xs-6 col-sm-offset-1">
<h5 style="color: #696969; margin-top: 5%;">Visitor
Name</h5>
<h5 style="color: #000; font-weight: bold;">Subodh
Bagade</h5>
<h5 style="color: #696969;">Purpose</h5>
<h5 style="color: #000; font-weight: bold;">Sales
Meeting</h5>
</div>
<div class="col-xs-6">
<img src="img/Gray_User.png"
style="margin-top: 10%; width: 110px; height: 100px;"></img>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-4">
<!-- <a ng-href="#/viewdetails/appointmentId={{appointment.appointmentId}}"> -->
<a ng-href="#/viewdetails/appointmentId=1"> <img
src="img/more.png" style="width: 30px; height: 30px;"></img>
</a>
</div>
<div class="col-xs-4">
<!-- <a ng-href="#/edit/appointmentId={{appointment.appointmentId}}"> -->
<a ng-href="#/edit/appointmentId=1"> <img
src="img/Edit_White.png" style="width: 30px; height: 30px;"></img>
</a>
</div>
<div class="col-xs-4">
<a ng-href="#" onClick="confirm('Are you sure?')"> <img
src="img/Delete.png" style="width: 30px; height: 30px;"></img>
</a>
</div>
</div>
</div>
</div>
<!-- </div> -->
</li>
</ul>
<!-- --> </uib-tab>
</div>
<div class="col-xs-6 nav nav-tabs">
<uib-tab index="1" heading="Upcoming">
<p>Some text here.</p>
</uib-tab>
</div>
</div>
</uib-tabset>
</div>
</div>
</div>
</div>
A part of my CSS:
.nav-tabs {
border-bottom: 1px solid #ddd;
}
.nav-tabs>li {
/* float: left; */
margin-bottom: -1px;
background-color:#E9880A;
}
.nav-tabs>li>a {
margin-right: 2px;
line-height: 0.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}
this looks more like alignment issue. Once you align the tabs individually it should work fine. I was able to get it aligned by adjusting the tabs individually.
I have this list that have two products as an example. There could be multiple products but just two right now for this question.
.horizontal {
display: inline;
float:left;
}
.product{
display: block;
height: 320px;
border: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
text-align: center;
padding: 10px 5px;
}
.image{
display: block;
overflow: hidden;
position: relative;
text-align: center;
width: 100%;
max-height: 180px;
height: 200px;
margin-left: auto;
margin-right: auto;
padding-left:.45cm;
}
<ul class="horizontalul">
<li class="horizontal" style="display: inline;">
<div class="product">
<div class="image">
<img class="img-responsive" src="http://www.shingpoint.com.pk/Images/Thumbnails/pc-a1-470-59100-080316082835.jpg" />
</div>
<div class="description">
<h4 class="productname">ASUS VivoMini PC - UN65H-M030M</h4>
</div>
<div class="price">
<span>Rs. 37,900</span>
<input type="button" class="btn btn-primary btn-sm" value="Details" />
</div>
</div>
</li>
<li class="horizontal" style="display: inline;">
<div class="product">
<div class="image">
<img class="img-responsive" src="http://www.shingpoint.com.pk/Images/Thumbnails/pc-a1-470-59100-080316082835.jpg" />
</div>
<div class="description">
<h4 class="productname">ASUS VivoMini PC - UN65H-M030M</h4>
</div>
<div class="price">
<span>Rs. 37,900</span>
<input type="button" class="btn btn-primary btn-sm" value="Details" />
</div>
</div>
</li>
</ul>
I have set the horizontal class to display as inline but it doesn't seem to work like I would like it to work. I the items to align horizontally. How can I make them align horizontally?
Just Add float:left in your class also use float:right but don't forgot to give next block elements clear:both , try it once
.horizontal {
display: inline;
float:left;
padding:10px 5px;
border:1px solid #dddddd;
margin-right:5px;
}
<ul>
<li class="horizontal" style="display: inline;">
<div class="product">
<div class="image">
<img class="img-responsive" src="http://www.shingpoint.com.pk/Images/Thumbnails/pc-a1-470-59100-080316082835.jpg" />
</div>
<div class="description">
<h4 class="productname">ASUS VivoMini PC - UN65H-M030M</h4>
</div>
<div class="price">
<span>Rs. 37,900</span>
<input type="button" class="btn btn-primary btn-sm" value="Details" />
</div>
</div>
</li>
<li class="horizontal" style="display: inline;">
<div class="product">
<div class="image">
<img class="img-responsive" src="http://www.shingpoint.com.pk/Images/Thumbnails/pc-a1-470-59100-080316082835.jpg" />
</div>
<div class="description">
<h4 class="productname">ASUS VivoMini PC - UN65H-M030M</h4>
</div>
<div class="price">
<span>Rs. 37,900</span>
<input type="button" class="btn btn-primary btn-sm" value="Details" />
</div>
</div>
</li>
</ul>
Here it comes:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
<ul>
<li class="horizontal" style="display: inline;">
<div class="product">
<div class="image">
<img class="img-responsive" src="http://www.shingpoint.com.pk/Images/Thumbnails/pc-a1-470-59100-080316082835.jpg" />
</div>
<div class="description">
<h4 class="productname">ASUS VivoMini PC - UN65H-M030M</h4>
</div>
<div class="price">
<span>Rs. 37,900</span>
<input type="button" class="btn btn-primary btn-sm" value="Details" />
</div>
</div>
</li>
<li class="horizontal" style="display: inline;">
<div class="product">
<div class="image">
<img class="img-responsive" src="http://www.shingpoint.com.pk/Images/Thumbnails/pc-a1-470-59100-080316082835.jpg" />
</div>
<div class="description">
<h4 class="productname">ASUS VivoMini PC - UN65H-M030M</h4>
</div>
<div class="price">
<span>Rs. 37,900</span>
<input type="button" class="btn btn-primary btn-sm" value="Details" />
</div>
</div>
</li>
</ul>
Just add li {float: left;} to your style Or if you want to display RTL use li {float: right;}
I want my div col-md-9 to have a height the same as the content in my first div col-md-3's contents.
I also want my div col-md-9's button inside to be the same height as the col-md-3's content.
I'd like the text on the button to fill the button also.
How do I accomplish this?
<div class="row" style="height:300px;">
<div class="col-md-3">
<div class="thumbnail">
<a href="#(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))">
<img src="#(Url.Content("~/Images/LIJayCow-135.png"))" alt="Download Timer App" />
</a>
<div class="caption">
<p>Run the Timer App on your computer to keep track of your time.</p>
<a class="btn btn-primary" href="#(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))">
<span class="glyphicon glyphicon-download"></span> Download
</a>
</div>
</div>
</div>
<div class="col-md-9" style="height:300px; background: #f0e68c">
<div class="thumbnail" style="width:100%; height:300px">
<a class="btn btn-block btn-primary" style="display: block; width: 100%; height:100%; font-size:large" href="#(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))">
<span class="glyphicon glyphicon-share"> LIRA</span>
</a>
</div>
</div>
</div>
All you have to do is change the div with the class "row" to the height you want.
<div class="row" style="height:300px;">
<div class="col-md-3" style="height:100%">
<div class="thumbnail" style="width:100%; height:100%">
<a href="#(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))">
<img src="#(Url.Content("~/Images/LIJayCow-135.png"))" alt="Download Timer App" />
</a>
<div class="caption">
<p>Run the Timer App on your computer to keep track of your time.</p>
<a class="btn btn-primary" href="#(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))">
<span class="glyphicon glyphicon-download"></span> Download
</a>
</div>
</div>
</div>
<div class="col-md-9" style=" background: #f0e68c;height:100%">
<div class="thumbnail" style="width:100%; height:100%;">
<a class="btn btn-primary" style="" href="#(Url.Content('~/ProjectTimer/LITL.DesktopTimer.application'))">
<span class="glyphicon glyphicon-share"> LIRA</span>
</a>
</div>
</div>
</div>
Are you looking for a result like this?
Codepen: link
<div class="row" style="height:300px;">
<div class="col-md-3">
<div class="thumbnail">
<a href="#(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))" >
</a>
<div class="caption" style="height:300px;">
<p>Run the Timer App on your computer to keep track of your time.</p>
<a class="btn btn-primary" href="#(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))">
<span class="glyphicon glyphicon-download"></span> Download
</a>
</div>
</div>
</div>
<div class="col-md-9" style="height:300px; background: #f0e68c">
<div class="thumbnail" style="width:100%; height:300px">
<a class="btn btn-block btn-primary" style="display: block; width: 100%; height:100%; font-size:large" href="#(Url.Content("~/ProjectTimer/LITL.DesktopTimer.application"))">
<span class="glyphicon glyphicon-share" style="font-size: 300px;">LIRA</span>
</a>
</div>
</div>
</div>
Just use the btn-block class, like this:
<div class="col-md-3"><button class="btn btn-block" >Show Details</button></div>
The issue is that the button is 100% height when using h-100, the solution is to set the form element to 100% also.
So it'll look like this:
#using(Html.BeginForm("Action","Controller", FormMethod.Post, new { #class = "h-100" }) {
<button class="h-100">Button</button>
}
I've style border: 1px solid black; to determine if it is correct box, but it overlap and goes outside. This is my html
<div class="panel panel-default">
<div class="panel-body">This page is temporarily disabled by the site administrator for some reason.</div>
<div class="panel-footer clearfix">
<p>Drink whaterver jklasd jklasd jklnxm,c kasdk jj jjjjs lasd jklasd m,zxc asd kljaskd kljasd kl</p>
<div style="border: 1px solid black; display: block;" class="pull-left">
<div class="row">
<p>By Jerald Patalinghug</p>
</div>
<div class="row">
Tags: Funny, Wtf, Nice
</div>
</div>
<div style="border: 1px solid black;" class="pull-right">
<div id="votes">
<div class="row">
<a href="#" data-card_id="26" class="vote upvote btn btn-default">
<span class="fa fa-thumbs-up"></span>
</a>
<a href="#" data-card_id="26" class="vote downvote btn btn-default">
<span class="fa fa-thumbs-down"></span>
</a>
</div>
<div class="row">
<center>
<span class="vote_count">1</span> points
</center>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
and this is the image
look, the inside of div.pull-left are going outside.
EDIT1
Thanks guys, What I did was remove class="row" on every div
<div class="panel panel-default">
<div class="panel-body">This page is temporarily disabled by the site administrator for some reason.</div>
<div class="panel-footer clearfix">
<p>Drink whaterver jklasd jklasd jklnxm,c kasdk jj jjjjs lasd jklasd m,zxc asd kljaskd kljasd kl</p>
<div style="border: 1px solid black; display: block;" class="pull-left">
<div>
<p>By Jerald Patalinghug</p>
</div>
<div>
Tags: Funny, Wtf, Nice
</div>
</div>
<div style="border: 1px solid black;" class="pull-right">
<div id="votes">
<div>
<a href="#" data-card_id="26" class="vote upvote btn btn-default">
<span class="fa fa-thumbs-up"></span>
</a>
<a href="#" data-card_id="26" class="vote downvote btn btn-default">
<span class="fa fa-thumbs-down"></span>
</a>
</div>
<div>
<center>
<span class="vote_count">1</span> points
</center>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
Remove the
<div class="row">
inside each of the bordered div's - these are adding -15px to the left and right. These are only to be used when you are nesting inside .container or .col-sm-12 (for example).
This is a good read if you're not 100% sure on how the bootstrap grid works:
http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works
Use class container-fluid along with pull-left/pull-right.
Solution:
<div class="panel panel-default">
<div class="panel-body">This page is temporarily disabled by the site administrator for some reason.</div>
<div class="panel-footer clearfix">
<p>Drink whaterver jklasd jklasd jklnxm,c kasdk jj jjjjs lasd jklasd m,zxc asd kljaskd kljasd kl</p>
<div style="border: 1px solid black; display: block;" class="pull-left container-fluid">
<div class="row">
<p>By Jerald Patalinghug</p>
</div>
<div class="row">
Tags: Funny, Wtf, Nice
</div>
</div>
<div style="border: 1px solid black;" class="pull-right container-fluid">
<div id="votes">
<div class="row">
<a href="#" data-card_id="26" class="vote upvote btn btn-default">
<span class="fa fa-thumbs-up"></span>
</a>
<a href="#" data-card_id="26" class="vote downvote btn btn-default">
<span class="fa fa-thumbs-down"></span>
</a>
</div>
<div class="row">
<center>
<span class="vote_count">1</span> points
</center>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
Apply padding in style to have nice look
<div style="border: 1px solid black;padding: 2%; display: block;" class="pull-left container-fluid">
<div style="border: 1px solid black;padding: 2%" class="pull-right container-fluid">