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>
Related
I have the following structure
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-12">
box 1
</div>
</div>
<div class="row">
<div class="col-md-12">
box 2
</div>
</div>
</div>
<div class="col-md-4">
box 3
</div>
</div>
</div>
Is there a possibility with bootstrap to easily show the following order on small screens?
|box1|
|box3|
|box2|
I could not figure out how to swap rows in this manner. Thank you
Instead of putting the box column in other row. you can have all the box column in same row. You can achieve the column order in bootstrap using col-sm-push-* or col-sm-pull-* utility.
Check demo here
HTML:
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="content">
<h1>Column 1</h1>
</div>
</div>
<div class="col-sm-4 col-sm-push-4">
<div class="content">
<h1>Column 3</h1>
</div>
</div>
<div class="col-sm-4 col-sm-pull-4">
<div class="content">
<h1>Column 2</h1>
</div>
</div>
</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 know how to do standard columns and such in Bootstrap. However, I have something I haven't encountered yet and I can't seem to Google the answer. Maybe I don't know what to call it, hence why I can't find it.
I have essentially a bunch of boxes, with one large box on the right, and more of the smaller boxes under it. I think I am confused because normally I would have a row, with 4 columns 3 wide, but the larger column needs to take up multiple rows..
Here is a quick example I made in paint:
The smaller boxes are kind of like thumbnails for a portfolio, they are all the same size. The larger box is a Twitter news feed, which is a div Twitter provides to place a newsfeed on your site.
I am not sure if I should create two sections (top half and bottom half) or how to approach this. I thought about making the top section 2 columns, then in the 1st have it split into two more (6 and 6). Then do a separate section below it as normal.
However, you can easily add an image into a paragraph and have the text wrap around the image. I am wanting the same thing, only with the Twitter newsfeed and columns..
I can add code once I get an approach if I am still stuck.
I tried to put another set of rows and cols inside my 1st column, but it broke the spacing between the columns which would mean adding CSS to fix the spacing.
Hoping someone has done something like this, or can see by my image, how to approach this.
Can you show your HTML/CSS to see where and why the code broke ? As you approach is correct, I would have done the same. see below
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
</div>
<div class="col-xs-6"></div>
</div>
</div>
<div class="row">
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
</div>
<div class="row">
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
</div>
Try something like this:
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
row1-col1
<div class="row">
<div class="col-sm-6">
Sub-row1-Sub-col1
</div>
<div class="col-sm-6">
Sub-row1-Sub-col2
</div>
</div>
<div class="row">
<div class="col-sm-6">
Sub-row2-Sub-col1
</div>
<div class="col-sm-6">
Sub-row2-Sub-col2
</div>
</div>
<div class="row">
<div class="col-sm-6">
Sub-row3-Sub-col1
</div>
<div class="col-sm-6">
Sub-row3-Sub-col2
</div>
</div>
</div>
<div class="col-sm-6">
row1-col2
</div>
</div>
<div class="row">
<div class="col-sm-3">
row2-col1
</div>
<div class="col-sm-3">
row2-col2
</div>
<div class="col-sm-3">
row2-col3
</div>
<div class="col-sm-3">
row2-col4
</div>
</div>
<div class="row">
<div class="col-sm-3">
row3-col1
</div>
<div class="col-sm-3">
row3-col2
</div>
<div class="col-sm-3">
row3-col3
</div>
<div class="col-sm-3">
row3-col4
</div>
</div>
</div>
You have just to annidate more rows inside an existing column.
Eg:
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-lg-3">1</div>
<div class="col-lg-3">2</div>
</div>
<div class="row">
<div class="col-lg-3">3</div>
<div class="col-lg-3">4</div>
</div>
<div class="row">
<div class="col-lg-3">5</div>
<div class="col-lg-3">6</div>
</div>
</div>
<div class="col-lg-6">Big content</div>
</div>
</div>
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/
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