This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 5 years ago.
I have a full-page bootstrap layout, and on the first page I need something aligned to middle & bottom.
There is a background image (first div), and a darker layer on it (second div).
<div class="h-100 w-100">
<div class="h-100 w-100 text-center">
<div class="h-100 w-100 d-flex align-items-center">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<h1 style="color:#000;">something</h1>
<a href="">
www.something.com
</a>
<p class="tto_cl">
<span style="font-size: 1.8rem;">123</span>
</p>
<span style="text-transform:uppercase; color:#000; letter-spacing: 4px; font-family: Arial;">456</span><br>
</div>
</div>
</div>
Jsfiddle:
https://jsfiddle.net/543r2dcs/2/
They are aligned center perfectly, but I need something to bottom.
I want the 456 to the bottom of the div, but this new flexbox system is unusual to me.
Bootstrap has a very handy .align-bottom class. You can read about it here
<span class="align-bottom">bottom</span>
Set the parent element position: relative then set the poisition for the element you want to be down the bottom to position: absolute then set its bottom to 0 bottom: 0 this will position it to the bottom of its parent container this might also break how you are centering the element so you will have to add left: 0 and right: 0
If you want it to be vertically centered, use my-auto margin y auto, which brings it to the center
Related
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 2 years ago.
I am trying to make a simple header for my webpage but I want to position my back button inside my div container such that it floats left but at the same time the "Header" text should appear in the center of the "parent div".
I tried using float left on my button but the problem is it makes the header text to wrap and the text appears off from the center of div(shifted right).
So, I tried using flex and arrived at the following code:
<div class="container">
<h2 class="alert alert-primary d-flex flex-column">
<button class="btn btn-primary align-self-start">
Go back
</button>
<div class="align-self-center">
Header
</div>
</h2>
</div>
Using flex, the header appears like this:
But here, I want the button and header to be positioned besides each other. Hence, the text must be shifted up somehow.
Can someone suggest some better alternative to this approach or how this one can be fixed?
I understand that you want to have the button on the left of the "Header" text, making the parent as having center text-align and putting the button inside the Header div and making it float:left ensures that the Heading div is not going to block align.
Also, please note that background-color:red; and background-color:green; are just to demo how is appears
.container{
background-color:red;
text-align:center;
}
.align-self-center{
background-color:green;
}
button{
float:left
}
<div class="container">
<h2 class="alert alert-primary d-flex flex-column">
<div class="align-self-center">
<button class="btn btn-primary align-self-start">
Go back
</button>
Header
</div>
</h2>
</div>
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
As the title says, I am trying to center an icon with an "a" tag which spans its div container. The idea is that I want the whole side/container to be clickable to navigate the carousel and not just the icon.
I am only able to get the two things that I want to happen separately. As you can see in the image, the whole container with the left chevron arrow is clickable and for the right chevron arrow, only the icon itself is clickable. I achieve the effect on the left using absolute position and the effect on the right using text-align with bootstrap's my-auto.
How can I achieve both effects at once?
Here is the corresponding html
<div class="carousel slide mt-3" data-ride="carousel">
<div class="row no-gutters">
<div class="col-2">
<a class="h1 text-danger debugborder2 sizer my-auto" href="#lusCarousel" style="text-align: center">
<i class="fas fa-chevron-left"></i>
</a>
</div>
<div class="mycard-carousel-inner col-8" role="listbox">
...
</div>
<div class="col-2 my-auto h1" style="text-align: center"><a class="h1 text-danger debugborder2" href="#lusCarousel"><i class="fas fa-chevron-right"></i></a></div>
</div>
</div>
And css
.sizer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
}
Bootstrap 4 solutions are welcome.
Since you're using Bootstrap 4, you could add d-flex align-items-center justify-content-center classes to your <a>.
If you prefer plain CSS (which I recommend), select it using any valid selector and apply:
display: flex;
align-items: center;
justify-content: center;
... to it.
Also, instead of giving it h1 class (which, besides increasing font-size, also adds in some margins), you could simply give it the desired font-size (i.e: font-size: 5rem;)
This question already has answers here:
How to center the image in bootstrap 4? [duplicate]
(3 answers)
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Centering the image in Bootstrap
(3 answers)
Closed 4 years ago.
I am trying to center an image on the page, but it only works for mobile screens because I put col-xs-12 for <img> tag. Is there any problem in this class:
col-md-6 col-xs-12 img-responsive text-center
I tried to put margin: 0 auto to <img> and to .pict div, but it doesn't work. Also, I've tried center-block class and text-center.
<div class="container" style="width: 100%">
<div class="pict" style="width: 100%">
<div class="img-pict" style="margin: 0 auto">
<img src="../img/CoverCNVol1No1.png" class="col-md-6 col-xs-12 img-responsive text-center">
</div>
</div>
</div>
The image is standing on the left side, it should be at the center of the screen.
The idea is using the bootstrap container classes col-md-6 and alike to size containers for the image for different screen sizes and put the img inside.
You can convert the image to inline element using display: inline-block; and use the bootstrap text-center class or text-align: center; on the container div.
Or you can leave the image as is (block element) and center it with margin: auto or bootstrap4 mx-auto on the container div.
Also have in mind that for horizontal centering you are setting the left and right margins to auto. Top and bottom can still be sized as you need them.
<div class="container" style="width: 100%;">
<div class="pict" style="width: 100%;">
<div style="margin: auto;" class="img-pict col-md-6 col-xs-12">
<img src="../img/CoverCNVol1No1.png" class="img-responsive" />
</div>
</div>
This question already has answers here:
Bootstrap: How to center align content inside column? [duplicate]
(2 answers)
Closed 6 years ago.
I have this code:
<div class="article-quiz-content.container">
<div class="row">
<div class="col-xs-6.quiz-cols">
<div class="true-placeholder">
<a class=icon-true-shape amenitie_icon" href="#" data-answer="true">
</div>
</div>
<div class=col-xs-6.quiz-cols">
<div class="false-placeholder">
<a class="icon-false-shape amenitie_icon" href="#" data-answer="false">
</div>
</div>
</div>
</div>
Which leads to this:
I need those icons to be in the center of the columns.
Suggestions?
Just add class text-center to your columns (.col-xs-6)
Reference: https://getbootstrap.com/css/#type-alignment
EDIT: after you changed markup you need to add it to placeholder divs
You can do something like this in your css:
.quiz-cols{
text-align: center;
}
.amenitie_icon{
display: inline-block;
}
Inline-block element float to center if container has text-align: center
I've been trying to imitate what I consider is a great design for top navigation. The top navigation is from this website here: Giphy
For my layout I've been using BassCSS latest version which is the Basscss v8.0.1. Here's what I have so far:
HTML:
<div class="clearfix xs-hide mx-auto bg-white flex flex-justify md-col-12 lg-col-8 mb1">
<div class="col mx-auto center border-bottom border-red strong-border px3">
Home
</div>
<div class="col mx-auto center border-bottom border-green strong-border px3">
Categories
</div>
<div class="col mx-auto center border-bottom border-purple strong-border px3">
Tags
</div>
<div class="col mx-auto center border-bottom border-aqua strong-border px3">
Information
</div>
<div class="col mx-auto center border-bottom border-yellow strong-border px3">
Search
</div>
</div>
<div class="clearfix xs-hide flex mx-auto md-col-12 lg-col-8 mb1">
<label for="search-input" class="hide">Search</label>
<input
type="search"
id="search-input"
class="flex-auto py1 px1 m0 field not-rounded"
placeholder="Search term">
<button class="border black bg-aqua not-rounded">Go</button>
</div>
The CSS files for BassCSS can be found at the official website (I can't post more than two links). I just extended on little thing:
.strong-border{
border-bottom-width: 5px;
}
And that gives me the desire strong border. You can see my version in codepen. That's what I have already but it isn't as good looking as the original because of that white-space problem (Before the links there's some white-space) and this is caused because the links are centered in their container. Also, I don't want the background color to be black and so I was looking for it to look great on white.
Can you please help me to get it a little bit more like the original?
BTW, here's a codepen link with my version on it so you can go ahead and see/play it. :-)
You could use :first-child and :last-child to specify that you don't want the margin left respectively right on the extremity items.
Something like this:
div.mb1 div:first-child {
margin-left: 0;
}
div.mb1 div:last-child {
margin-right: 0;
}
where div.mb1 is the parent and so the properties are specified on the first and last child div.
Here is the updated codepen.
Hope I got the problem right.