I want to place an image at the bottom right corner of a text and that text should take col span of 5. I have the following code and it creates a scroll bar vertically on the page.
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="col-sm-5 col-md-5">
<div class="Mymsg">Welcome to Era</div>
<div class="msg">here you are!</div>
</div>
<div class="media">
<a href="#">
<img class="media-object" src="images/myIamge.png"/>
</a>
</div>
</div>
</div>
Please add two more classes col-sm-7 col-md-7 for the media:
<div class="media col-sm-7 col-md-7">
<a href="#">
<img class="media-object" src="images/myIamge.png"/>
</a>
</div>
Related
I've made bootstrap cards that appear on two different pages. One on the landing page which I want to increase the spacing and one on the books page which I want to increase the width of the cards. Here's the code that I've written and used in both pages. The only thing that I've changed is on the 6th line from '...col-lg-3' to '...col-lg-2'. If anyone can assist me in adding the spacing and increasing the with of the card, help me if you can. d-flex justify-content-evenly doesn't work when i use col-lg-3.
<section id="about" class="ts-block" >
<div id="cards_landscape_wrap-2">
<div class="container " style="width:70%">
<div class="row d-flex justify-content-around">
#foreach($products as $product)
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<a href="{{route("products.show",$product->slug)}}">
<div class="card-flyer ">
<div class="text-box">
<div class="image-box">
<img src="{{asset($product->image)}}" alt="{{$product->title}}" class="img-fluid rounded mx-auto d-block" width="100%"/>
</div>
<div class="card-footer">
<i class="text-muted"><strike>Ksh.{{$product->old_price}}</strike></i>
<span class="text-primary font-weight-bold">Ksh.{{$product->price}}</span><br>
<span class="mybuttonoverlap btn btn-primary">View</span>
</div>
</div>
</div>
</a>
</div>
#endforeach
</div>
</div>
</div>
</section>
Try including d-flex justify-content-around to a direct parent containing the cards instead of
<div class="row d-flex justify-content-around">. And add margin to the card.
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 d-flex justify-content-around">
<a href="{{route("products.show",$product->slug)}}">
<div class="card-flyer m-2">
<div class="text-box">
<div class="image-box">
<img src="{{asset($product->image)}}" alt="{{$product->title}}" class="img-fluid rounded mx-auto d-block" width="100%"/>
</div>
<div class="card-footer">
<i class="text-muted"><strike>Ksh.{{$product->old_price}}</strike></i>
<span class="text-primary font-weight-bold">Ksh.{{$product->price}}</span><br>
<span class="mybuttonoverlap btn btn-primary">View</span>
</div>
</div>
</div>
</a>
</div
I am using bootstrap 4 alpha 6 and noticed a strange behavior when using a grid inside the body of a card without card-block.
<div class="container">
<h5>
The building block of a card is the .card-block. Use it whenever you need a padded section within a card.
</h5>
<h4>
row inside card "body" with class card-block
</h4>
<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-block">
<div class="row">
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
</div>
</div>
</div>
<br>
<br>
<h4>
row inside card "body" without class card-block
</h4>
<div class="card">
<div class="card-header">
Featured
</div>
<div class="foo">
<div class="row">
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
</div>
</div>
</div>
</div>
I don't want to use padding for the body of my card
The building block of a card is the .card-block. Use it whenever you need a padded section within a card.
but my grid comes out of the body of the card.
Is a desired behavior or is a bug to fix?
Thank you
JSFiddle (open full view)
It is the desired behavior of the grid system. The .row has a negative margin to counteract the padding of grid columns, so that the leftmost and rightmost columns have proper alignment with the edge of the the viewport (or the edge of the .row's container). Also, while the negative margin is there, the content of each grid column is still within the card because of the padding in each column.
Normally, the .row is placed inside a .container or .container-fluid that has 15px padding to counteract the negative margin. .card-block does have padding, but it's not 15px which is why the .card-block does not perfectly align the card's grid content to the edge of your card.
So, I'm not sure what you're trying to achieve, but there are 2 other ways you could use the grid inside the card. One way, is to use a .container-fluid so that the outer grid columns align perfectly with the edge of the card...
<div class="card">
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
..
</div>
<div class="col-md-2">
..
</div>
..
</div>
</div>
</div>
Another is to use a gutterless row (.no-gutters). This would remove the negative margin from the row, and padding from all of the columns. The content of each column then takes the entire width of the column.
<div class="card">
<div class="row no-gutters">
<div class="col-md-2">
..
</div>
<div class="col-md-2">
..
</div>
..
</div>
</div>
http://www.codeply.com/go/vE2EdNPQwV
I have implemented owl slider for cards, I tried to simulate as mobile device, it looks the card is not properly centered.
I've tried all UI grid and other center classes, they didn't work.
Here is my HTML
<div class="owl-carousel">
<div class="ui card">
<div class="image dimmable">
<div class="ui blurring inverted dimmer transition hidden">
<div class="content">
<div class="center">
<div class="ui teal button">Ver más sobre Circulo K</div>
</div>
</div>
</div>
<img src="../assets/images/stores/circulok.jpg">
</div>
<div class="content">
<div class="header">Circulo K</div>
<div class="meta">
<a class="group">Meta</a>
</div>
<div class="description">Descripción Corta</div>
</div>
<div class="extra content">
<a class="right floated created">Arbitrary</a>
<a class="friends"></a>
</div>
</div>
</div>
</div>
How do I that?
Use the centered class.
<div class="ui centered card"><br> <!-- HERE -->
<div class="image">
<img src="/path/to/image/"><br>
</div>
<div class="content">
<a class="header">Link</a><br>
</div>
</div>
Using class such as ui grid centered or ui container center aligned
For example:
<div class="ui container center aligned">
<div class="ui segment">Hello Center</div>
</div>
When using a "Link Item", begun with <div class="ui divided link items">, in Semantic UI (as per the manual: http://semantic-ui.com/views/item.html), where should I specify the URL of the page I would like the item to link to?
I tried wrapping the whole <div class="item"> within <a>, but doing so breaks the formatting of the item such that the content appears below the picture.
You can sub your div.item with a.item like in this fiddle or HTML below:
<div class="ui divided link items">
<a class="item" href="http://www.google.com" target="_blank">
<div class="ui tiny image">
<img src="http://www.semantic-ui.com/images/avatar/large/stevie.jpg">
</div>
<div class="content">
<div class="header">Google</div>
<div class="description">
<p></p>
</div>
</div>
</a>
<a class="item" href="http://www.yahoo.com" target="_blank">
<div class="ui tiny image">
<img src="http://www.semantic-ui.com/images/avatar/large/veronika.jpg">
</div>
<div class="content">
<div class="header">Yahoo!</div>
<div class="description">
<p></p>
</div>
</div>
</a>
<a class="item" href="http://duckduckgo.com/" target="_blank">
<div class="ui tiny image">
<img src="http://www.semantic-ui.com/images/avatar/large/jenny.jpg">
</div>
<div class="content">
<div class="header">DuckDuckGo</div>
<div class="description">
<p></p>
</div>
</div>
</a>
</div>
In a Bootstrap carousel item, I have a row of images nested in Bootstrap columns. Their height varies according to the width of columns. In the same row, there are also carousel controls LEFT and RIGHT for changing the items of the carousel.
I need to have the controls left (<) and right (>) vertically centered to the row. How can this be acomplished?
I tried to remove the row class and use the dislay: table and table-cell, which aligned controls vertically, but whole responsiveness was lost.
Example here: http://testabc.borec.cz/
HTML (carousel):
<div id="monthly-tips" class="carousel slide showcase showcase-1 text-center"><!-- class of slide for animation -->
<h1>Title</h1>
<div class="carousel-inner">
<div class="item container-fluid active">
<div class="row" style="display: flex;
align-items: center;">
<div class="col-xs-1 nopadding">
<a class="carousel-control left" href="#monthly-tips" data-slide="prev">
<span class="gi gi-chevron-left"></span>
</a>
</div>
<div class="col-xs-10 col-sm-5 col-md-3">
<img src="./img/books/syn-spravce-sirotcince.jpg" class="envelope js-book1" alt="" />
</div>
<div class="hidden-xs col-sm-5 col-md-4">
<img src="./img/books/tanec-s-nepritelem.jpg" class="envelope js-book2" alt="" />
</div>
<div class="hidden-xs hidden-sm col-md-3">
<img src="./img/books/syn-spravce-sirotcince.jpg" class="envelope js-book1" alt="" />
</div>
<div class="col-xs-1 nopadding">
<a class="carousel-control right" href="#monthly-tips" data-slide="next">
<span class="gi gi-chevron-right"></span>
</a>
</div>
</div>
<div class="row">
<div class="col-xs-1 nopadding"></div>
<div class="col-xs-10 col-sm-5 col-md-3">
<span class="bottom-shadow"></span>
</div>
<div class="hidden-xs col-sm-5 col-md-4">
<span class="bottom-shadow"></span>
</div>
<div class="hidden-xs hidden-sm col-md-3">
<span class="bottom-shadow"></span>
</div>
<div class="col-xs-1 nopadding"></div>
</div>
<div class="row info-holder">
<div class="col-xs-1 nopadding"></div>
<div class="col-xs-10 col-sm-5 col-md-3">
<p class="book-title">Syn správce sirotčince</p>
<p class="book-author">Adam Johnson</p>
</div>
<div class="hidden-xs col-sm-5 col-md-4">
<p class="book-title">Tanec s nepřítelem</p>
<p class="book-author">Ruta Sepetysová</p>
</div>
<div class="hidden-xs hidden-sm col-md-3">
<p class="book-title">Tanec s nepřítelem</p>
<p class="book-author">Ruta Sepetysová</p>
</div>
<div class="col-xs-1 nopadding"></div>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
</div>
</div><!-- carousel monthly-tips -->
You can add a new css property align-items on your .row container like this :
CSS :
.row { // add a new class to your row and target your newest class
display: flex;
align-items: center;
}