I have this template that is working fine.
But when I want to separate the single-course (or product) in a component, row-class not working fine and items are under each other...
This is my code:
<div class="col-lg-9">
<div class="row">
<app-single-course></app-single-course>
<app-single-course></app-single-course>
</div>
</div>
Update
this is the code without single component and its working fine if I copy it they appear side by side.
<div class="col-lg-9">
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="single-course-inner style-two">
<div class="thumb">
<img src="assets/img/course/2.png" alt="img">
<div class="rating">4.9/5 <i class="fa fa-star"></i></div>
<i class="fa fa-bookmark-o"></i>
</div>
<div class="details">
<div class="meta">
<div class="row">
<div class="col-6">
<p>5,957 students</p>
</div>
<div class="col-6 text-right">
<p>01h 49m</p>
</div>
</div>
</div>
<h5>Motion Graphics: Create a Nice Typography Animation</h5>
<div class="price-inner">
<div class="row">
<div class="col-6">
<p>$33.99</p>
</div>
<div class="col-6 text-right">
<i class="fa fa-shopping-cart"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I think you might talk about the bootstrap grid system.
Well first of all the col class comes inside the row class or else you'll always have item "under each other".
Here is the documentation with examples : https://getbootstrap.com/docs/4.5/layout/grid/
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
guys so I'm pulling in content from a JSON file to populate a grid of images. when the data loads it displays all the images in 1 column instead of in a grid. ideally, i would like a 4 wide image grid. All the CSS for this part of from default Bootstrap 4 values
HTML
<div id="UHD" ng-controller="Content-folders-4K">
<div id="UHD-frames" class="d-flex">
<div ng-repeat="friend in UHD" class="row">
<div id="img-frame" class="col-md-3 col-sm-6 col-xs-12">
<a href="/4k/{{friend.name}}.html">
<img alt="{{friend.name}}" src="assets/images/4k-thumbs/{{friend.name}}.jpg" class="img-fluid">
</a>
<p class="font-weight-bold text-center">{{friend.name}}</p>
</div>
</div>
</div>
</div>
Current result
Expected (simulated) result
I think You didn't wrap Your Grid with container and row class
Follow below example
<div class="container">
<div class="row">
<div class="col"> 1 of 2 </div>
<div class="col"> 2 of 2 </div>
</div>
</div>
**Wrap Your column div with container and row class **
You want to iterate the columns instead of the row...
<div id="UHD" ng-controller="Content-folders-4K">
<div id="UHD-frames" class="d-flex">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12" ng-repeat="friend in UHD">
<a href="/4k/{{friend.name}}.html">
<img alt="{{friend.name}}" src="assets/images/4k-thumbs/{{friend.name}}.jpg" class="img-fluid">
</a>
<p class="font-weight-bold text-center">{{friend.name}}</p>
</div>
</div>
</div>
</div>
here's the code I used to get it to work.
<div id="UHD" ng-controller="Content-folders-4K" class="row">
<div ng-repeat="friend in UHD" class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<a href="{{friend.link}}">
<div id="tiles" class="tiles">
<img src="thumbs/111/{{friend.name}}.png" alt="" />
</a>
<p class="text-center">{{friend.name}}</p>
</div>
</div>
</div>
Using BootStrap trying to get a full column width heading and in medium to small sizes, would like single stacked column. The Social media icons don't seem to want to jump up to the top line when resized to full screen. Any help would be appreiciated. Thank you. Here is the codepen.io link and the code is below.
<div class="pull-left row">
<div class="col-sm-2">
<img src="https://lh3.googleusercontent.com/7y0kWKxE4dgnlrTbZYvYYoY9ir9YR5aHtRxdnidEAR54I2ZyFm8Bb1G1NiXspp3EP6lmBQ=s86"
</div>
</div>
<div class="row">
<div class="col-sm-8">
<h1 class="site-title h1 text-uppercase">Open Up<br> Language Services</h1>
<small class="sub-title text-muted text-uppercase">Aprendizaje que teine impacto en tu mundo</small>
</div>
</div>
</div>
<div class="row">
<span class="col-sm-2">
<img src="http://res.cloudinary.com/erikrobles/image/upload/v1521666999/linkedInIcon_htpbxo.png">
<img src="http://res.cloudinary.com/erikrobles/image/upload/v1521666999/linkedInIcon_htpbxo.png">
<img src="http://res.cloudinary.com/erikrobles/image/upload/v1521666999/linkedInIcon_htpbxo.png">
</span>
</div>
</div>
After a lot of head-scratching, I finally came up with the solution. Here it is:
<body>
<div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-2 col-md-2 col-lg-2">
<img src="https://lh3.googleusercontent.com/7y0kWKxE4dgnlrTbZYvYYoY9ir9YR5aHtRxdnidEAR54I2ZyFm8Bb1G1NiXspp3EP6lmBQ=s86">
</div>
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
<h1 class="site-title h1 text-uppercase">Open Up<br> Language Services</h1>
<small class="sub-title text-muted text-uppercase">Aprendizaje que teine impacto en tu mundo</small>
</div>
<div class="col-xs-12 col-sm-2 col-md-2 col-lg-2">
<img src="http://res.cloudinary.com/erikrobles/image/upload/v1521666999/linkedInIcon_htpbxo.png">
<img src="http://res.cloudinary.com/erikrobles/image/upload/v1521666999/linkedInIcon_htpbxo.png">
<img src="http://res.cloudinary.com/erikrobles/image/upload/v1521666999/linkedInIcon_htpbxo.png">
</div>
</div>
</div>
I am facing an issue while trying to create a page contain N cards(single or multiple)
while in multiple all cards are as I want them to be, when it is a single card it shrinks and is not presented as I want it to be :
and a single card looks like this:
I am trying to understand what I am doing wrong.
this is the card HTML :
<div class="card text-white bg-danger">
<div class="card-header">
<div class="row">
<div class="col col-xs-3">
<i class="fa fa-euro">{{expenseItem.amount}}</i>
</div>
<div class="col col-xs-9 text-right">
<div class="d-block huge">{{count}}</div>
<div class="d-block">{{label}}</div>
<div class="card-body">
<div class="row">
</div>
</div>
</div>
</div>
</div>
<div class="card-footer">
<span class="float-left">Details </span>
<a href="javascript:void(0)" class="float-left card-inverse">
<span ><i class="fa fa-arrow-circle-left"></i></span>
</a>
</div>
</div>
and it is located inside acomponent that should be a list :
<div class="container">
<div class="row">
<hr>
</div>
<div class="row">
<div class="page-header">
<h1 >Comp header</h1>
<h4> total epenses per month {{expenses.total}}</h4>
<app-pagination [paginationSize]="limit" [total]="total" (requierdPage)="getPage($event)"></app-pagination>
</div>
</div>
<hr>
<!--<div class="row" >
<div class="col-xs-3 col-lg-4" *ngFor="let expense of expensesList" >
<app-expnses-item [expenseItem]="expense"></app-expnses-item>
</div>
</div>-->
<!--<div class="container">
<div class="row">
<div class="card-deck" *ngFor="let expense of expensesList">
<app-expnses-item [expenseItem]="expense"></app-expnses-item>
<!– <div class="card">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider
card with supporting text below as a natural lead-in to additional content.
This content is a little bit longer.This is a wider
card with supporting text below as a natural lead-in to additional content.
This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>–>
</div>
</div>
</div>-->
<div class="row" >
<div class="col-sm-6 col-xs-6 col-xl-6 col-md-6 col-lg-6" *ngFor="let expense of expensesList">
<app-expnses-item [expenseItem]="expense"></app-expnses-item>
</div>
</div>
<div class="row add">
<div class="col-xs-1 offset-xs-1 align-self-sm-end">
<i class="fa fa-plus-square-o fa-4x" aria-hidden="true" (click)="Uopen()"></i>
</div>
<app-add-expense (onFormSubmitted)="onDataSubmit($event)"></app-add-expense>
</div>
</div>
what am I missing here?
The .card-deck should be placed directly in container instead of row. Remove the .row as it's flexbox, and should be used only to contain grid columns (col-*) which you're not using for the .card-deck.
<div class="container">
<div class="card-deck">
<div class="card text-white bg-danger">
</div>
<div class="card text-white bg-danger">
</div>
(repeat 1..n cards)
</div>
</div>
https://www.codeply.com/go/Gmch54KdgL
I'm working on a template and my code looks something like this. It looks how I want to looks, but I don't know if it's ok technical talking.. Need some tips:
<div class="row">
<div class="col-xs-5 padding-box-product-image margin-image-product">
<div class="pic-box-product">
<img class="img-upload img-responsive" src="srcimg.png" />
</div>
</div>
<div class="col-xs-7 width-content-product">
<div class="col-xs-12 no-padding-left">
<h2 class="col-xs-7 no-margin no-padding line-height-product title-product">Ttesta</h2>
<p class="col-xs-5 no-margin dots-product-page line-height-product ">● ● ●</p>
<p class="col-xs-12 no-margin no-padding line-height-product subtitle-product">Xytzadwa </p>
<p class="col-xs-12 no-margin no-padding line-height-product date-product">My test</p>
<div class="col-xs-12 decoration decoration-margins-product-first"></div>
<img class="col-xs-4 img-responsive" src="/images/icon.png" />
</div>
</div>
</div>
It looks ok, except all of the no-padding will elimnate the normal Bootstrap gutter (space between columns). Also, the nested columns should be wrapped in another row. From the Bootstrap docs
Content should be placed within columns, and only columns may be
immediate children of rows.
The last img shouldn't have col-xs-4. Place it inside a column instead. In general the grid col-* is for block elements like the DIV html tag. It shouldn't be for other elements that have other styles (h2, p, etc..)
<div class="row">
<div class="col-xs-5 padding-box-product-image margin-image-product">
<div class="pic-box-product">
<img class="img-upload img-responsive" src="//placehold.it/900x500">
</div>
</div>
<div class="col-xs-7 width-content-product">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-7"><h2 class="line-height-product title-product">Ttesta</h2></div>
<div class="col-xs-5"><p class="dots-product-page line-height-product ">● ● ●</p></div>
<div class="col-xs-12"><p class="line-height-product subtitle-product">Xytzadwa </p></div>
<div class="col-xs-12"><p class="line-height-product date-product">My test</p></div>
<div class="col-xs-12 decoration decoration-margins-product-first"></div>
<div class="col-xs-4"><img class="img-responsive" src="//placehold.it/70"></div>
</div>
</div>
</div>
</div>
</div>
http://www.codeply.com/go/hOXVBXdb5B