I have this demo : https://jsfiddle.net/DTcHh/18752/ I want that image height is based on right side so that image always goes to the end of div. Any suggestion?
<div class="blog_list">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="blog_image">
<img src="img/property_img.png" />
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="blog_details">
<div class="blog_title">This comfortable apartment is located in the heart of Zurich</div>
<div class="blog_posted">POSTED ON: <span>JANUARY 24 2016 14:35h </span>IN <span>KREIS 1</span></div>
<p class="blog_more-details">
Wheather a single room studio or multi-room apartment, each has at least one own bathroom and a fully quipped kitches.
</p>
<div class="sold_by">
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="row">
<div class="col-md-2 col-sm-2 col-xs-12 ">
<div class="profile-image"><img src="img/profile.png" /></div>
</div>
<div class="col-md-10 col-sm-10 col-xs-12 no-padding-left">
<span class="property">ARTICLE WRITEN BY</span>
<span class="property_name">Janine Lindenmuller</span>
<div class="blog_read_more">
READ MORE
</div>
</div>
</div>
</div>
</div></div></div></div></div></div>
i think u need to remove bootstrap grid class and have to write some custom css with display:table-cell
for example
.img,.text {
display: table-cell;
vertical-align: top;
}
.img {
width:60%;
}
.text {
width:40%;
}
Also use low dimension image. Fiddle here
Set your image row like this:
JSFiddle
<div class="col-md-12 col-sm-12 col-xs-12">
Related
I am trying to build a website with flash-cards to help learn the Hebrew alphabet. My Card partial view looks like this:
#model FlashCards.MultipleChoice.ViewModels.CardViewModel
<div class="index-card">
<div class="row">
<div class="col-md-offset-5"></div>
<div class="col-md-2 text-center">
#Model.Numeric
</div>
</div>
<div class="row">
<div class="col-md-offset-2"></div>
<div class="col-md-8 text-center card-symbol">
#Html.Raw(Model.UnicodeEscape)
</div>
</div>
<div class="row">
<div class="col-md-offset-2"></div>
<div class="col-md-8 text-center">
#Model.Name
</div>
</div>
</div>
Now the col-md-offset works on all but the first row, causing the card to render as in the below image:
Now why isn't the 1 in the image offset like the glyph and the name for the letter Aleph?
My CSS file for these cards only contains the following so far:
.index-card {
height: 150px;
}
.index-card .card-symbol {
font-size: large
}
I believe you're using the offset classes wrong; do not apply them to empty divs.
Your text is centered. Second and third rows have widths of 8 columns. It looks like the offset is working but it really isn't. The first row is only 2 columns wide. None of your offset divs are having any effect on the layout.
You need to do something like this, at the very least:
<div class="index-card">
<div class="row">
<div class="col-md-offset-5 col-md-2 text-center">
#Model.Numeric
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-8 text-center card-symbol">
#Html.Raw(Model.UnicodeEscape)
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-8 text-center">
#Model.Name
</div>
</div>
</div>
Hi I would like to share the following code:
<div class="row full-width full-height wrapper-container">
<div class="row full-width" style="flex: 0 0 auto;">...Items here...</div>
<div class="row full-width wrapper-fullfill" style="flex: 1 1 auto; margin-top: 0.5rem;">
<div ng-class="showList" class="row col-xs-12 col-sm-7 col-lg-8 wrapper-container">
<div class="row full-width dropdown-places-type-mobile">
<div class="input-container col-xs-12 no-padding" style="display:inline-block;">
<div class="text-info text-info-menu" type="text" dropdown-menu="placesType" dropdown-model="placeType">Tipo de espacios</div>
<img src='../images/arrow-select-primary.png' class="input-icon-menu" />
</div>
</div>
<div class="row full-width wrapper-fullfill" style="overflow-y:scroll; padding:0;">
<div class="row col-xs-12">
<div ng-repeat="place in places" class="col-xs-12 col-sm-6 col-lg-4">
<div ng-include="'./views/items/place-card.html'">
</div>
</div>
</div>
</div>
</div>
<div ng-class="showMap" class="col-xs-12 col-sm-5 col-lg-4" style="overflow: hidden; padding:0;">
<ui-gmap-google-map ng-if="showMapMobile" center='map.center' zoom='map.zoom' options='map.options'>
<ui-gmap-markers fit="true" models="placeMarkers" coords="'self'" icon="'icon'" options="'options'">
</ui-gmap-markers>
</ui-gmap-google-map>
</div>
</div>
</div>
Here the css for wrapper-container and wrapper-fullfill:
.wrapper-container {
flex-direction: column;
flex-flow: column;
}
.wrapper-fullfill {
flex-grow: 1;
}
I have a flex wrapper-container and inside a wrapper-fullfill class to fullfill al the remaining space until cover all the div with the element.
The problem is that in Chrome and Firefox the behaviour is the expected one, but in Safari the nested wrapper-container is not working as expected.
I would like to know if you could help me to find a solution for that. I am really stuck on this.
Here you can find the full code of the page with the css and the html elements:
http://test.nomadespacios.com/#!/places
Thank you very much in advance.
I'm using bootstrap (version 3.3.6) for the first time to make my site. Readed the docs and start to code. Excluding the <link>'s the code below is my site's structure:
<body>
<div class="container">
<div class="row">
<div class="col-sm-2 col-md-2 col-lg-2 col-lg-pull-1">
<div class="loader">
<div class="loader-bg">
...
</div>
</div>
</div>
<div class="col-sm-10 col-md-10 col-lg-10 col-lg-push-1">
<div class="black-box">
<p class="info-message">Coming <span>VERY</span> soon!</p>
<p class="text-message">Until then, my contacts:</p>
...
</div>
</div>
</div>
</div>
Using push and pull classes I thought I was removed padding for the columns. Setting the main div with 'class="container"' I have the result:
Changing to 'class="container-fluid"' the behavior remains strange. Notice shapes overlapping page:
What I want in my results is: the circle and rectangle (both are divs) remains aligned to the edges of the page (left and right) with no padding or marging. Following docs until now doesn't work. What this behavior occurs?
by default col-* have padding so you just need to reset them
[class^="col"] {
padding: 0
}
[class$="-2"] {
background: orange
}
[class$="-10"] {
background: grey
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<div class="loader">
<div class="loader-bg">
...
</div>
</div>
</div>
<div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
<div class="black-box">
<p class="info-message">Coming <span>VERY</span> soon!</p>
<p class="text-message">Until then, my contacts:</p>
...
</div>
</div>
</div>
I want my date picker to be in the middle of the page, eg. the line where I have: <div class="center-block text-center datepicker"></div>
Obviously center-block and text-center I tried already - but neither change anything. And with the offset it just makes it close to the centre without being perfectly centre aligned.
What do I need to do?
Thanks
<div class='row'>
<div class='col-sm-12'>
<div class='page-header page-header-with-icon mg-t'> <i class='fa-icon-calendar'></i>
<h2>Calendar</h2>
</div>
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<div class="center-block text-center datepicker"></div>
</div>
</div>
</div>
</div>
Try something like this:
<div class="col-sm-12">
<div class="datepicker"></div>
</div>
Then give the date picker something like:
.datepicker {
display:inline-block;
margin:0 auto;
}
I haven't tested this, but it would be where I would start.
style="text-align:center;" shall do the trick no? I tested and for me, the "CALENDAR" text is centered
<div class="col-sm-12">
<div class="page-header page-header-with-icon mg-t" style="text-align:center;">
<i class="fa-icon-calendar"></i>
<h2>Calendar</h2>
</div>
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<div class="center-block text-center datepicker"></div>
</div>
</div>
</div>
</div>
This is what should solve your problem. Add it somewhere in your custom stylesheet and change the width % to what suits your design.
.datepicker-inline {
width: 20%;
}
I'm trying to use Bootstrap 3 to make a grid-based template for a modal (which I'm also using Bootstrap for). The modal appears, and all the content is there ... but the styling is off. It looks like the row classes don't fill their parent containers, even though there's no styling that should make that happen. Here's a screenshot - you can see that neither the row in the header nor the row in the body take the width of their parent. I've tried poking around other SO posts for information, but I can't seem to find anything on why a row wouldn't fill its parent width.
Update:
Here's a JSFiddle. It looks like it actually works on JSFiddle ... which means it's not a problem with the immediate template, so I'm looking into other possible causes. Thanks for the tip, calvin!
HTML
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header ht-modal-header">
<h1>
Bombay Teen Challenge
</h1>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<address>
1 Chium Village, Ambedkar Road<br/>
Bandra West<br/>
Mumbai 400052
</address>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<abbr>e: </abbr> kkdevaraj#bombayteenchallenge.org<br/>
<abbr>p: </abbr> +91 22 2604 2242
</div>
</div>
</div>
<div class="modal-body ht-modal-body">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="types">
<span class="prevention-label"></span> Prevention, Education, Teen
</div>
<div class="facebook">
<span class="fa fa-facebook-square fa-2x"></span> BombayTeenChallenge
</div>
<div class="twitter">
<span class="fa fa-twitter-square fa-2x"></span> #BombayTC
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="people">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<label>People: </label>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
Dr. Rama R. Rao<br/>
Monte Hackney
</div>
</div>
</div>
<div class="partners">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<label>Partners: </label>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
None Available
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
LESS
.prevention-label {
width: 24px;
height: 24px;
line-height: 24px;
display: inline-block;
background-color: #4ECDC4;
}
.ht-modal-header {
a {
&:hover, &:focus {
color: white;
}
color: white;
}
color: white;
background: linear-gradient(#ht-teal, darken(#ht-teal, 5%));
background: -webkit-gradient(#ht-teal, darken(#ht-teal, 5%));
background: -o-linear-gradient(#ht-teal, darken(#ht-teal, 5%));
background: -moz-linear-gradient(#ht-teal, darken(#ht-teal, 5%));
}
If you nest rows in columns you must understand that inside a .col-lg-6 .row the whole thing starts new (at 100%) and for you you to fill it have to use .col-lg-12 inside of it.
This snippet should work for you
<div class="col-sm-6">
<div class="people">
<div class="row">
<div class="col-sm-12">
<label>People: </label>
</div>
<div class="col-sm-12">
Dr. Rama R. Rao<br/>
Monte Hackney
</div>
</div>
</div>
<div class="partners">
<div class="row">
<div class="col-sm-12">
<label>Partners: </label>
</div>
<div class="col-sm-12">
None Available
</div>
</div>
</div>
</div>