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
Related
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>
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
So my confusion is that the Scrollspy is targeting the outer div instead of the actual element it is modifying. I'm trying to understand why that is the case?
The code in question is line 12 and 89-90 here:
http://4f7ba83874222b00ae84-8c55136fa379d9b2d1adde446f45d068.r28.cf2.rackcdn.com/scrollspy.html
Tried my best to include relevant part here:
<body data-spy="scroll" data-target="#myScrollspy">
<div class="container">
<div class="row">
<div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
<h1 id="p_1">Part 1</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et felis consequat velit sollicitudin fermentum....
</p>
<h1 id="p_2">Part 2</h1>
<p>
Maecenas massa eros, aliquam id nisi ut, venenatis eleifend diam....
</p>
<h1 id="p_3">Part 3</h1>
<p>
Quisque id luctus tortor, a scelerisque nulla....
</p>
<h1 id="p_4">Part 4</h1>
<p>
Nam sed volutpat sapien....
</p>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" id="myScrollspy">
<ul class="nav nav-pills nav-stacked affix">
<li class="active">Part 1</li>
<li>Part 2</li>
<li>Part 3</li>
<li>Part 4</li>
</ul>
</div>
</div>
</div>
</body>
It actually target parent element of any Bootstrap navigation component.
It'd work too if u put the data-target to the ul nav class..
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-->