I have created this card here in which i have some badges but they are not aligned in the right way i need to left align them like this image.. Can anyone help me in aligning these badges just like they are aligned in the second image? I am using bootstrap 3.3.7 and this just a little code snippet and i think this is enough information.
here is the html code.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-sm-6">
<div class="card main-content">
<div class="row clearfix" id="line">
<div class="col-sm-12">
<div class="header">
<h2>
Insights
</h2>
</div>
<div class="modal-body">
<div class="row clearfix">
<div class="col-sm-12" style="display: table;">
<div>
Total Students
<span class="badge badge-primary">
0
</span>
</div>
<br>
<div>
Subjects
<span class="badge badge-primary">
20
</span>
</div>
<br>
<div>
Sections
<span class="badge badge-primary">
289
</span>
</div>
<br>
<div>
Created On
<span class="badge">
27/8/2018
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You can wrap your labels in a <span> tag and give it a min-width. This way, the badges will be horizontally left aligned and vertically on the same line:
.insight-label {
display: inline-block;
min-width: 120px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm-6">
<div class="card main-content">
<div class="row clearfix" id="line">
<div class="col-sm-12">
<div class="header">
<h2>Insights</h2>
</div>
<div class="modal-body">
<div class="row clearfix">
<div class="col-sm-12" style="display: table;">
<div>
<span class="insight-label">Total Students</span>
<span class="badge badge-primary">0</span>
</div>
<br>
<div>
<span class="insight-label">Subjects</span>
<span class="badge badge-primary">20</span>
</div>
<br>
<div>
<span class="insight-label">Sections</span>
<span class="badge badge-primary">289</span>
</div>
<br>
<div>
<span class="insight-label">Created On</span>
<span class="badge">27/8/2018</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Related
I have the following html:
<div class="row">
<div col-md-9>
<div>
<img class="img-valign" src="an image">
<span class="text1" Style="font-size: 8pt">Text number 1</span>
<span class="text1" Style="font-size: 8pt">Text number 2</span>
</div>
</div>
<div col-md-3>
</div>
</div>
</div>
Is it possible this way to make text number two below text number 1 but on the right of the image? In this way the second span is going below the image.
You can easily achieve that using flexbox. Bootstrap also has built-in classes for that.
Your HTML structure needs to be changed slightly:
<div class="container">
<div class="row">
<div class="col-md-9">
<!-- justify-content-between makes img and the text list stay left and right -->
<div class="d-flex flex-row justify-content-between">
<img />
<!-- flex-column makes this text list display its children as column -->
<div class="d-flex flex-column">
<span />
<span />
</div>
</div>
</div>
</div>
</div>
demo: https://jsfiddle.net/davidliang2008/gvs8yp6r/6/
If you want to align the text list and the image to their center as well, just add .align-items-center to the parent flex container:
<div class="container">
<div class="row">
<div class="col-md-9">
<!-- this div is the parent flex container -->
<div class="d-flex flex-row justify-content-between align-items-center">
<img />
<div class="d-flex flex-column">
<span />
<span />
</div>
</div>
</div>
</div>
</div>
demo: https://jsfiddle.net/davidliang2008/gvs8yp6r/8/
#rightText {
margin-left: 50%;
font-size: 8pt;
}
<div class="row">
<div col-md-9>
<div>
<img class="img-valign" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
<div id ="rightText">
<span class="text1" Style="font-size: 8pt">Text number 1</span>
<br>
<span class="text1" Style="font-size: 8pt">Text number 2</span>
</div>
</div>
</div>
<div col-md-3>
</div>
</div>
</div>
I'm struggling with a rather simple task but the lack of CSS experience is getting the better of me:
<div class="row">
<div class="col-lg-3">
<div class="ibox-content m-b-sm border-bottom">
<div class="ibox-title">
<span class="label label-info pull-right">Offline</span>
<h5>Equipment Pass</h5>
</div>
<div class="ibox-content">
<h1 class="no-margins">#Model.AirportPassEquipmentOffline.TransactionCount</h1>
<small># of Transactions</small>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="ibox-content m-b-sm border-bottom">
<div class="ibox-title">
<span class="label label-success pull-right">Online</span>
<h5>Equipment Pass</h5>
</div>
<div class="ibox-content">
<h1 class="no-margins">#Model.AirportPassEquipmentOnline.TransactionCount</h1>
<small># of Transactions</small>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="ibox-content m-b-sm border-bottom">
<div class="ibox-title">
<span class="label label-info pull-right">Offline</span>
<h5>Visitor Pass</h5>
</div>
<div class="ibox-content">
<h1 class="no-margins">#Model.AirportPassVisitorOffline.TransactionCount</h1>
<small># of Transactions</small>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="ibox-content m-b-sm border-bottom">
<div class="ibox-title">
<span class="label label-success pull-right">Online</span>
<h5>Visitor Pass</h5>
</div>
<div class="ibox-content">
<h1 class="no-margins">#Model.AirportPassVisitorOnline.TransactionCount</h1>
<small># of Transactions</small>
</div>
</div>
</div>
</div>
Above is a row on my view. There are many like it:
I want to split the smallest div to show a second Heading1. Here is base HTML:
<div class="ibox-content">
<h1 class="no-margins">#Model.AirportPassEquipmentOffline.TransactionCount</h1>
<small># of Transactions</small>
<h1 class="no-margins">#Model.AirportPassEquipmentOffline.Income</h1>
<small>Income generated</small>
</div>
Target:
I need to show more information and I see that the div card is empty on the right side. I want to split this div into two. Experimenting with bootstrap classes, the layout breaks.
Afer a bit of trial and error, i realized that the small grid class was the issue. I switched to class-md and got the desired result. So this:
<div class="ibox-content">
<h1 class="no-margins">#Model.AirportPassEquipmentOffline.TransactionCount</h1>
<small># of Transactions</small>
<h1 class="no-margins">#Model.AirportPassEquipmentOffline.Income</h1>
<small>Income generated</small>
</div>
Became this:
<div class="ibox-content">
<div class="row">
<div class="col-md-6">
<h1 class="no-margins">#Model.AirportPassEquipmentOnline.TransactionCount.ToString("N0")</h1>
<small># of Transactions</small>
</div>
<div class="col-md-6">
<h1 class="no-margins">AED #Model.AirportPassEquipmentOnline.Income.ToString("N2")</h1>
<small>Revenue generated</small>
</div>
</div>
</div>
I have three different divs that should be displaying one after the other, but they just jump right up to each other on the webpage. Here is the code for all of them:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="top-section">
<center>
<div class="container" style="margin-top:150px;">
<div class="row">
<div class="top-title">
<h1>Introducing 10/40 Academy.</h1>
<h3>An affordable entrepreneurship course that can double as high school credit.</h3>
<img src="/Man_iPhone_Desk.jpg" style="height:300px;margin:30px;border-radius:4px;" class="raised hidden-xs" /><br>
Watch Video <span class="glyphicon glyphicon-play-circle"></span>
<h3 class="hidden-sm hidden-xs" style="letter-spacing:2px;margin-top:0px;">SCROLL DOWN</h3>
<h1 class="hidden-sm hidden-xs" style="font-weight:100;font-size:30px;"><span class="glyphicon glyphicon-chevron-down"></span></h1>
</div>
</div>
</div>
</center>
</div>
<div class="begin-tour">
<div class="container">
<div class="row">
<div class="col-md-6" style="margin-top:50px;">
<h2>Interested in small business?</h2>
<h2>We're here to help.</h2>
<p>
Paragraph
</p>
</div>
<div class="col-md-6">
<center>
<img width="70%" src="/MacImageBase.png" />
</center>
</div>
</div>
</div>
</div>
<div class="qualif">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Header here</h2>
<h2>Header</h2>
<p>
some text
</p>
</div>
<div class="col-md-6"></div>
</div>
</div>
</div>
The best way to explain what happens is through a photo.
I've added the 3 divs into the bootstrap container, took out center(it is not used anymore or supported by HTML5), put each div as a 12 column row(col-md-12 class) so they show up one after the other like you wanted:
<div class="container">
<div class="row">
<div class="top-section col-md-12">
<div class="container" style="margin-top:150px;">
<div class="row">
<div class="top-title">
<h1>Introducing 10/40 Academy.</h1>
<h3>An affordable entrepreneurship course that can double as high school credit.</h3>
<img src="/Man_iPhone_Desk.jpg" style="height:300px;margin:30px;border-radius:4px;" class="raised hidden-xs" /><br>
Watch Video <span class="glyphicon glyphicon-play-circle"></span>
<h3 class="hidden-sm hidden-xs" style="letter-spacing:2px;margin-top:0px;">SCROLL DOWN</h3>
<h1 class="hidden-sm hidden-xs" style="font-weight:100;font-size:30px;"><span class="glyphicon glyphicon-chevron-down"></span></h1>
</div>
</div>
</div>
</div>
<div class="begin-tour col-md-12">
<div class="container">
<div class="row">
<div class="col-md-6" style="margin-top:50px;">
<h2>Interested in small business?</h2>
<h2>We're here to help.</h2>
<p>
Paragraph
</p>
</div>
<div class="col-md-6">
<center>
<img width="70%" src="/MacImageBase.png" />
</center>
</div>
</div>
</div>
</div>
<div class="qualif col-md-12">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Header here</h2>
<h2>Header</h2>
<p>some text</p>
</div>
<div class="col-md-6"></div>
</div>
</div>
</div>
</div>
</div>
Here is the plunker so you can see it.
Please let me know if this helps. I didn't see your image until now so I hope it helps.
I am using a semantic-ui framework. I am trying to make a post-comments like structure. currently my code looks like this:
<!DOCTYPE html>
<html>
<head>
<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>
<title>Assignments</title>
<style>
.items {
width: 70%;
border: solid;
margin: 100px;
}
</style>
</head>
<body>
<div class="ui items">
<div class="item">
<a class="ui tiny image">
<img src="img_avatar3.png">
</a>
<div class="content">
<a class="header">Jenny Hess</a>
<div class="metadata">
<span class="date">Today at 5:42PM</span>
</div>
<div class="description">
<p>First Post Ever In My Life</p>
</div>
</div>
</div>
<div class="ui comments">
<div class="comment">
<a class="avatar">
<img src="img_avatar3.png">
</a>
<div class="content">
<a class="author">Matt</a>
<div class="metadata">
<span class="date">Today at 5:42PM</span>
</div>
<div class="text">
How artistic!
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="img_avatar3.png">
</a>
<div class="content">
<a class="author">Elliot Fu</a>
<div class="metadata">
<span class="date">Yesterday at 12:30AM</span>
</div>
<div class="text">
<p>This has been very useful for my research. Thanks as well!</p>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="img_avatar3.png">
</a>
<div class="content">
<a class="author">Joe Henderson</a>
<div class="metadata">
<span class="date">5 days ago</span>
</div>
<div class="text">
Dude, this is awesome. Thanks so much
</div>
</div>
</div>
<form class="ui reply form">
<div class="field">
<textarea rows="3" cols="50"></textarea>
</div>
<div class="ui blue labeled submit icon button">
<i class="icon edit"></i> Add Reply
</div>
</form>
</div>
</div>
<div class="ui items">
<div class="item">
<a class="ui tiny image">
<img src="img_avatar3.png">
</a>
<div class="content">
<a class="header">Jenny Hess</a>
<div class="metadata">
<span class="date">Today at 5:42PM</span>
</div>
<div class="description">
<p>First Post Ever In My Life</p>
</div>
</div>
</div>
<div class="ui comments">
<div class="comment">
<a class="avatar">
<img src="img_avatar3.png">
</a>
<div class="content">
<a class="author">Matt</a>
<div class="metadata">
<span class="date">Today at 5:42PM</span>
</div>
<div class="text">
How artistic!
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="img_avatar3.png">
</a>
<div class="content">
<a class="author">Elliot Fu</a>
<div class="metadata">
<span class="date">Yesterday at 12:30AM</span>
</div>
<div class="text">
<p>This has been very useful for my research. Thanks as well!</p>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="img_avatar3.png">
</a>
<div class="content">
<a class="author">Joe Henderson</a>
<div class="metadata">
<span class="date">5 days ago</span>
</div>
<div class="text">
Dude, this is awesome. Thanks so much
</div>
</div>
</div>
<form class="ui reply form">
<div class="field">
<textarea rows="3" cols="50"></textarea>
</div>
<div class="ui blue labeled submit icon button">
<i class="icon edit"></i> Add Reply
</div>
</form>
</div>
</div>
</body>
</html>
As you can see I have made items width 70% and margin auto but it doesn't center. Can someone suggest me why?
Give a specific id to parent of such item and give
text-align: center;
styling to it
Let me know if you require further help
I would like to put each semantic ui item into a segment. Whats the right way to do this in semantic ui / html? Should I put item inside segment, segment inside item, or neither?
Items
Items code:
<div class="ui divided items">
<div class="item">
<div class="image">
<img src="/images/wireframe/image.png">
</div>
<div class="content">
<a class="header">12 Years a Slave</a>
<div class="meta">
<span class="cinema">Union Square 14</span>
</div>
<div class="description">
<p></p>
</div>
<div class="extra">
<div class="ui label">IMAX</div>
<div class="ui label"><i class="globe icon"></i> Additional Languages</div>
</div>
</div>
</div>
<div class="item">
<div class="image">
<img src="/images/wireframe/image.png">
</div>
<div class="content">
<a class="header">My Neighbor Totoro</a>
<div class="meta">
<span class="cinema">IFC Cinema</span>
</div>
<div class="description">
<p></p>
</div>
<div class="extra">
<div class="ui right floated primary button">
Buy tickets
<i class="right chevron icon"></i>
</div>
<div class="ui label">Limited</div>
</div>
</div>
</div>
<div class="item">
<div class="image">
<img src="/images/wireframe/image.png">
</div>
<div class="content">
<a class="header">Watchmen</a>
<div class="meta">
<span class="cinema">IFC</span>
</div>
<div class="description">
<p></p>
</div>
<div class="extra">
<div class="ui right floated primary button">
Buy tickets
<i class="right chevron icon"></i>
</div>
</div>
</div>
</div>
</div>
Segment:
Segment code:
<div class="ui segment">
</div>
Semantic UI Items and Segments are not designed to work together (i just ran into this same issue) so my workaround was to add the requisite css to my stylesheet applied to a .ui.segment.item element (you could also place this into the scss templates and use scss variables for colors, spacing, etc. instead to compile this into a custom build of semantic-ui for your site).
So then you can apply both .item and .segment styles to those blocks that you want to have both styles (for any variations like piled or compact, you would have to include those variations as custom styles too of course).
I did it this way because the styles for a segment are fairly self contained, but the ones for an item are quite extensive, so they would be harder to reproduce accurately.
The built in code runner doesn't seem to display correctly, so here is a fiddle with the same code working correctly: https://jsfiddle.net/nw8nte4b/
```
.ui.segment.item {
position: relative;
background: #fff;
box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
margin: 1rem 0;
padding: 1em;
border-radius: 0.25rem;
border: 1px solid rgba(34, 36, 38, 0.15);
}
<link href="https://oss.maxcdn.com/semantic-ui/2.2.4/semantic.min.css" rel="stylesheet" />
<div class="ui centered padded grid">
<div class="ten wide column">
<div class="ui items">
<div class="ui item segment">
<div class="image">
<img src="http://semantic-ui.com/images/wireframe/image.png">
</div>
<div class="content">
<a class="header">12 Years a Slave</a>
<div class="meta">
<span class="cinema">Union Square 14</span>
</div>
<div class="description">
<p></p>
</div>
<div class="extra">
<div class="ui label">IMAX</div>
<div class="ui label"><i class="globe icon"></i> Additional Languages</div>
</div>
</div>
</div>
<div class="ui item segment">
<div class="image">
<img src="http://semantic-ui.com/images/wireframe/image.png">
</div>
<div class="content">
<a class="header">My Neighbor Totoro</a>
<div class="meta">
<span class="cinema">IFC Cinema</span>
</div>
<div class="description">
<p></p>
</div>
<div class="extra">
<div class="ui right floated primary button">
Buy tickets
<i class="right chevron icon"></i>
</div>
<div class="ui label">Limited</div>
</div>
</div>
</div>
<div class="ui item segment">
<div class="image">
<img src="http://semantic-ui.com/images/wireframe/image.png">
</div>
<div class="content">
<a class="header">Watchmen</a>
<div class="meta">
<span class="cinema">IFC</span>
</div>
<div class="description">
<p></p>
</div>
<div class="extra">
<div class="ui right floated primary button">
Buy tickets
<i class="right chevron icon"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
```