I need to make like a card, I've made it with a div, with an image and a text, and I don't know how to center them vertically. This is how my card looks:
and this is how it should look:
This is the code of the div:
<div class="panel mx-auto col align-items-center">
<img class="atajo-content" :src="shortcut.img" height="83" />
<p class="pt-1 card-name text-wrap">{{ shortcut.name }}</p>
</div>
And I just couldn't center the icon with the font. I've tested it with almost all combinations of bootstrap and I cannot understand what happens.
Can you please check the below code? Hope it will work for you. If you want your content to be vertically center, then you need to give specific height to the parent .main-content. Here we have used flex utility classes to center the content as per your requirement.
Please refer to this link: https://jsfiddle.net/yudizsolutions/n39zby6g/
.main-content {
height: 100vh;
text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="main-content d-flex align-items-center justify-content-center">
<div class="panel">
<img class="atajo-content" src="https://via.placeholder.com/100x50" height="83" />
<p class="pt-1 card-name text-wrap">{{ shortcut.name }}</p>
</div>
</div>
Related
I create page with 3 columns with bootstrap5:
<div class="container">
<div class="row">
<div class="col-md-3">LEFT</div>
<div class="col-md-6">CENTER</div>
<div class="col-md-3">RIGHT</div>
</div>
</div>
Now in columns left and right there are advertisements with 300px width. How to restrict left and right column to shrink less then 300px, and to shrink just a center column.
If i set min-width:300px on left and right, then right column is pushed down.
Don't use fixed (proportionate) column sizing. Use Flex. Here's an example. I've reduced the image size for this demo, but it works the same with 300px images.
You may want to change behavior for mobile, maybe to stack everything so it doesn't wrap oddly. I'm not sure of your goals.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container">
<div class="d-flex flex-wrap">
<div><img src="https://via.placeholder.com/200"/></div>
<div class="flex-fill">CENTER</div>
<div><img src="https://via.placeholder.com/200"/></div>
</div>
</div>
You can mimic the same (stacked to horizontal) behavior of .col-md-*s in a .row with flex toggling wrapping at the medium breakpoint with .flex-wrap.flex-md-nowrap.
Try this:
.ad {
width: 300px;
background: cyan;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<div class="container-fluid">
<div class="d-flex flex-wrap flex-md-nowrap">
<div class="ad">LEFT</div>
<div class="w-100">CENTER</div>
<div class="ad">RIGHT</div>
</div>
</div>
The simplest way is to use the Grid auto-layout columns. col-auto will shrink to fit its content (the ads). Then, use flex-nowrap to prevent wrapping...
<div class="container">
<div class="row flex-md-nowrap">
<div class="col-md-auto">
<img src="//via.placeholder.com/300" />
</div>
<div class="col-md">CENTER</div>
<div class="col-md-auto">
<img src="//via.placeholder.com/300" />
</div>
</div>
</div>
Responsive Demo
I want my image to be right-aligned. So I did this:
.section {
margin-bottom: var(--double-margin);
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
<div class="section">
<div class="row">
<div class="col">
<img class="rounded float-right w-50" src="https://via.placeholder.com/1000x200.jpg"/>
</div>
<div class="col">
<p>So other text</p>
</div>
</div>
</div>
</div>
As the result, my image went on the left (because of w-50). So how to tell my image that it should be 50% width and aligned to right?
Here is your example and it works fine. You either need to add a reproducible example of your problem or find the difference between your code and my example. I can guess that for some reason your .col does not grow to 100% of the width that's why the image is aligned to the right side of the smaller container and for you, it looks like it's aligned to left.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col">
<img class="rounded float-right w-50" src="https://via.placeholder.com/1000x200.png"/>
</div>
I am developing an application using Vue.js and Bootstrap. I am looking to develop a folder to look like this:
But, I am unable to align the contents to make sure that it looks like in the above picture.
The picture currently looks like this:
Here is the code:
<div class="col-xl-3 col-md-6">
<stats-card>
<div slot="header" class="folderRectangle">
<div class="row">
<div class="col-3">
<div class="clearfix">
<i class="material-icons" id="folder-image">folder</i>
</div>
</div>
<div class="col-9">
<div class="clearfix" style="position: relative">
<div>
<p style="text-align: left">Folder Name</p>
</div>
<div>
<p style="text-align:left">20 files</p>
</div>
</div>
</div>
</div>
</div>
</stats-card>
</div>
What wrong am I doing? How do I make sure that the folder icon aligns to the top and text floats to the center?
Instead of using .row and .col-*, you can use the media object already available in Bootstrap to produce this layout.
/* demo only */
.media {
border: 1px solid #ddd;
padding: 1.5rem;
margin: 1rem;
}
img {
max-width: 25px;
}
.media-body {
font-size: 0.75rem;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="media">
<img class="mr-3" src="https://png.pngtree.com/element_our/png/20181213/folder-vector-icon-png_267455.jpg" alt="Generic placeholder image">
<div class="media-body">
<h6 class="mt-0 mb-1">Folder name</h6>
<div>20 files</div>
</div>
</div>
The best possible way to achieve what you are trying is to use CSS Flex property.
Just give display flex to the parent (col-9) in your case.
Provide align items to be center.
and at last flex alignment to row.
this will make you achieve the above design
You can read about CSS flexbox more here
https://www.w3schools.com/css/css3_flexbox.asp
I am trying to center the text and an image in two columns. But, I tried everything but I could not manage to bring then in the vertical middle position of a .row .
<div className="hidden-md">
<div className="row navbar">
<div className="col-xs-2 col-sm-4 text-center">
<image src="../resources/back_button.png" />
</div>
<div className="col-xs-6 col-sm-4 text-center">
<span className="custom-input">Filters</span>
</div>
</div>
</div>
Can anyone help me with the css to align the text and the image in the middle I want to achieve the results shown in the image.
JSFIDDLE
.vertical-align{
vertical-align: middle;
}
img{
border:3px solid #2d2d2d;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div className="hidden-md">
<div className="row navbar">
<div className="col-xs-2 col-sm-4 text-center">
<img src="http://www.free2go.com.au/-/media/allsites/competitions/content-image/free2go-beatsstudioheadphones-480x360.ashx?la=en" />
<span className="custom-input vertical-align">Filters</span>
</div>
</div>
You can make use of the Flexbox in this kind of situations, which is the best for use
<div className="hidden-md">
<div className="row navbar">
<div className="col-xs-2 col-sm-4 text-center">
<image src="../resources/back_button.png" />
</div>
<div className="col-xs-6 col-sm-4 text-center">
<span className="custom-input">Filters</span>
</div>
</div>
</div>
.row {
display: flex;
align-items: center;
}
Hope this will help you.
( using Bootstrap 5 ) I have a button with an Image + text inside it.
Issue was in my case, I used a float-end on the image - which caused the text to behave like the image doesn't expand the button's height and therefore the text was vertical aligned but not to the image but rather to the button.
Removing the float-end made all child-elements vertical aligned.
i'm using bootstrap 3 and i want to add a link with a icon on top of a image and vertically center it.
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="col-post">
<div class="post-img"> <a href="mylink">
<div class="overlay"> <img src="myimage.jpg" alt="#" class="img-responsive"> </div>
</a>
</div>
<!--post-img-->
<div class="post-icons"></div>
</div>
</div>
i want the link with the class my-icon to be on center of the image. my icon is positioned absolute and post-img is positioned relative.
Any help would be much appreciated.
I just used the existing .center-block helper class from the library as well as .text-center class to center the contents of each div.
(see documentation for bootstrap 3.x)
I am not sure this is exactly what you want but it should help you get closer to your results.
Let me know if it needs tweaking.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-xs-12">
<h2>My approach (simplistic)</h2>
<a href="#" class="my-icon">
<img src="http://lorempixel.com/300/300" class="center-block img-responsive img-circle" alt="Responsive image" />
</a>
</div>
</div>
<hr/>
<div class="row">
<div class="col-xs-12">
<h2>Your approach (w/ added elements)</h2>
<div class="col-post">
<div class="post-img center-block text-center">
my-icon
<a href="mylink">
<div class="overlay">
<img src="http://lorempixel.com/300/300?asdf" alt="#" class="img-responsive center-block">
</div>
</a>
</div>
<!--post-img-->
<div class="post-icons center-block text-center">post icons</div>
</div>
</div>
</div>
Try Flexbox, it's one of the few ways I've ever had success consistently center aligning items vertically.
For the parent container: display
display
This defines a flex container; inline or block depending on the given value. >It enables a flex context for all its direct children.
CSS.container { display: flex; /* or inline-flex */ }
For the child: align-items
align-items
This defines the default behaviour for how flex items are laid out
along the cross axis on the current line. Think of it as the
justify-content version for the cross-axis (perpendicular to the
main-axis).
CSS.container { align-items: flex-start | flex-end | center | baseline | stretch;}
Here is some code that has helped me vertically center images. It's usually a lot more tricky than horizontally centering.
#ID {
Margin:0 auto;
Position:absolute;
Left:0;
Right:0;
Top:50%;
Transform: translate(0, -50%);
Display:block;
}