This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I am trying to make paragraph center
I am using card
I am trying margin-left and margin-right and padding-left and padding-right but not work properly
I am trying to make paragraph one line below the service
<div class="card" style="width: 70rem;margin-top:120px;margin-left:120px;">
<div class="card-img-overlay d-flex flex-column">
<div class="row">
<img class="card-img-top" src="~/Graphics/homeiconservicepage.svg" style="width:25px;height:25px;" />
#ViewBag.text
</div>
<div class="justify-content-center d-flex">
<span> <text font-size:50px;"> #ViewBag.text </text></span>
</div>
<div class="justify-content-center d-flex" >
<p>
We enable organizations from startups to large enterprises
to make their work environment more efficient.
</p>
</div>
</div>
<img class="card-img-top" src="https://images.unsplash.com/photo-1552519507-da3b142c6e3d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" style="width:1200px;height:400px;" alt="Card image">
</div>
Current Output
I am on phone so I cannot use the snippet (Codepen: https://codepen.io/Maxigui/pen/NWrxwRg)
First thing would be to set flex-column in your card-img-overlay.
On last p I just set: class="mx-auto"
And if you want to set center, instead of align-items-center repoace that by justify-content-center (I did not do that)
I suggest you the below code:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="card" style="width: 70rem;margin-top:120px;margin-left:120px;">
<div class="card-img-overlay d-flex flex-column">
<div class="row">
<img class="card-img-top" src="~/Graphics/homeiconservicepage.svg" style="width:25px;height:25px;" />
#ViewBag.text
</div>
<div class="justify-content-center d-flex flex-column m-auto">
<span class="mx-auto"> <text style="font-size:50px;"> #ViewBag.text </text></span>
<p>
We enable organizations from startups to large enterprises
to make their work environment more efficient.
</p>
</div>
</div>
<img class="card-img-top" src="https://images.unsplash.com/photo-1552519507-da3b142c6e3d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" style="width:1200px;height:400px;" alt="Card image">
</div>
Use this:
<p text style="color:black;margin-top:180px;padding-right:150px;padding-left:150px;text-align: center">
We enable organizations from startups to large enterprises
to make their work environment more efficient.
</p>
Change the value of padding-right and padding-left according to your preference.
Set style="text-align:center". It works for me.
<p style="text-align:center"> We enable organizations from startups to large enterprises to make their work environment more efficient.</p>
#niskuremdir, How about this does this work?
<span style="color:black;margin-top:180px;text-align:center">
<p>
We enable organizations from startups to large enterprises to make their work environment more efficient.
</p>
</span>
Try doing this with and without the <p> </p> and also try with both <div> </div> and <span> </span>
If that works, then you can go ahead and try to add the left/right padding:)
You've to give width and height to parent container of text.
<div class="card" style="width: 70rem;margin-top:120px;margin-left:120px;">
<div class="card-img-overlay d-flex flex-column">
<div class="row">
<img class="card-img-top" src="~/Graphics/homeiconservicepage.svg" style="width:25px;height:25px;" />
#ViewBag.text
</div>
<div class="d-flex flex-column justify-content-center align-items-center w-100 h-100">
<div>
<span> <text font-size:50px;"> #ViewBag.text </text></span>
</div>
<div>
<p>
We enable organizations from startups to large enterprises
to make their work environment more efficient.
</p>
</div>
</div>
</div>
<img class="card-img-top" src="https://images.unsplash.com/photo-1552519507-da3b142c6e3d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" style="width:1200px;height:400px;" alt="Card image">
</div>
Related
I have the following bootstrap code with two columns as shown below. I would like to have the read more link at the bottom, aligned right. See image.
<div class="container-fluid">
<section class="section mt-5">
<div class="container">
<div class="row">
<div class="col-md-6">
<div>
<img alt="Web Studio" class="img-fluid" src="https://raw.githubusercontent.com/solodev/vertically-centering/master/images/vc-img-1.jpg" />
</div>
</div>
<div class="col-md-6 col-lg-5 ml-auto d-flex align-items-center mt-4 mt-md-0">
<div>
<h2>Module Studio</h2>
<p class="margin-top-s">Whether you’re a full stack web developer, content author, or business professional – Solodev gives you the power to build, customize, and manage modules to boost your website.</p>
Read More
</div>
</div>
</div>
</div>
</section>
</div>
If you are using Bootstrap 5 you can do it in this way:
Add position-relative in your col, as said by previous answer of Saeed Shamloo:
<div class="col-md-6 col-lg-5 ml-auto d-flex align-items-center mt-4 mt-md-0 position-relative">
And in the link class add position-absolute bottom-0 end-0 like this:
Read More
In this way you do not have to use external CSS code. You can find more information about bootstrap 5 position classes here.
So finally it will look like this:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid">
<section class="section mt-5">
<div class="container">
<div class="row">
<div class="col-md-6">
<div>
<img alt="Web Studio" class="img-fluid" src="https://raw.githubusercontent.com/solodev/vertically-centering/master/images/vc-img-1.jpg" />
</div>
</div>
<div class="col-md-6 col-lg-5 ml-auto d-flex align-items-center mt-4 mt-md-0 position-relative">
<div>
<h2>Module Studio</h2>
<p class="margin-top-s">Whether you’re a full stack web developer, content author, or business professional – Solodev gives you the power to build, customize, and manage modules to boost your website.</p>
Read More
</div>
</div>
</div>
</div>
</section>
</div>
If you make the parent element position: relative you can use position: absolute on child elements to position them within the parent element. This example should place the link one font-width away from the bottom right corner of 'container-fluid'.
.container-fluid {
position: relative;
}
.primary-cta {
position: absolute;
right: 1em;
bottom: 1em;
}
For more info, here's a breakdown of CSS Positioning from CSS-Tricks. The link opens to the section on Parent --> Child positioning.
You can do it by adding position-relative to your col and position-abosolute bottom-0 end-0 to your link, like this:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid">
<section class="section mt-5">
<div class="container">
<div class="row">
<div class="col-md-6">
<div>
<img alt="Web Studio" class="img-fluid" src="https://raw.githubusercontent.com/solodev/vertically-centering/master/images/vc-img-1.jpg" />
</div>
</div>
<div class="col-md-6 col-lg-5 ml-auto d-flex align-items-center mt-4 mt-md-0 position-relative">
<div>
<h2>Module Studio</h2>
<p class="margin-top-s">Whether you’re a full stack web developer, content author, or business professional – Solodev gives you the power to build, customize, and manage modules to boost your website.</p>
Read More
</div>
</div>
</div>
</div>
</section>
</div>
On large displays: I have an image horizontally aligned with 2 headers.
On small displays: I'm trying to stack the headers underneath the image, aligned vertically.
I suspect it has something to do with either margins, flex direction, some type of align property. Idk.. I've tried a bunch of things, maybe just not the right combination of things. It's possible i'm just having a brain fart or something. Here's the code:
<section>
<div class="container-md d-lg-flex align-items-center align-middle">
<img src="images\logo2.png" class="img-adjustment">
<div class="heading-wrapper">
<div class="display-4 montserrat text-nowrap heading-adjustment" style="">
Phoenix Master Meters
</div>
<h5 class="source-sans text-nowrap heading-adjustment">
Pipeline Consulting, Inspection, and Maintenance Services
</h5>
</div>
</div>
</section>
You can implement Bootstrap Grid, which then will handle display for large and small screens.
Then, remove text-nowrap class in elements inside heading-wrapper div.
This is one example
<section>
<div class="container-md d-lg-flex align-items-center align-middle">
<div class="row">
<div class="col-lg-2 col-sm-12">
<img src="images\logo2.png" class="img-adjustment">
</div>
<div class="col-lg-10 col-sm-12">
<div class="heading-wrapper">
<div class="display-4 montserrat heading-adjustment" style="">
Phoenix Master Meters
</div>
<h5 class="source-sans heading-adjustment">
Pipeline Consulting, Inspection, and Maintenance Services
</h5>
</div>
</div>
</div>
</div>
</section>
Media Query for bootstrap 4, unresponsive. I have two cards side by side in a section. When I get down to 576px I want to be able to display the cards side by side.
I've tried setting the parent containers to float: none and float: left. Also tried incorporating display: block on the Query.
<section id="recipeList">
<div class="recipeName"></div>
<div class="row">
<div class="col-sm-6">
<div class="card image-container">
<img class="card-img-top" src="./assets/images/Dish.svg"
alt="places restaurants png">
<div class="card-body ingredients" id="foodImage">
<p class="card-text"></p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card ingredients-card">
<img class="card-img-top"
src="./assets/images/Contents.svg" alt="places restaurants png">
<div class="card-body overflow-auto">
<h2 class="card-title"></h2>
<p class="card-text overflow-auto" id="facts"></p>
</div>
</div>
</div>
</div>
</section>
I would love for the two bootstrap cards to be responsive rather than just squeezing downwards
I got 3 news articles, each with its own image below. Problem is the text are quotes and varies in sizes. So they do not align, added height px which works for the Desktop version but when it goes to the mobile version the height is still obviously there and make a big weird gap between the articles.
<div style="padding-top:50px;" class="container">
<div class="card-deck">
<div class="col-sm-4">
<div class="card" style="margin:0!important;border:none;">
<div class="card-body">
<p style="text-align:center" class="card-text">"With an impressive and evergrowing number of studies finding CBD to be a powerful antioxidant and anti-inflammatory among many other properties, it is now being used to treat pain, anxiety, spasms, and much more"</p>
</div>
<img class="card-img-top" src="img\quote_pic1.png" alt="Daily Mail" style="width:50%;height:40px;margin:auto;">
</div>
</div>
<div class="col-sm-4">
<div class="card" style="margin:0!important;border:none;">
<div class="card-body">
<p style="text-align:center" class="card-text">“I think there is a legitimate medicine here,” he said. “We’re talking about something that could really help people.” Neurosurgeon Dr. Sanjay Gupta</p>
</div>
<img class="card-img-top" src="img\quote_pic2.png" alt="World Health Organization" style="width:50%;height:40px;margin:auto;">
</div>
</div>
<div class="col-sm-4">
<div class="card" style="margin:0!important;border:none;">
<div class="card-body">
<p style="text-align:center" class="card-text">Dr. Esther Blessing, an associate professor of psychiatry at New York University says current evidence suggests that CBD shows promise for helping to treat everything from Anxiety to PTSD</p>
</div>
<img class="card-img-top" src="img\quote_pic3.png" alt="The Washington Post" style="width:80%;height:40px;margin:auto;">
</div>
</div>
</div>
</div>
Mobile Version Big Gaps
I recommend removing the columns. You're in a card-deck, and you can set how many cards show per row/column in your CSS.
Additionally, I removed the margin:0!important;border:none; as 1) inline isn't great, and 2) this can be taken care of with built-in Bootstrap styles m-0 and border-0. Also text-center removes the need for inline centering on your <p> tags.
Here is the result... (images added so I can see how actual images appear)
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container pt-5">
<div class="card-deck">
<div class="card m-0 border-0">
<div class="card-body">
<p class="card-text tex-center">"With an impressive and evergrowing number of studies finding CBD to be a powerful antioxidant and anti-inflammatory among many other properties, it is now being used to treat pain, anxiety, spasms, and much more"</p>
</div>
<img class="card-img-top mx-auto" src="https://dummyimage.com/100x50/fff/000&text=LOGO" style="max-width: 40%;" alt="Daily Mail">
</div>
<div class="card m-0 border-0">
<div class="card-body">
<p class="card-text tex-center">“I think there is a legitimate medicine here,” he said. “We’re talking about something that could really help people.” Neurosurgeon Dr. Sanjay Gupta</p>
</div>
<img class="card-img-top mx-auto" src="https://dummyimage.com/100x50/fff/000&text=LOGO" style="max-width: 40%;" alt="World Health Organization">
</div>
<div class="card m-0 border-0">
<div class="card-body">
<p class="card-text tex-center">Dr. Esther Blessing, an associate professor of psychiatry at New York University says current evidence suggests that CBD shows promise for helping to treat everything from Anxiety to PTSD</p>
</div>
<img class="card-img-top mx-auto" src="https://dummyimage.com/100x50/fff/000&text=LOGO" style="max-width: 40%;" alt="The Washington Post">
</div>
</div>
</div>
I am doing an assignment for a Web Development course using css, html and bootstrap. I need to make a website and I am having some issues with the layout, I am using bootstrap cards (with images) within container and row div but the 3 cards in the row aren't aligned at the center of the col, there is some space left on the right side of the col as you can see in this screenshot.
This is my code:
<div class="container">
<div class="row ">
<div class="col-4">
<div class="card text-center " style="width: 18rem;">
<img src="imgs\products\cameras\1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Canon EOS Rebel T7</h5>
<p class="card-text">Price : Rs. 37000.00</p>
Add to cart
</div>
</div>
</div>
<div class="col-4">
<div class="card text-center" style="width: 18rem;">
<img src="imgs\products\cameras\2.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Fujifilm X-T3</h5>
<p class="card-text">Price : Rs. 34000.00</p>
Add to cart
</div>
</div>
</div>
<div class="col-4">
<div class="card text-center" style="width: 18rem;">
<img src="imgs\products\cameras\3.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Nikon D5600</h5>
<p class="card-text">Price : Rs. 43000.00</p>
Add to cart
</div>
</div>
</div>
</div>
</div>
I would like to know if there is any way to center align the card in the col div using css or bootstrap?
I would also like to know how to make all the card the same size (width and height) even if the images inside them are different sizes, as you can see in screenshot the last 2 cards are of different sizes because of the different image sizes.
To your first question:
Just use col-4 d-flex justify-content-center on your col definition.
By doing this, the card should be aligned in the middle of the col, see here.
Blue = container, purple = column, green = card.
Hope this works for you!