I just started setting up my blog prototype with Bulma. There is a footer section with two equally divided columns.
I'd like the three items (Twitter, Email, etc.) to be vertically centered in the yellow area. Is there any special class for that available in Bulma?
(Please see the full example on codepen.io.)
<footer class="footer" style="background-color: lightpink;">
<div class="columns">
<div class="column has-text-centered-touch" style="background-color: cyan;">
<p>Some copyright stuff...</p>
<p>Templated with Bulma. Published with Hugo.</p>
</div>
<div class="column has-text-right" style="background-color: yellow;">
<div class="level">
<div class="level-left"></div>
<div class="level-right">
<a class="level-item" href="#">Twitter Icon</a>
<a class="level-item" href="#">Email Icon</a>
<a class="level-item" href="#">LinkedIn Icon</a>
</div>
</div>
</div>
</div>
</footer>
You could add the following CSS so the right side column so it is vertically centered.
https://codepen.io/anon/pen/XzmEgr
.footer .has-text-right {
display: flex;
justify-content: center;
}
Make the height of the .level on the right side 100%
.right-side > .level {
height: 100%;
}
JSFiddle
Related
There are several subjects on StackOverFlow as here, but the answers are not intuitive for a beginner.
How to align several text and images in CSS
How to align several text and images in CSS
Actually, I would like to center 2 images on the same line, in bottom of each image there are a title and a subtitle. I would like to make it without display: flex.
I don't understand why the seconde image is not aligned horizontally correctly?
.row{
padding-top: 15px;
text-align: center;
}
.imgP{
background-color:red;
margin: auto 5px;
}
<body>
<div class="row">
<img class="imgP" src="https://zupimages.net/up/21/18/te8n.png" alt="image">
<div class="title">My title</div>
<div class="subtitle">Subtitle</div>
<img class="imgP" src="https://zupimages.net/up/21/18/te8n.png" alt="image">
<div class="title">My title</div>
<div class="subtitle">Subtitle</div>
</div>
</body>
Flex is the easy and modern way to do it. If you don't want to use flex, use display:inline-block. For that, you need to create 2 column divs and wrap the content inside it.
.row {
padding-top: 15px;
text-align: center;
}
.col {
display: inline-block;
}
.imgP {
background-color: red;
margin: auto 5px;
}
<body>
<div class="row">
<div class="col">
<img class="imgP" src="https://zupimages.net/up/21/18/te8n.png" alt="image">
<div class="title">My title</div>
<div class="subtitle">Subtitle</div>
</div>
<div class="col">
<img class="imgP" src="https://zupimages.net/up/21/18/te8n.png" alt="image">
<div class="title">My title</div>
<div class="subtitle">Subtitle</div>
</div>
</div>
</body>
How do you align text from two different tags? Code is shown below with the result.
<input-layout label="TEST_TITLE">
<div>
<p class="no-gap">TEST_TEXT1</p>
<p class="no-gap"><small style="color:red; font-size: 10px;">TEST_TEXT2</small></p>
</div>
</input-layout>
My goal is to align TEST_TITLE with TEST_TEXT1 while the small red text TEST_TEXT2 remains directly below TEST_TEXT1 like the way it is now.
I thought about adding an inline-block to the div but that didn't do anything. I'm terrible with CSS so your help will be appreciated.
I think you can make use of flex to align your headings here.
Created a short example for you, please check :
<div id="box" style=" display: flex; flex-direction: row">
<div style="background: yellow; display: flex;" id="left">
<p class="no-gap">TEST_TITLE</p>
</div>
<div id="right" style=" display: flex; flex-direction: column; ">
<div style="background: cyan">
<p class="no-gap">TEST_TEXT1</p>
</div>
<div style="background: aqua">
<p class="no-gap"><small style="color:red; font-size: 10px;">TEST_TEXT2</small></p>
</div>
</div>
</div>
https://plnkr.co/edit/tzMZLG6JsFkwJLTy?open=lib%2Fscript.js
You can refer the documentation here:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I would like to align three div in one line with a little space between first div and second div and last div using bootstrap as you see in the picture :
I try with this code :
<div class="row">
<div class="col-md-2">
<img src="img/emo_positif.png')}}">
</div>
<div class="col-md-7">
<div class="square1"></div>
</div>
<div class="col-md-3">
<img src="img/emo_negative.png')}}">
</div>
</div>
but it shows me a big space between the div
Using Bootstrap 3:
.row {
height: 24px;
}
.row > div {
height: 100%;
}
.square {
background: pink;
}
.square1 {
background: #01a8ff;
height: 100%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" >
<div class="row">
<div class="col-xs-2 square">
</div>
<div class="col-xs-8">
<div class="square1"></div>
</div>
<div class="col-xs-2 square">
</div>
</div>
Check this Pen.
Read the docs.
For making the three division in same line . There are many ways. For better UX use display:flex in css for the parent division
Thanks
I'm building a Carousel-type component, but am having some difficulty getting it to work just right.
My basic approach is a div (wrapper) with lots of other divs (items) in it. I want to display 4 items on the carousel at any one time. The items have various content heights, but the heights of the items should be equal (to the largest required).
I can't work out the CSS combination I need to get this to work correctly.
With this setup (HTML + CSS at bottom of post), the width: 25%; on each item-container is ignored.
If I add a fixed with to .item, then the 25% kicks in, but the item width is unknown -- it depends on the browsers size. Setting it to 1000px means you lose content from the item. Setting it to ~210px works, but when you start shrinking your browser, you lose content. On a large browser, you have excessive spacing.
Curiously, if I add flex-wrap: wrap to the CSS, then the 25% width is applied correctly -- but I can't do that, because then it's not a carousel! Example
The scenario is simple:
An unknown amount of items in a div with overflow: auto, which are equal heights should be displayed, with 4 of the children divs on the screen at any one time.
My HTML is structured as follows:
<div id="container">
<div id="wrapper">
<div class="item-container">
<div class="item">
<p>
Carousel Item #1 with some quite long text.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #2.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #3.
</p>
</div>
</div>
...
</div>
</div>
My CSS:
#container {
width: 100%;
background: #0f0;
overflow: auto;
}
#wrapper {
display: flex;
}
.item-container {
border: 1px solid #f00;
width: 25%;
}
Note, this is my MCVE. On my real component, I have buttons for scrolling left and right, the content is significantly more complex and stuff like that.
All you need is to add flex: 0 0 auto to .item-container elements.
* {
box-sizing: border-box;
}
#container {
width: 100%;
background: #0f0;
overflow: auto;
}
#wrapper {
display: flex;
}
.item-container {
border: 1px solid #f00;
flex: 0 0 auto;
width: 25%;
}
<div id="container">
<div id="wrapper">
<div class="item-container">
<div class="item">
<p>
Carousel Item #1 with some quite long text.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #2.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #3.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #4.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #5.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #6.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #7.
</p>
</div>
</div>
</div>
</div>
I am using Bootstrap 3, I need to have same height of the columns with vertical align able in the content of the columns
<div class="row">
<div class="col-xs-12 col-sm-3">
vertical align top
</div>
<div class="col-xs-12 col-sm-3">
vertical align middle
</div>
<div class="col-xs-6 col-sm-3">
<img src="http://mspmentor.net/site-files/mspmentor.net/files/archive/mspmentor.net/wp-content/uploads/2009/10/free_managed_services.jpg" />
</div>
<div class="col-xs-6 col-sm-3">
vertical align bottom
</div>
</div>
Please check here https://jsfiddle.net/4d2m74nc/4/
This is achievable but will take away from some of bootstrap's built in functionality. Mainly, the media queries for mobile rendering of the grid system.
The best way to achieve this is probably with the flexbox approach. Demo.
<div class="row row-eq-height">
<div class="col-sm-3">
vertical align top
</div>
<div class="col-sm-3 vcenter">
vertical align middle
</div>
<div class="col-sm-3">
<img src="http://mspmentor.net/site-files/mspmentor.net/files/archive/mspmentor.net/wp-content/uploads/2009/10/free_managed_services.jpg" />
</div>
<div class="col-sm-3 vbottom">
vertical align bottom
</div>
</div>
CSS
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.vcenter{
display:flex;
flex-direction:column;
justify-content:center;
}
.vbottom{
display:flex;
flex-direction:column;
justify-content:flex-end;
}
Second way is to use absolute positioning for the vertical alignment and flexbox for matching heights.
Check out the demo.
<div class="row row-eq-height">
<div class="col-sm-3">
vertical align top
</div>
<div class="col-sm-3">
<div class="vcenter">
vertical align middle
</div>
</div>
<div class="col-sm-3">
<img src="http://mspmentor.net/site-files/mspmentor.net/files/archive/mspmentor.net/wp-content/uploads/2009/10/free_managed_services.jpg" />
</div>
<div class="col-sm-3">
vertical align bottom
</div>
</div>
CSS
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.vcenter {
position: absolute;
top: 50%;
}
Another option would be to use JavaScript to fix the heights and vertical align for you. You could use matchHeight.js.
It's fairly simple to use. You just wrap all of your column content that you want to match in height with another <div> with the class .box
<div class="row">
<div class="col-md-4">
<div class="box">
Content
</div>
</div>
<div class="col-md-4">
<div class="box">
Content
</div>
</div>
<div class="col-md-4">
<div class="box">
Content
</div>
</div>
</div>
and then instantiate it on document load in your JavaScript file or <script></script> tags after your JQuery link.
$('.box').matchHeight();
Sticking with JavaScript for the vertical align you could add .vcenter to the .box element you want vertically aligned and do something like:
var height = $('.vcenter').height();
$('.vcenter').css('margin-top', (height/2));
$('.vcenter').css('margin-bottom', -(height/2));
var $window = $(window);
var windowsize = $window.width();
function checkWidth(){
if (windowsize < 440) {
$('.vcenter').removeAttr("style");
}
}
$(window).resize(checkWidth);
Which calculates the height of the .box and then divides by 2 to determine a top and bottom margin for the content. We then determine the width of the window and on resize we remove the margins. This part is untested but I believe will work in theory. Here's a demo of matchHeight.js. And here's a useful blog on column height matching in bootstrap.
The last two approaches to vertical alignment are poor but should work.
<div class="row flex-container">
<div class="col-xs-12 flex-item col-sm-3">
vertical align top
</div>
<div class="col-xs-12 flex-item col-sm-3">
vertical align middle
</div>
<img class="col-xs-6 flex-item col-sm-3" src="http://mspmentor.net/site-files/mspmentor.net/files/archive/mspmentor.net/wp-content/uploads/2009/10/free_managed_services.jpg" />
<div class="col-xs-6 flex-item col-sm-3">
vertical align bottom
</div>
</div>
CSS that support the boxes the flex item properties it just give for your understanding
.flex-container {
display: -webkit-flex;
display: flex;
}
.flex-item {
border: 1px solid #000;
padding: 20px;
}