Tried to use this but it is aligning the content too.
<div class="center aligned ui grid">
<div class="ten wide column">
<h2 class="ui header">
Your Blog
<div class="sub header">A blog application implemented with Semantin-UI/SpringBoot/MongoDB/.</div>
</h2>
<div class="ui divided list" th:each="post : ${posts}">
<div class="item">
<div class="content">
<a class="header" th:text="${post.title}">Title</a>
<div id="blogId" th:text="${post.id}" style="display: none">Id</div>
<div class="description" th:text="${post.content}">Content</div>
<div class="ui divider"></div>
</div>
</div>
</div>
NewPost
</div>
</div>
Just add left aligned to your inner column <div>:
<div class="center aligned ui grid">
<div class="ten wide left aligned column">
...
</div>
</div>
Source: http://semantic-ui.com/collections/grid.html#specifying-alignment
Related
I am learning Semantic UI Grid these days. It's pretty cool to use, but I am having some issues with the grids. Below I created two different grids, but I don't understand why there is no spacing between the two grids and I can't figure out how to add the spacing between them (without me adding some new css). Is there a class to add to the grids to have the spacing that I want?
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<div class="ui container">
<div class="ui equal width padded grid">
<div class="ui row">
<div class="ui black column"></div>
<div class="ui red column"></div>
</div>
</div>
<div class="ui padded grid">
<div class="ui blue row">
<div class="ui column">Single Row</div>
</div>
<div class="ui yellow equal width row">
<div class="ui green column">1</div>
<div class="ui column">2</div>
<div class="ui red column">3</div>
</div>
<div class="ui three column row">
<div class="ui pink left floated column">LEFT</div>
<div class="ui pink right floated column">RIGHT</div>
</div>
</div>
</div>
I think there is a trouble using color with 'padded' grid. I couldn't found any SUI option, but maybe nested grid is a temporary solution.
http://semantic-ui.com/collections/grid.html#/overview
Colored Grids can use named colors variations to add background colors, but only with padded grid that do not include negative margins.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<div class="ui container">
<div class="ui equal width padded grid">
<div class="ui row">
<div class="ui black column"></div>
<div class="ui red column"></div>
</div>
</div>
<div class="ui grid">
<div class="ui row">
<div class="ui column">
<div class="ui padded grid">
<div class="ui blue row">
<div class="ui column">Single Row</div>
</div>
</div>
</div>
</div>
<div class="ui equal width row">
<div class="ui column">
<div class="ui padded grid">
<div class="ui green row">
<div class="ui column">1</div>
</div>
</div>
</div>
<div class="ui column">
<div class="ui padded grid">
<div class="ui yellow row">
<div class="ui column">2</div>
</div>
</div>
</div>
<div class="ui column">
<div class="ui padded grid">
<div class="ui red row">
<div class="ui column">3</div>
</div>
</div>
</div>
</div>
<div class="ui three column row">
<div class="ui left floated column">
<div class="ui padded grid">
<div class="ui pink row">
<div class="ui column">LEFT</div>
</div>
</div>
</div>
<div class="ui right floated column">
<div class="ui padded grid">
<div class="ui pink row">
<div class="ui column">LEFT</div>
</div>
</div>
</div>
</div>
</div>
</div>
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>
Is there a way to get columns in one row to be the same size? I want my ten wide column to be the same height as the six wide column. Code below.
<div class="ui grid">
<div class="row">
<div class="ten wide column">
<div class="ui segment purple inverted">
Text
<img class="ui fluid image" src="{{ asset('/img/pic1.jpg') }}">
</div>
</div>
<div class="six wide column">
<div class="ui segment purple inverted">
Text
<div class="row">
<img class="ui centered image" src="{{ asset('/img/pic2.jpg') }}">
</div>
<div class="row">
<img class="ui centered image" src="{{ asset('/img/pic3.jpg') }}">
</div>
</div>
</div>
</div>
</div>
Semantic 2.0 onwards this is stretched.
<div class="ui three column stretched grid">
<div class='column'>
A
</div>
<div class='column'>
B
</div>
<div class='column'>
C
</div>
</div>
Like with Equal Width Columns you can use the equal height grid to achieve this:
<div class="ui equal height grid">
<div class="row">
<div class="ten wide purple column">Text</div>
<div class="six wide red column">
<div class="row">Text</div>
<div class="row">Text</div>
<div class="row">Text</div>
<div class="row">Text</div>
</div>
</div>
</div>
http://jsfiddle.net/pq1oka3n/1/
I am using Semantic UI, and when trying to separate a <div>, I can get the elements fit in (like the screenshot below):
Here is the code:
<div class="ui four column grid">
<div class="column">
<div class="ui segment">
<div class="ui top left attached label">Saturday</div>
<div class="ui two column grid">
<div class="column">
<div class="two column"><i class="sunn"></i><i class="cloud"></i></div>
</div>
<div class="column">
<div class="ui statistic">
<div class="label">Sun raises</div>
<div class="value">06:46</div>
</div>
</div>
</div>
</div>
</div>
here is a fork:
http://jsfiddle.net/0djhjpym/
I am really struggling with getting 3 columns inside a page layout.
I am only using the semantic CSS, no CSS of my own for now. I am just trying to wrap my head around the grid stuff.
This is my complete body content:
<div class="ui page grid">
<header class="sixteen wide column">
<div class="ui segment">Header text.</div>
</header>
<div class="ui divided grid">
<div class="eight wide column">
<div class="ui segment">Left text</div>
</div>
<div class="eight wide column">
<div class="ui segment">Right text</div>
</div>
</div>
<div class="ui three column grid">
<div class="column">
<div class="ui segment">1</div>
</div>
<div class="column">
<div class="ui segment">2</div>
</div>
<div class="column">
<div class="ui segment">3</div>
</div>
</div>
<footer class="sixteen wide column">
<div class="ui segment">Footer text.</div>
</footer>
</div>
I understand how to get a full width column — that's verbose but it works.
I also am able to get 2 half-width columns using .sixteen.wide.column elements.
But since 16 is not dividable by 3, I am trying to use this to obtain 3 columns:
<div class="ui three column grid">
<div class="column">
<div class="ui segment">1</div>
</div>
<div class="column">
<div class="ui segment">2</div>
</div>
<div class="column">
<div class="ui segment">3</div>
</div>
</div>
That code above is lifted from this documentation page: http://semantic-ui.com/collections/grid.html
I get this, alas:
It seems that the width issue comes from this CSS:
.ui.grid > .column, .ui.grid > .row > .column {
width: 6.25%;
}
No I need an additional class anywhere, or some additional markup?
Thank you so much!
Here you go:
<div class="ui three column grid">
<div class="column">
Content
</div>
<div class="column">
Content
</div>
<div class="column">
Content
</div>
</div>
I had a similar problem!
Its done this way:
<div class="ui divided grid stackable">
<div class="three column row">
<div class="column wide">
<p> Your stuff here </p>
</div>
<div class="column wide">
<p> Your stuff here </p>
</div>
<div class="column wide">
<p> Your stuff here </p>
</div>
</div>
</div>