How can I get the x positioned vertical middle when displaying on small devices (< 600px width)?
<div class="row">
<div class="col-sm-12">
<section class="panel panel-default panel-slider"><div class="panel-heading">
<h1 class="panel-title" style="font-size:18px">
Test with long description in title panel bla bla<a class="align-middle more pull-right" href="https://example.com" title="" data-toggle="tooltip" data-placement="right" data-original-title="more" ><i>x</i></a>
</h1>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-8" style="margin-bottom: 10px;">
...
</div>
</div>
Currently it is:
Should be:
https://jsfiddle.net/9dtu4en1/
Thanks in advance!
Kind regards
Alex
I'd use flexbox on that h1 for a more fluid resizing, and remove align-middle & pull-right (to avoid floating which would make it's parent not consider child's height) from a:
External Fiddle to resize
Snippet:
h1 {
display: flex;
justify-content: space-between;
align-items: center;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-sm-12">
<section class="panel panel-default panel-slider">
<div class="panel-heading">
<h1 class="panel-title" style="font-size:18px">Test with long description in title panel bla bla
<a class="more" href="https://example.com" title="" data-toggle="tooltip" data-placement="right" data-original-title="more"><i>x</i></a>
</h1>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-8" style="margin-bottom: 10px;">
...
</div>
</div>
Related
Be a hard one to explain so I hope that I will provide enough descriptive information. I have a header which takes advantage of the profile container function and also using the profile-stats with stats-col. Currently, it is laid out as the following but I would like to modify it so the lines are consistent and go straight down.
My code for that is the following:
.profile-container .profile-header .profile-stats .stats-col:not(:last-child) {
border-right: 1px solid #eeeeee;
}
.profile-container .profile-header .profile-stats .stats-col .stats-value {
display: block;
margin: 0 auto;
text-align: center;
font-size: 30px;
font-family: 'Open Sans', 'Segoe UI';
HTML
<div ng-hide="isNewSite">
<div class="row">
<div class="col-xs-12 col-md-12">
<div class="col-xs-6 col-md-6 text-align-left no-padding-left">
<h4>Site Entitlements View</h4>
</div>
<div class="pull-right">
<button class="btn btn-sky" ng-click="toggleButtonFunctionality()">
{{editButtonText}}
</button>
<button class="btn btn-darkorange" ng-click="handleDelete()" title="{{disableDeletionReason}}">
Delete Site
</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="profile-container">
<div class="profile-header row">
<div class="col-lg-2 col-md-4 col-sm-12 text-center">
<img src="assets/img/PICTURE.png" alt="" class="header-avatar"/>
</div>
<div class="col-lg-5 col-md-8 col-sm-12 profile-info">
<div class="header-fullname">{{targetEntity.siteName}}</div>
<span ng-bind-html="renderEntityState(targetEntity.status)"></span>
<div class="header-information" style="font-size:15px">
{{targetEntity.address1}}
<br>{{targetEntity.city}} </br>
{{targetEntity.postCode}}
<br>{{targetEntity.country}} </br>
</div>
</div>
<div class="col-lg-5 col-md-12 col-sm-12 col-xs-12 profile-stats">
<div class="row" >
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 stats-col" >
<div class="stats-value purple">{{serviceTotal}}</div>
<div class="stats-title">SERVICES</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 stats-col">
<div class="stats-value purple">{{siteSubjectsTotal}}</div>
<div class="stats-title">SUBJECTS</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 stats-col">
<div class="stats-value purple">
<a ui-sref="app.client-details({clientId:entity.clientIdId})"
ui-sref-active="active" class="purple">{{targetEntity.clientName}}
</a>
</div>
<div class="stats-title">CLIENT</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I do know that if I remove the .stats.-col then it does become consistent in the look but I still want the space between the values.
So I am wondering does anyone know what I could do? If you need further explanation I am happy to help.
I have the following bootstrap code:
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-md-2 col-sm-2">
<div style="width: 75px; background-color: #ccc">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-10 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
On tablets and desktops, this code looks good. However, on smaller devices, xs, the right content flows into the image. I am trying to make the text just wrap on the right and not collide with the image.
I have a fiddle here so you can see what I'm talking about. If you open the fiddle and resize the browser small enough, you'll see the right text overlap onto the image. How can I prevent this?
Try this.
<div class="container-fluid">
<div class="row">
<div class="col-xs-3 col-md-2 col-sm-2">
<div style="width: 75px; background-color: #ccc">
<img class="img-responsive" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-9 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
It is because of the width set.
Try this.
JSFiddle
HTML
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-md-2 col-sm-2">
<div style="background-color: #ccc">
<img class="test-image" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-10 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
CSS
.test-image{
width:100%;
height:auto;
min-width:25px;
}
Easiest way I know is to apply a direct width to element. You could theoretically alter the bootstrap 3 SCSS or LESS (whichever you use) and add in a special column class, but this is the most direct method.
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div style="width:75px" class="col-xs-2">
<div style="width: 75px; background-color: #ccc">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-10 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
It is becaue of the width of the col-xs-2.You can chage that.Or try an alternative solution like this
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div style="width: 75px; background-color: #ccc;display:table-cell;">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
<div class=" " style="display:table-cell;vertical-align:middle;">
Right content
</div>
</div></div></div>
Or with css flexboxes like
<div class="container-fluid">
<div class="row">
<div class="col-xs-12" style="display:flex">
<div style="width: 75px; background-color: #ccc;flex:1;">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
<div class=" " style="flex:1;vertical-align:middle;">
Right content
</div></div></div></div>
here's my markup:
<div class="row">
<div class="col-md-3">
<div class="row">
<a href="#">
<div class="col-md-6 col-xs-6">
<img class="img-responsive" src="/images/foo.jpg">
</div>
<div class="col-md-6 col-xs-6 vorteil">
text
</div>
</a>
</div>
</div>
<! -- plus 3 more items -->
</div>
which will look like this:
the problem however is - when reducing the browser width it will turn out like this:
the image will overflow its container although it should be responsive ..
any ideas what's wrong?
thanks
Wrap the red and grey divs in a DIV tag, not a link. Give the following style to your containing div:
.containing-div {display:block; overflow:auto;}
you are missing the parent class .container form bootstrap. look at bootstrap docs
.container {
border: 1px grey solid
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="row">
<a href="#">
<div class="col-md-6 col-xs-6">
<img class="img-responsive" src="///dummyimage.com/300x600">
</div>
<div class="col-md-6 col-xs-6 vorteil">
text
</div>
</a>
</div>
</div>
<! -- plus 3 more items -->
</div>
</div>
here's my markup:
<style>
a.item
{
border:1px solid #aaa;
background:#ddd;
padding:10px;
display:block;
}
span.price
{
display:block;
text-align:center;
background:#555;
color:white;
}
</style>
<div class="main">
<div class="row">
<div class="col-md-3">
<a class="item" href="#">
<div class="row">
<div class="col-md-6">
IMAGE
</div>
<div class="col-md-6">
<span class='price'>123.45</span>
</div>
</div>
</a>
</div>
<div class="col-md-3">
<a class="item" href="#">
<div class="row">
<div class="col-md-6">
IMAGE
</div>
<div class="col-md-6">
<span class='price'>123.45</span>
</div>
</div>
</a>
</div>
<div class="col-md-3">
<a class="item" href="#">
<div class="row">
<div class="col-md-6">
IMAGE
</div>
<div class="col-md-6">
<span class='price'>123.45</span>
</div>
</div>
</a>
</div>
<div class="col-md-3">
<a class="item" href="#">
<div class="row">
<div class="col-md-6">
IMAGE
</div>
<div class="col-md-6">
<span class='price'>123.45</span>
</div>
</div>
</a>
</div>
</div>
</div>
it looks fine - like this:
the problem however is - when decreasing the browser window's width, it will destroy the layout and will look like this:
"image" and price are not side-bye-side anymore .. any ideas what's wrong with my code?
thanks
Include col-xs-6 next to col-md-6.
https://jsfiddle.net/gqmarfkh/ jsFiddle - I changed 2 of them as an example.
If you change .col-md-6 to col-xs-6 it should solve your problem. The class col-md-6 has no value untill the screen size is medium and up. Class col-xs-* will have a value from x-small and up. Check out this link: http://getbootstrap.com/css/#grid-options
I am using bootstrap grid to have the responsive layout.
But I am unable to remove gap between two columns.
my code is as follows:
<div class="contact-us-box">
<div class="container-fluid">
<div class="row">
<div class="col-lg-2 col-md-2">
</div>
<div class="col-lg-6 col-md-7 col-sm-8 col-xs-12 text-center">
<p class="contact-us-footer">Choose Share&Care as your development partner </p>
</div>
<div class="col-lg-4 col-md-3 col-sm-4 col-xs-12 text-center">
<a class="contact-us-link" href="../contact-us.php">
<i class="fa fa-envelope-o"></i> Contact Now!
</a>
</div>
</div>
</div>
</div>
my output is:
I want to remove the gap between partner and contact now button.
please help me is this regard.
My Solution
here is my solution:
<div class="contact-us-box">
<div class="container-fluid">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-9 col-xs-12 contact-us-gap-p">
<p class="contact-us-footer">Choose Share&Care as your development partner </p>
</div>
<div class="col-lg-4 col-md-4 col-sm-3 col-xs-12 contact-us-gap-a">
<a class="contact-us-link" href="contact-us.php">
<i class="fa fa-envelope-o"></i> Contact Now!
</a>
</div>
</div>
</div>
</div>
here is my css file :
.contact-us-gap-p{
text-align: right;
}
.contact-us-gap-a{
text-align: left;
}
#media (max-width: 768px) {
.contact-us-gap-p{
text-align: center;
}
.contact-us-gap-a{
text-align: center;
}
}
This code is working fine for me.
Here I used css inline for semplicity, but using class is better. I simply aligned the text of the two div to reduce the gap between the two columns.
<div style="text-align: right;" class="col-lg-6 col-md-7 col-sm-8 col-xs-12 text-center">
...
</div>
<div style="text-align: left;" class="col-lg-4 col-md-3 col-sm-4 col-xs-12 text-center">
If you do not want this to apply in mobile version, insert this code into media query for screen only
....