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
Related
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>
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.
In an web application, i am displaying posts from other users in an individual user's homepage. Each post will contain the thumbnail profile picture of the person the post is from, their name on a paragraph, text contents and then a reply box and button. I am trying to do this by bootstrap's grid system but not achieving the desired effect. I want to mimic the tweets in twitter home page, but in my case there is a big gap in between the profile picture and the other column.
<div class="container" >
<ul id="newsfeed">
<li>
<div class="row">
<div class="col-sm-2">
<img src="someimage.png" class="img-thumbnail" alt="Some Image" width="60" height="60">
</div>
<div class="col-sm-4">
<p>9gag#9gag</p>
<p>This is me</p>
<p>twitted at 12:30pm GMT6+</p>
</div>
</div>
</li>
</ul>
</div>
Your .col-sm-2 is wider than your thumbnail image you can do two things.
1) You can can use .col-sm-1 for the image container.
<div class="container" >
<ul id="newsfeed">
<li>
<div class="row">
<div class="col-sm-1 narrow">
<img src="someimage.png" class="img-thumbnail" alt="Some Image" width="60" height="60">
</div>
<div class="col-sm-4 narrow">
<p>9gag#9gag</p>
<p>This is me</p>
<p>twitted at 12:30pm GMT6+</p>
</div>
</div>
</li>
</ul>
</div>
2) You can leave it as is but add bootstraps helper class pull-right to your img tag.
<div class="container" >
<ul id="newsfeed">
<li>
<div class="row">
<div class="col-sm-2">
<img src="someimage.png" class="img-thumbnail pull-right" alt="Some Image" width="60" height="60">
</div>
<div class="col-sm-4 narrow">
<p>9gag#9gag</p>
<p>This is me</p>
<p>twitted at 12:30pm GMT6+</p>
</div>
</div>
</li>
</ul>
</div>
CODEPEN DEMO
You could use the Media Object component for this (and possibly without any additional CSS as far as structure is concerned).
See working example Snippet.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="jumbotron">
<div class="container">
<h1>Posts</h1>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-offset-3 col-sm-6">
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="http://placehold.it/75x75/000/fff" alt="...">
</a>
</div>
<div class="media-body">
<p>tweet#tweet</p>
<p>Some Tweet</p>
<p>twetted at 12:30pm GMT6+</p>
</div>
<form>
<div class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="Reply..."> <span class="input-group-btn">
<button class="btn btn-default" type="button">Reply</button>
</span>
</div>
</form>
</div>
<div class="media">
<div class="media-body">
<p>tweet#tweet</p>
<p>Some Tweet</p>
<p>twetted at 12:30pm GMT6+</p>
</div>
<div class="media-right">
<a href="#">
<img class="media-object" src="http://placehold.it/75x75/f00/fff" alt="...">
</a>
</div>
<form>
<div class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="Reply..."> <span class="input-group-btn">
<button class="btn btn-default" type="button">Reply</button>
</span>
</div>
</form>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="http://placehold.it/75x75/ff0/fff" alt="...">
</a>
</div>
<div class="media-body">
<p>tweet#tweet</p>
<p>Some Tweet</p>
<p>twetted at 12:30pm GMT6+</p>
</div>
<form>
<div class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="Reply..."> <span class="input-group-btn">
<button class="btn btn-default" type="button">Reply</button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
I have this code for making a cards stackable box. The problem is that this box is showing me a right paddding in the fragment, can anyone help me?
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="./semantic/semantic.css"/>
<title>Agora</title>
</head>
<body>
<div class="ui teal inverted menu" style="border-radius: 0px;">
<div class="item">
<div class="huge ui buttons">
<div class="ui button">One</div>
<div class="ui button">Two</div>
<div class="ui button">Three</div>
</div>
</div>
<div class="item">
<div class="ui button">Log-in</div>
</div>
</div>
<div class="ui column centered grid">
<div class="fourteen wide column">
<div class="ui center aligned segment">
<div class="ui stackable four column centered grid" >
<div class="column">
<div class="ui card">
<div class="image">
<img src="http://semantic-ui.com/images/avatar/large/elliot.jpg">
</div>
<div class="content">
<a class="header">Stevie Feliciano</a>
<div class="meta">
<span class="date">Joined in 2014</span>
</div>
<div class="description">
Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing.
</div>
</div>
<div class="extra content">
<a>
<i class="user icon"></i>
22 Friends
</a>
</div>
</div>
</div>
<div class="column">
<div class="ui card">
<div class="image">
<img src="http://semantic-ui.com/images/avatar/large/elliot.jpg">
</div>
<div class="content">
<a class="header">Stevie Feliciano</a>
<div class="meta">
<span class="date">Joined in 2014</span>
</div>
<div class="description">
Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing.
</div>
</div>
<div class="extra content">
<a>
<i class="user icon"></i>
22 Friends
</a>
</div>
</div>
</div>
<div class="column">
<div class="ui card">
<div class="image">
<img src="http://semantic-ui.com/images/avatar/large/elliot.jpg">
</div>
<div class="content">
<a class="header">Stevie Feliciano</a>
<div class="meta">
<span class="date">Joined in 2014</span>
</div>
<div class="description">
Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing.
</div>
</div>
<div class="extra content">
<a>
<i class="user icon"></i>
22 Friends
</a>
</div>
</div>
</div>
<div class="column">
<div class="ui card">
<div class="image">
<img src="http://semantic-ui.com/images/avatar/large/elliot.jpg">
</div>
<div class="content">
<a class="header">Stevie Feliciano</a>
<div class="meta">
<span class="date">Joined in 2014</span>
</div>
<div class="description">
Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing.
</div>
</div>
<div class="extra content">
<a>
<i class="user icon"></i>
22 Friends
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
This is the problem image:
http://imgur.com/1lrpbUL.png
I need to remove the padding that's in the right side.
Here is the working example:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.css">
<title>Agora</title>
<style type="text/css">
.ui.card {
margin: auto;
}
</style>
</head>
<body>
<div class="ui teal inverted menu" style="border-radius: 0px;">
<div class="item">
<div class="huge ui buttons">
<div class="ui button">One</div>
<div class="ui button">Two</div>
<div class="ui button">Three</div>
</div>
</div>
<div class="item">
<div class="ui button">Log-in</div>
</div>
</div>
<div class="ui column centered grid">
<div class="fourteen wide column">
<div class="ui center aligned segment">
<div class="ui stackable four column centered grid" >
<div class="column">
<div class="ui card">
<div class="image">
<img src="http://semantic-ui.com/images/avatar/large/elliot.jpg">
</div>
<div class="content">
<a class="header">Stevie Feliciano</a>
<div class="meta">
<span class="date">Joined in 2014</span>
</div>
<div class="description">
Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing.
</div>
</div>
<div class="extra content">
<a>
<i class="user icon"></i>
22 Friends
</a>
</div>
</div>
</div>
<div class="column">
<div class="ui card">
<div class="image">
<img src="http://semantic-ui.com/images/avatar/large/elliot.jpg">
</div>
<div class="content">
<a class="header">Stevie Feliciano</a>
<div class="meta">
<span class="date">Joined in 2014</span>
</div>
<div class="description">
Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing.
</div>
</div>
<div class="extra content">
<a>
<i class="user icon"></i>
22 Friends
</a>
</div>
</div>
</div>
<div class="column">
<div class="ui card">
<div class="image">
<img src="http://semantic-ui.com/images/avatar/large/elliot.jpg">
</div>
<div class="content">
<a class="header">Stevie Feliciano</a>
<div class="meta">
<span class="date">Joined in 2014</span>
</div>
<div class="description">
Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing.
</div>
</div>
<div class="extra content">
<a>
<i class="user icon"></i>
22 Friends
</a>
</div>
</div>
</div>
<div class="column">
<div class="ui card">
<div class="image">
<img src="http://semantic-ui.com/images/avatar/large/elliot.jpg">
</div>
<div class="content">
<a class="header">Stevie Feliciano</a>
<div class="meta">
<span class="date">Joined in 2014</span>
</div>
<div class="description">
Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing.
</div>
</div>
<div class="extra content">
<a>
<i class="user icon"></i>
22 Friends
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
It might be a problem that each of these cards do not fill the width of their column so they are aligned to the left.
You could use the class ".cards" which is mentioned here (it uses flexbox to fit the cards perfectly).
The code found in documentation:
<div class="ui cards">
<div class="card">
<a class="image">
<img src="/images/avatar/large/elliot.jpg">
</a>
<div class="content">
<a class="header">Elliot Fu</a>
<div class="meta">
<a>Friends</a>
</div>
<div class="description">
Elliot Fu is a film-maker from New York.
</div>
</div>
</div>
<div class="card">
<a class="image">
<img src="/images/avatar/large/helen.jpg">
</a>
<div class="content">
<a class="header">Helen Troy</a>
<div class="meta">
<a>Friends</a>
</div>
<div class="description">
Helen Troy is an archivist living in New York, who enjoys cooking, fine art, and gardening.
</div>
</div>
</div>
</div>
My thumbnails from bootstrap have different heights to them, and I think that issue might be causing them to not stack properly (see screenshots and fiddle). I think I need to include a min-height for them, but I'm just not able to get it working .. can anyone lend a hand?
Here is the code that I have:
<body>
<div class="container-fluid">
<div class="hidden-phone">
<a href="newBook.php">
<button class="btn btn-large btn-primary" style="float:right; margin-top:30px;" type="button">Add Book</button>
</a>
</div>
<div class="row-fluid">
<div class="span12 well">
<div class="row-fluid">
<ul class="thumbnails">
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/320x200" alt="ALT NAME">
<div class="caption">
<h3>Title</h3>
<p>Seller: Me</p>
<p>Email: </p>
<p>Cost: </p>
<p>Condition: </p>
<p align="center">
View More information
</p>
</div>
</div>
</li>
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/320x200" alt="ALT NAME">
<div class="caption">
<h3>Title</h3>
<span class="label label-warning" style="margin-bottom: 10px;">Book has been sold!</span>
<p>Seller: Me</p>
<p>Email: </p>
<p>Cost: </p>
<p>Condition: </p>
<p align="center">
View More information
</p>
</div>
</div>
</li>
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/320x200" alt="ALT NAME">
<div class="caption">
<h3>Title</h3>
<p>Seller: Me</p>
<p>Email: </p>
<p>Cost: </p>
<p>Condition: </p>
<p align="center">
View More information
</p>
</div>
</div>
</li>
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/320x200" alt="ALT NAME">
<div class="caption">
<h3>Title</h3>
<p>Seller: Me</p>
<p>Email: </p>
<p>Cost: </p>
<p>Condition: </p>
<p align="center">
View More information
</p>
</div>
</div>
</li>
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/320x200" alt="ALT NAME">
<div class="caption">
<h3>Title</h3>
<p>Seller: Me</p>
<p>Email: </p>
<p>Cost: </p>
<p>Condition: </p>
<p align="center">
View More information
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
Fiddle: http://jsfiddle.net/Z3VwZ/
screens:
No, height of divs is not the issue. Issue is that you must put only three divs with .span4 class in one div with .row-fluid class. And if you want more divs with .span4 you must create new div with .row-fluid class and put those new .span4 divs inside. See Twitter bootstrap official documentation.
For example, this is valid Twitter Bootstrap markup
<div class="row-fluid">
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
</div>
<div class="row-fluid">
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
</div>
<div class="row-fluid">
<div class="span12"></div>
</div>
<div class="row-fluid">
<div class="span8"></div>
<div class="span1"></div>
<div class="span3"></div>
</div>
Here is working demo with your code >>> http://jsfiddle.net/Z3VwZ/1/