this is my code:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div style={{border: 'solid black 0.5px'}} class="col-md-3">
<h2>Heading 1</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus,</p>
<p><a className="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
<div style={{border: 'solid black 0.5px'}} class="col-md-3 offset-md-4">
<h2>Heading 2</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, </p>
<p><a className="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
<div style={{border: 'solid black 0.5px'}} class="col-md-3 offset-md-1">
<h2>Heading 2</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, </p>
<p><a className="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
</div>
I have used offset on heading 2, the one in the center but it doesn't skip some space unlike in the docs? what I wanted to do is add some margin on them but when I try to, it pushes the last one on the bottom or it doesn't occupy all the space, if I don't use 4? how do I add margin here?
It's col-md-offset-4 and not offset-md-4
read better the docs again https://getbootstrap.com/docs/3.3/css/#grid-offsetting
Related
This question already has answers here:
How to vertically align an image inside a div
(37 answers)
How can I vertically align elements in a div?
(28 answers)
Closed 2 years ago.
The Bulma documentation on media objects gives this example:
<article class="media">
<figure class="media-left">
<p class="image is-64x64">
<img src="https://bulma.io/images/placeholders/128x128.png">
</p>
</figure>
<div class="media-content">
<div class="content">
<p>
<strong>John Smith</strong> <small>#johnsmith</small> <small>31m</small>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
</p>
</div>
<nav class="level is-mobile">
<div class="level-left">
<a class="level-item">
<span class="icon is-small"><i class="fas fa-reply"></i></span>
</a>
<a class="level-item">
<span class="icon is-small"><i class="fas fa-retweet"></i></span>
</a>
<a class="level-item">
<span class="icon is-small"><i class="fas fa-heart"></i></span>
</a>
</div>
</nav>
</div>
<div class="media-right">
<button class="delete"></button>
</div>
</article>
How can I vertically center the image 128x128.png on the left side?
What I checked already:
Discussion in the Bulma issue queue on how to vertically center elements
SO question about centering columns
I can't colorize the Font Awesome 5 icons using these codes. I tried fill css property for setting color but it didn't work.
HTML Code:
<div class="container mt200 icons">
<div class="col-md-3">
<div class="bggray2 text-center">
<i class="fas fa-microphone fa-5x"></i>
<div class="title">LOREM</div>
<div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</div>
</div>
</div>
<div class="col-md-3">
<div class="bggray2 text-center">
<i class="far fa-edit fa-5x"></i>
<div class="title">LOREM</div>
<div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
</div>
</div>
</div>
</div>
CSS Code:
.icons i {
color: #2759AE;
}
Font Awesome 5 uses svg for icons and path inside are set with fill:currentColor so simply change color of svg:
.icons svg {
color:#2759AE;
}
<script defer src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
<div class="container mt200 icons">
<div class="col-md-3">
<div class="bggray2 text-center">
<i class="fas fa-microphone fa-5x"></i>
<div class="title">LOREM</div>
<div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</div>
</div>
</div>
<div class="col-md-3">
<div class="bggray2 text-center">
<i class="far fa-edit fa-5x"></i>
<div class="title">LOREM</div>
<div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
</div>
</div>
</div>
</div>
As you can see in the code, the i are replaced with svg when you load the JS version:
You can apply color to i in case you are using the CSS version.
.icons i {
color:#2759AE;
}
<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet"><div class="container mt200 icons">
<div class="col-md-3">
<div class="bggray2 text-center">
<i class="fas fa-microphone fa-5x"></i>
<div class="title">LOREM</div>
<div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</div>
</div>
</div>
<div class="col-md-3">
<div class="bggray2 text-center">
<i class="far fa-edit fa-5x"></i>
<div class="title">LOREM</div>
<div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
</div>
</div>
</div>
</div>
So to make sure it will work in all the cases simply use both selector:
.icons i,
.icons svg {
color: #2759AE;
}
If you're using the svg-with-js version of Font Awesome 5 it takes everything in the <i></i> and preprocesses it into an <svg>. It specifies that the path has fill="currentColor" So, you have to set currentColor to the colour you want somehow. One option is:
svg {color: blue;}
The official docs recommend inline style:
<i class="far fa-edit fa-5x" style="color:blue"></i>
Or, set currentColor in one of the outer elements. For example:
<div class="bggray2 text-center" style="color: blue;">
<i class="far fa-edit fa-5x"></i>
</div>
And to move it to the CSS file, you could:
div .bggray2 {
color: blue;
}
If you are using Bootstrap 4 you can use and of the text-'color' settings in the parent of the tag.
<div class="bggray2 text-danger">
<i class="far fa-edit fa-5x"></i>
</div>
I can't colorize the Font Awesome 5 icons using these codes. I tried fill css property for setting color but it didn't work.
HTML Code:
<div class="container mt200 icons">
<div class="col-md-3">
<div class="bggray2 text-center">
<i class="fas fa-microphone fa-5x"></i>
<div class="title">LOREM</div>
<div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</div>
</div>
</div>
<div class="col-md-3">
<div class="bggray2 text-center">
<i class="far fa-edit fa-5x"></i>
<div class="title">LOREM</div>
<div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
</div>
</div>
</div>
</div>
CSS Code:
.icons i {
color: #2759AE;
}
Font Awesome 5 uses svg for icons and path inside are set with fill:currentColor so simply change color of svg:
.icons svg {
color:#2759AE;
}
<script defer src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
<div class="container mt200 icons">
<div class="col-md-3">
<div class="bggray2 text-center">
<i class="fas fa-microphone fa-5x"></i>
<div class="title">LOREM</div>
<div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</div>
</div>
</div>
<div class="col-md-3">
<div class="bggray2 text-center">
<i class="far fa-edit fa-5x"></i>
<div class="title">LOREM</div>
<div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
</div>
</div>
</div>
</div>
As you can see in the code, the i are replaced with svg when you load the JS version:
You can apply color to i in case you are using the CSS version.
.icons i {
color:#2759AE;
}
<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet"><div class="container mt200 icons">
<div class="col-md-3">
<div class="bggray2 text-center">
<i class="fas fa-microphone fa-5x"></i>
<div class="title">LOREM</div>
<div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</div>
</div>
</div>
<div class="col-md-3">
<div class="bggray2 text-center">
<i class="far fa-edit fa-5x"></i>
<div class="title">LOREM</div>
<div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
</div>
</div>
</div>
</div>
So to make sure it will work in all the cases simply use both selector:
.icons i,
.icons svg {
color: #2759AE;
}
If you're using the svg-with-js version of Font Awesome 5 it takes everything in the <i></i> and preprocesses it into an <svg>. It specifies that the path has fill="currentColor" So, you have to set currentColor to the colour you want somehow. One option is:
svg {color: blue;}
The official docs recommend inline style:
<i class="far fa-edit fa-5x" style="color:blue"></i>
Or, set currentColor in one of the outer elements. For example:
<div class="bggray2 text-center" style="color: blue;">
<i class="far fa-edit fa-5x"></i>
</div>
And to move it to the CSS file, you could:
div .bggray2 {
color: blue;
}
If you are using Bootstrap 4 you can use and of the text-'color' settings in the parent of the tag.
<div class="bggray2 text-danger">
<i class="far fa-edit fa-5x"></i>
</div>
I have a controller called "BookController" :
public ActionResult Book(int? id)
{
var result = db.Books.Where(b => b.Book_id == id).Single();
var user = db.AspNetUsers.Where(b => b.Id == result.User_ID).Single();
ViewBag.User_ID = user.UserName;
return View(result);
}
public ActionResult SameAuthor(string author)
{
var result = db.Books.Where(b => b.Author_name == author).Take(4);
return View(result.ToList());
}
also this is the view code "books.cshtml" :
#model SmartBookLibrary.Models.Book
#using SmartBookLibrary.Controllers
#{
ViewBag.Title = Model.Book_name;
BookController book = new BookController();
var auth = Model.Author_name;
}
#section AdditionalMeta
{
<link href="~/Content/blog-post.css" rel="stylesheet" />
<link href="~/Content/font-awesome.min.css" rel="stylesheet" />
}
<div class="container">
<div class="row">
<!-- Blog Post Content Column -->
<div class="col-lg-8">
<!-- Blog Post -->
<!-- Title -->
<h1>#Model.Book_name (#Model.Edition th Edition) <small class="fa fa-edit"></small></h1>
<!-- Author -->
<p class="lead">
by #ViewBag.User_ID
</p>
<hr>
<!-- Date/Time -->
<p><span class="glyphicon glyphicon-time"></span> Posted on #Model.Publish_date</p>
<hr>
<!-- Preview Image -->
<div class="row">
<div class="col-md-3">
<img class="img-show" src="/Books/RetrieveImage/#Model.Book_id" alt="">
</div>
<div class="col-md-6 col-md-offset-1">
<dl>Book Name : #Model.Book_name</dl>
<dl>Book Edition : #Model.Edition</dl>
<dl>Author Name : #Model.Author_name</dl>
<dl>Category : #Model.Category.Category_name</dl>
<dl>Book Name: #Model.Book_name</dl>
<dl>ISN : 2015</dl>
</div>
</div>
<hr>
<!-- Post Content -->
<p class="lead">#Html.Raw(Model.Book_Description)</p>
<button class="btn btn-block btn-lg btn-success">
Download #Model.Book_name
<i class="fa fa-cloud-download"></i>
</button>
<hr>
<div class="well">
<div class="row">
#* I Want to call the contoller method , it will return 4 post , then i want to show them here *#
#{
var b = book.SameAuthor(auth);
foreach (var cat in b)
{
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="/Books/RetrieveImage/" alt="Generic placeholder thumbnail">
</div>
<div class="caption">
<h3>Book_name</h3>
<p>Some sample text. Some sample text.</p>
<p>
<a href="#" class="btn btn-primary" role="button">
Button
</a>
<a href="#" class="btn btn-default" role="button">
Button
</a>
</p>
</div>
</div>
}
}
</div>
</div>
<hr>
<!-- Blog Comments -->
<!-- Comments Form -->
<div class="well">
<h4>Leave a Comment:</h4>
<form role="form">
<div class="form-group">
<textarea class="form-control" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<hr>
<!-- Posted Comments -->
<!-- Comment -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://placehold.it/64x64" alt="">
</a>
<div class="media-body">
<h4 class="media-heading">
Start Bootstrap
<small>August 25, 2014 at 9:30 PM</small>
</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
<!-- Comment -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://placehold.it/64x64" alt="">
</a>
<div class="media-body">
<h4 class="media-heading">
Start Bootstrap
<small>August 25, 2014 at 9:30 PM</small>
</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<!-- Nested Comment -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://placehold.it/64x64" alt="">
</a>
<div class="media-body">
<h4 class="media-heading">
Nested Start Bootstrap
<small>August 25, 2014 at 9:30 PM</small>
</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
<!-- End Nested Comment -->
</div>
</div>
</div>
<!-- Blog Sidebar Widgets Column -->
<div class="col-md-4">
<!-- Blog Search Well -->
<div class="well">
<h4>Search</h4>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
<!-- /.input-group -->
</div>
<!-- Blog Categories Well -->
<div class="well">
<h4>Blog Categories</h4>
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled">
<li>
Category Name
</li>
<li>
Category Name
</li>
<li>
Category Name
</li>
<li>
Category Name
</li>
</ul>
</div>
<div class="col-lg-6">
<ul class="list-unstyled">
<li>
Category Name
</li>
<li>
Category Name
</li>
<li>
Category Name
</li>
<li>
Category Name
</li>
</ul>
</div>
</div>
<!-- /.row -->
</div>
<!-- Side Widget Well -->
<div class="well">
<h4>Books May You Interest</h4>
</div>
</div>
</div>
<!-- /.row -->
</div>
my problem actually here in this code "in books.cshtml":
#{
var b = book.SameAuthor(auth);
foreach (var cat in b)
{
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="/Books/RetrieveImage/" alt="Generic placeholder thumbnail">
</div>
<div class="caption">
<h3>Book_name</h3>
<p>Some sample text. Some sample text.</p>
<p>
<a href="#" class="btn btn-primary" role="button">
Button
</a>
<a href="#" class="btn btn-default" role="button">
Button
</a>
</p>
</div>
</div>
}
}
The Error i got is :
Severity Code Description Project File Line Suppression State
Error CS1579 foreach statement cannot operate on variables of type 'System.Web.Mvc.ActionResult' because 'System.Web.Mvc.ActionResult' does not contain a public definition for 'GetEnumerator' SmartBookLibrary C:\Users\Firas\documents\visual studio 2015\Projects\SmartBookLibrary\SmartBookLibrary\Views\Book\Book.cshtml 73 Active
Note : I Tried to change the model type to this :
#model IEnumerable <SmartBookLibrary.Models.Book>
and the error is gone , but i got error for all the view code (any code start with #model) , and this is a sample of error i got:
Severity Code Description Project File Line Suppression State
Error CS1061 'IEnumerable<Book>' does not contain a definition for 'Book_name' and no extension method 'Book_name' accepting a first argument of type 'IEnumerable<Book>' could be found (are you missing a using directive or an assembly reference?) SmartBookLibrary C:\Users\Firas\documents\visual studio 2015\Projects\SmartBookLibrary\SmartBookLibrary\Views\Book\Book.cshtml 4 Active
can any one help me with a solution ! and thanks
The error is self explanatory. SameAuthor() action method returns an ActionResult type. You cannot loop through that !
Looks like your SameAuthor action method returns a view (markup) with the data you wanted. So why not just include that in the main view with Html.Action helper method
#Html.Action("SameAuthor", Model.Author_name)
Or you should create a view model for your view which has the details of one book and the a collection of books for "Books from the same author".
public class BooksDetailsVm
{
public Book Book { set;get;}
public List<Book> BooksFromSameAuthor { set;get;}
}
and in your GET action, load this data
public ActionResult Book(int? id)
{
if (id != null)
{
var vm = new BooksDetailsVm();
var b = db.Books.Where(O => O.Book_id == id).Single();
vm.Book = b;
var user = db.AspNetUsers.Where(P => P.Id == b.User_ID).Single();
vm.BooksFromSameAuthor = db.Books.Where(t => t.Author_name == b.Author_name).Take(4).ToList();
ViewBag.User_ID = user.UserName;
return View(vm);
}
return HttpNotFound();
}
And your view, which is strongly typed to our new BookDetailsVm
#model BookDetailsVm
<h1>#Model.Book.Name</h1>
<h4>Books from same author</h4>
#foreach(var item in Model.BooksFromSameAuthor)
{
<p>#item.Name</p>
}
I have a section of a website that has 2 rows inside a container, both rows have 3 columns of class col-sm-4 and col-md-4. Both rows have 1 image in each column. All images are exactly the same size at 300px wide. The top row displays accurately, the bottom row condenses the 3 columns and leave a big area of wide space on the right side. When using the inspector, The top row columns are appearing as class col-md-4, but the buttom row columns are showing as col-sm-4. I'm not sure if this is whats causing it. I should mention also that the top row columns have paragraphs below each image. When adding the exact same paragraph content to the bottom row in just 1 column, the issue is resolved, but I don't want paragraphs here. I checked out the bootstrap CSS and my own to try and find some sore of style on <p> that could be causing this but couldn't find anything. Each row, and column have the exact same CSS. The code is below:
HTML:
<div class="wrapper">
<div class="row customer-options">
<div class="button-container">
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="images/button-icon-map2.png" alt="">
<h2>Title 1</h2>
<p>These marketing boxes are a great place to put some information. These can contain summaries of what the company does, promotional information, or anything else that is relevant to the company. These will usually be below-the-fold.</p>
</div>
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="images/button-icon-pref2.png" alt="">
<h2>Title 2</h2>
<p>The images are set to be circular and responsive. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
</div>
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="images/button-icon-add2.png" alt="">
<h2>Title 3</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
</div>
</div>
</div><!-- /.row -->
</div><!--wrapper-->
<hr>
<div class="wrapper">
<div class="row tap">
<div class="tap-container">
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="images/beer-tap.png" alt="">
<h2>About</h2>
</div>
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="images/beer-tap.png" alt="">
<h2>Services</h2>
</div>
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="images/beer-tap.png" alt="">
<h2>Contact</h2>
</div>
</div>
</div><!-- /.row -->
</div><!--wrapper-->
CSS:
.wrapper {
display: table;
}
.button-container {
padding-right: 15px;
padding-left: 15px;
}
.customer-options {
background-color: #848487;
padding-top: 20px;
height:100vh;
display: table-cell;
vertical-align: middle;
}
.tap {
background-color: #848487;
padding-top: 20px;
height:100vh;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.tap-container {
padding-right: 15px;
padding-left: 15px;
}
.customer-options h2 {
text-align: center;
}
The display table and table-cell are taking precedence over the responsive image. Tables fit their content then the img-responsive will fill the new width. You can probably find a work around to achieve vertical alignment but I recommend dropping the table system and properly use bootstrap's grid system. Then you can use flexboxes to get vertical alignment.
http://jsfiddle.net/28qq8fm3/
<style>
.customer-options {
background-color: #848487;
padding-top: 20px;
vertical-align: middle;
}
.tap {
background-color: #848487;
padding-top: 20px;
vertical-align: middle;
text-align: center;
}
.customer-options h2 {
text-align: center;
}
</style>
<div>
<div class="row customer-options">
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="https://beccasheppard.files.wordpress.com/2011/09/football.jpg" alt="">
<h2>Title 1</h2>
<p>These marketing boxes are a great place to put some information. These can contain summaries of what the company does, promotional information, or anything else that is relevant to the company. These will usually be below-the-fold.</p>
</div>
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="https://beccasheppard.files.wordpress.com/2011/09/football.jpg" alt="">
<h2>Title 2</h2>
<p>The images are set to be circular and responsive. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
</div>
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="https://beccasheppard.files.wordpress.com/2011/09/football.jpg" alt="">
<h2>Title 3</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
</div>
</div>
<!-- /.row -->
</div>
<!--wrapper-->
<hr>
<div>
<div class="row tap">
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="http://www.cozadschools.net/wp-content/uploads/2015/02/football.png" alt="">
<h2>About</h2>
</div>
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="http://www.cozadschools.net/wp-content/uploads/2015/02/football.png" alt="">
<h2>Services</h2>
</div>
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="http://www.cozadschools.net/wp-content/uploads/2015/02/football.png" alt="">
<h2>Contact</h2>
</div>
</div>
<!-- /.row -->
</div>
<!--wrapper-->