I am trying to simply center text in ionic list-inset. I tried adding row-center as some answers suggest. I also tried writing custom CSS like the one mentioned here. None of them have worked for me so far.
My code is below. Where should I go from here?
<ion-content ng-controller="DashboardCtrl">
<div class="card">
<div class="list list-inset">
<div class="item item-divider">
<div class="row row-center">
<div class="col col-25">Ticker</div>
<div class="col col-25">Price</div>
<div class="col col-25">Shares</div>
<div class="col col-25">Value</div>
</div>
</div>
<label class="item" ng-repeat="item in sData">
<div class="row row-center">
<div class="col col-25">{{item.ticker}}</div>
<div class="col col-25">{{item.price}}</div>
<div class="col col-25">{{item.shares}}</div>
<div class="col col-25">{{item.value}}</div>
</div>
</label>
</div>
</div>
</ion-content>
Instead of row-center try text-center
Related
This might be a bit of a silly question - but I could not find an answer to what I'm trying to do..
I'm trying to make the entire container div responsive (like a column inside a row).
e.g. I want to have the effect that this would produce:
<div className="container">
<div className="row justify-content-center">
<div className="col-lg-6 cold-sm-10">
...
</div>
</div>
</div>
but in one line... something like:
<div className="container-lg-6 container-sm-10">
...
</div>
Is there something in Bootstrap that could achieve this?
I tried the classes container-sm but they are not working like what I want.
That is not how the containers work. But you can easily achieve the layout by just nesting everything inside of a .col-12.col-sm-10.col-lg-6 inside a .row inside a .container-fluid
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<div class="container-fluid p-0">
<div class="row justify-content-center">
<div class="col-12 col-sm-10 col-lg-6">
<div class="row">
<div class="col bg-primary">
<h1>1</h1>
</div>
<div class="col bg-secondary">
<h1>2</h1>
</div>
<div class="col bg-info">
<h1>3</h1>
</div>
</div>
<div class="row">
<div class="col bg-info">
<h1>4</h1>
</div>
<div class="col bg-primary">
<h1>5</h1>
</div>
</div>
</div>
</div>
</div>
I would like to know if there's a better solution to solve the space problem between the two first columns in this code: https://jsfiddle.net/5vtc1Lhp/#&togetherjs=qkIyJnDkmf
I did try to place div inside div, but the width of the div decreased in the first example ( at the top). At the botton it works fine, but I had to define a padding value in px which I don't like since it's a fixed value and I don't know if this spacement should change automatically.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-8">
<div class="col-md-12">
<div class="col-md-4">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-8">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-4">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
</div>
</div>
</div>
<hr>
Bellow is OK.
<hr>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-8">
<div class="col-md-4 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
<div class="col-md-8" style="padding: 0 0px 0 30px;">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-4">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
</div>
</div>
</div>
Thank you!
Container gives gutter of 30px(15px on left and right)
If you remove the container and give it a row.It will give -15px padding on both sides. And that's what you are looking for, right?
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-4">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-8">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
<div class="col-md-4">
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
<div class="col-md-12 well text-center">
...<br>...<br>...<br>...<br>...<br>...<br>...
</div>
</div>
</div>
I am new to ionic framework
I need to get this view done
I have tried this thing
<div class="row">
<div class="col col-80">
<div class="row">
<img src="{{jobDetails.category.name}}.png" class="col col-10" width="30">
<span class="heading col col-10" ng-bind="jobDetails.category.name"></span>
(<span ng-bind="jobDetails.subcategory.subCategoryName" class="heading"></span>)
</div>
</div>
</div>
But i am unable to get the correct view there
Any help would be appreciated
I hope to help you with my answer below:
<div>
<div class="row">
<div class="col col-10">
<img src="" alt="not available">
</div>
<div class="col col-90">
<span>
Text goes here
</span>
</div>
</div>
<p>If the text extends in the first row ..</p>
</div>
I am having cards which show horizontally. Please see the image to get an idea. When I have a big header, in sm screens the cards inside the columns wrap unevenly.
<div class="col-sm-4" data-ng-repeat="card in cards">
<div class="card">
<div class="cardHeader">Big Header issue</div>
.....
</div>
</div>
How to solve this issue?
Option 1
You could use CSS ellipsis like this to append '..' to the heading when it's too long:
.cardHeader {
text-overflow:ellipsis;
white-space:nowrap;
overflow: hidden;
}
Demo: http://www.bootply.com/115420 (uses panel-heading instead)
Option 2
Another option is to use a clearfix div after every 3 'col-sm-4' div..
Demo: http://www.bootply.com/115421
Related
Bootstrap row with columns of different height
do you use the row class? something like this:
<div class ='row'>
<div class="col-sm-4">
<div class="card">
<div class="cardHeader">Big Header issue</div>
.....
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="cardHeader">Big Header issue</div>
.....
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="cardHeader">Big Header issue</div>
.....
</div>
</div>
</div>
Another option, which is slightly more HTML heavy but keeps the boxes/cards responsive:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-4">
<div class="card biggercard">
<div class="cardHeader">Biggest Header</div>
1
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="cardHeader">Second Header</div>
2
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="cardHeader">Third</div>
3
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="cardHeader">Fourth</div>
4
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="cardHeader">5th</div>
5
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="cardHeader">6th</div>
6
</div>
</div>
</div>
</div>
</div>
</div>
Demo FIddle: http://jsfiddle.net/La3H2/
I'm trying to achieve the following in Bootstrap 3 using as little of my own markup and CSS as possible. Ideally I'd like to achieve this using pure Bootstrap Markup without resorting to hacks. I've looked at the documentation but can't see a standardized way....
As you can see below, I'm trying to get two rows with a gap in the center.
My Markup as follows
<section class="row">
<article class="col-sm-12 col-md-6">
<!--ROW LEFT-->
<div class="row">
<div class="col-sm-4">col</div>
<div class="col-sm-4">col</div>
<div class="col-sm-4">col</div>
</div>
</article>
<article class="col-sm-12 col-md-6">
<!--ROW RIGHT-->
<div class="row">
<div class="col-sm-4">col</div>
<div class="col-sm-4">col</div>
<div class="col-sm-4">col</div>
</div>
</article>
</section>
The only similar example Bootstrap has in the Docs is below, but you don't get a gap in the center.
BOOTSTRAPS MARKUP
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-6">
content
</div>
<div class="col-sm-6">
content
</div>
</div>
</div>
</div>
To expand on Skelly's answer, you can use Bootstrap's column offset classes to create gaps between columns:
<div class="container"><section class="row">
<article class="col-sm-12 col-md-5">
<!--ROW LEFT-->
<div class="row" style="background-color:blue;">
<div class="col-sm-4" style="background-color:orange;">col</div>
<div class="col-sm-4" style="background-color:silver;">col</div>
<div class="col-sm-4" style="background-color:orange;">col</div>
</div>
</article>
<article class="col-sm-12 col-md-5 col-md-offset-2">
<!--ROW RIGHT-->
<div class="row" style="background-color:blue;">
<div class="col-sm-4" style="background-color:silver;">col</div>
<div class="col-sm-4" style="background-color:orange;">col</div>
<div class="col-sm-4" style="background-color:silver;">col</div>
</div>
</article>
</section></div>
http://bootply.com/103191
This prevents having to add extra styles but does create a larger gap as you're using two virtual columns to create the space.
If you don't mind the extra space on the right, you could make the offset 1 instead.
How big do you want the gap?
Using BS cols you could do something like this..
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-5">
content
</div>
<div class="col-sm-1"></div> <div class="col-sm-1"></div>
<div class="col-sm-5">
content
</div>
</div>
</div>
</div>
Demo: http://bootply.com/87117
(or) try to construct with padding:
<section class="row" style="background-color:red;">
<article class="col-sm-12 col-md-6" style="padding-right:30px;">
<!--ROW LEFT-->
<div class="row" style="background-color:blue;">
<div class="col-sm-4" style="background-color:orange;">col</div>
<div class="col-sm-4" style="background-color:silver;">col</div>
<div class="col-sm-4" style="background-color:orange;">col</div>
</div>
</article>
<article class="col-sm-12 col-md-6" style="padding-left:30px;">
<!--ROW RIGHT-->
<div class="row" style="background-color:blue;">
<div class="col-sm-4" style="background-color:silver;">col</div>
<div class="col-sm-4" style="background-color:orange;">col</div>
<div class="col-sm-4" style="background-color:silver;">col</div>
</div>
</article>
</section>
Your gap in red, see: http://bootply.com/87152