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>
Related
I am trying to learn Bulma and I want to show a simple page with this layout:
<header>
<hero>
<section>
<footer>
I don't understand why they overlap with each other instead of being clearly one below the other.
There is a dummy container that is obviously misplaced and hidden by the header.
The overlapping is also obvious by the search bar that is both over part of the footer and the hero.
https://codepen.io/anon/pen/bLgOWb
<nav class="navbar is-primary is-fixed-top has-text-white">
<div class="container">
<div class="navbar-brand">
<img id="logo" alt="DUB Logo" src="http://code.dlang.org/images/dub-header.png"/>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<div id="navItem" class="navbar-item">Primo</div>
</div>
</div>
</div>
</nav>
<section class="section">
<div class="container dummy">
</div>
</section>
<div class="hero ">
<div class="container has-text-centered is-size-1">
<h1 class="title"> Explore and use libraries and software</h1>
</div>
</div>
<div id="search" class="container">
<div class="columns searchBlock ">
<div class="column is-paddingless">
<form>
<input class="input searchInput" type="text" placeholder="Search">
</form>
</div>
<div class='column is-3 is-paddingless'>
</div>
<div class='column is-2 is-paddingless'>
<a class='button is-primary searchButton'>Search</a>
</div>
</div>
</div>
<footer class="footer">
<div class="container is-text-centered">
<p> Footer </p>
</div>
</footer>
<script src="old.js"></script>
.hero-body is missing
<div class="hero">
<div class="hero-body">
<div class="container has-text-centered">
<h1 class="title"> Explore and use libraries and software </h1>
</div>
</div>
</div>
Bulma - Hero
I think problem with column . change column margin follow this
.columns {
marign:0;
}
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>
I am new to bootstrap.I want to place an image tag and two elements inside a div so that image tag and elements should be in side by side.
code:
<div class="container">
<div class="row">
<div class="col-xs-2">
<img class="img-responsive" src="../Content/Images/App/image1.png" style="height:50px; float:left" />
<p>Employee ID</p>
<p>EmployeeName</p>
</div>
<div class="col-xs-2"></div>
<div class="col-xs-2"></div>
<div class="col-xs-2"></div>
<div class="col-xs-2"></div>
<div class="col-xs-2"></div>
</div>
</div>
Expected Output:
I want Image and employee details parallely.(Employee id and Employee Name one below the other)
can anyone help?
Thanks in advance!
Hope this helps:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css');
<div class="row">
<div class="col-xs-4">
<img class="img-responsive" src="../Content/Images/App/image1.png" style="height:50px;"/>
</div>
<div class="col-xs-4">
<p>Employee ID</p>
</div>
<div class="col-xs-4">
<p>EmployeeName</p>
</div>
</div>
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
I would like to make a small, two-column menu with bootstrap. The idea is to have a div that is 200px by 300px high. The structure would, I think, look like this:
<div id="menu">
<div class="container">
<div class="row-fluid">
<div class="span2">
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span2">
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.menu{
width:200px;
height: 300px;
background-color:green;
}
.filterEl{
position: relative;
height:40px;
border: solid black 2px;
}
The issue is that everything gets mashed to the upper left corner of the menu div. How can I get everything evenly spaced in the meny div as if I were using Bootstrap on a full page?
From your example, I think you want the span2 div to actually be your row-fluid as well:
<div id="menu">
<div class="container">
<div class="row-fluid span2">
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
</div>
<div class="row-fluid span2">
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
</div>
</div>
</div>
See this jsfiddle for a demo.
Parent of every column should be a row.
So, try below structure.
<div id="menu">
<div class="container">
<div class="row-fluid">
<div class="span2">
<div class="row-fluid">
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span2">
<div class="row-fluid">
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
<div class="span1">
<div class="filterEl">
some text
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Reference