I can't figure out how I can align text next to each other inside a column. What I tried is:
<div className="row">
<div className="col-md-3 property">
<div className="card shadow">
<img className="card-img-top" alt="Image 1" src={("./Components/Images/slide-image1.jpg")}></img>
<div className="card-body">
<h5 className="card-title">Info</h5>
<div className="row">
<div className="col-md-6">
<h3>$ 500</h3>
</div>
<div className="col-md-3">
<span className="badge badge-warning">Villa</span>
</div>
<div className="col-md-3">
<button className="btn btn-details btn-sm text">View Details</button>
</div>
</div>
</div>
</div>
</div>
</div>
It is a nested row but I cant get it working.
How can I align $ 500 villa button next to each other?
You don't need those extra columns. Just put all the text inside your row and put float: left on the elements.
you can add this style
style="text-align:center;"
Related
i want to make one div right align , but not able keep it in right side in row. how to make the value 172.21 at right side in the row.
screenshot
HTML:
<div class="row">
<div class="col-md-6">
<h4>Status</h4>
<input type="checkbox" disabled checked data-toggle="toggle" data-onstyle="outline-success" data-offstyle="outline-danger">
</div>
<div class="col-md-3">
<h4>Max Demand </h4>
</div>
<div class="col-md-3">
<h4>172.21</h4>
</div>
</div>
If there is text, just "align-right"
If there is block, in BS3:
Add "pull-right" to the element container
In BS4:
"float-right"
E.g. in BS4:
<div class="row">
<div class="col-md-6">
<h4>Status</h4>
<input type="checkbox" disabled checked data-toggle="toggle" data-onstyle="outline-success" data-offstyle="outline-danger">
</div>
<div class="col-md-3">
<h4>Max Demand </h4>
</div>
<div class="col-md-3 float-right">
<h4>172.21</h4>
</div>
</div>
You just need add class in last column like: text-left text-md-right.
I hope below snippet will help you.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css">
<div class="container border">
<div class="row">
<div class="col-md-6">
<h4>Status</h4>
<input type="checkbox" disabled checked data-toggle="toggle" data-onstyle="outline-success" data-offstyle="outline-danger">
</div>
<div class="col-md-3">
<h4>Max Demand </h4>
</div>
<div class="col-md-3 text-left text-md-right">
<h4 class="btn btn-warning">545</h4>
</div>
</div>
</div>
Just for the text, add text-right class after col-md-3
and for the entire column, add pull-right class after col-md-3 if you're using bootstrap-3
and for bootstrap-4 add float-right instead of pull-right class.
I am trying to display 4 similar cards in a grid. I am able to create the columns however the card actions only apply to the first one. (On click, an overlay appears with a 'view details' button and a further description about the product).
On hovering over the other 3 cards, nothing happens. Only the first one works.
<div class="container_grid">
<div class="row">
<div class="col-3">
<div id="product-card" style="margin: 1rem">
<div id="product-front">
<div class="shadow"></div>
<img src="https://veenaazmanov.com/wp-content/uploads/2019/08/Chocolate-Birthday-Cake5-500x500.jpg" alt="" />
<div class="image_overlay"></div>
<div id="view_details">View details</div>
<div class="stats">
<div class="stats-container">
<span class="product_price">Ksh.500</span>
<span class="product_name">Chocolate Cake</span>
<p>Tasty cake</p>
<div class="product-options">
<strong>Available in</strong>
<span>1kg, 2kg, 3kg, 4kg, 5kg</span>
<button class="btn">Add To Cart</button>
<!-- <div class="cart_btn"><p>Add to Cart</p></div> -->
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-3">
<div id="product-card" style="margin: 1rem">
<div id="product-front">
<div class="shadow"></div>
<img src="https://veenaazmanov.com/wp-content/uploads/2019/08/Chocolate-Birthday-Cake5-500x500.jpg" alt="" />
<div class="image_overlay"></div>
<div id="view_details">View details</div>
<div class="stats">
<div class="stats-container">
<span class="product_price">Ksh.500</span>
<span class="product_name">Chocolate Cake</span>
<p>Tasty cake</p>
<div class="product-options">
<strong>Available in</strong>
<span>1kg, 2kg, 3kg, 4kg, 5kg</span>
<button class="btn">Add To Cart</button>
<!-- <div class="cart_btn"><p>Add to Cart</p></div> -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
What could be the problem?
Link to the full JFiddle https://jsfiddle.net/5yoerguh/1/
The problem is you use id for div, need change it to class
or use this selector $('.col-3 > div').hover(function(){}
https://jsfiddle.net/viethien/2nesgtLy/1/
So I have this code
<div class="row">
<a class="btn btn-default mainbutton pull-left">Back to Main Menu</a>
<img class="center-block" src="logo.png" />
</div>
It appears that the logo image is off-centered because it only takes the margin measurement after the button. How can I ensure that the button is aligned to the center?
You can put the button and the image in two different columns
Just like
<div class="row">
<div class="col-md-4">
//your button code
</div>
<div class="col-md-4">
//your image code
</div>
<div class="col-md-4">
//some other stuff
</div>
</div>
You could try a break in between like:
<div class="row">
<a class="btn btn-default mainbutton pull-left">Back to Main Menu</a>
<br/>
<img class="center-block" src="logo.png" />
</div>
After ensuring your image is positioned below your button, you should be able to follow the instructions in How to vertically align an image inside a div? if you need help aligning content inside a div.
I would break it up into 3 equal columns to make it easier.
Then you can use text-center:
<div class="row">
<div class="col-sm-4">
<a class="btn btn-primary">Back to Main Menu</a>
</div>
<div class="col-sm-4 text-center">
<img src="logo.png" />
</div>
<div class="col-sm-4"></div>
</div>
I'm trying to make my cards (panels) set next to each other and I'm using the templates at mdbootstrap.com.
My code:
<div class="row">
<div class="col-md-12">
<div class="card mdb-color lighten-2 text-center z-depth-2">
<div class="card-body">
<p class="white-text mb-0"> <?php echo convertCurrency("1.00", "POUND", "DOLLAR");
?>.</p>
</div>
</div>
<Br>
<div class="card mdb-color lighten-2 text-center z-depth-2">
<div class="card-body">
<p class="white-text mb-0">btc<i class="fa fa-bitcoin" aria-hidden="true">
</i> = <?php echo $info['rate'];
?></p>
</div>
</div>
</div>
</div>
I tried to give it a class of d-inline but it's not working...
The cards I'm using https://mdbootstrap.com/components/panels/
Just in case someone is looking at this, an easy way to do it is to use the card-deck class. So, for example:
<div class=card-deck>
<!-- First Card -->
<div class="card">
<div class="card-title">Title here</div>
<div class="card-body">Body here</div>
</div>
<!-- Second Card -->
<div class="card">
<div class="card-title">Title here</div>
<div class="card-body">Body here</div>
</div>
</div>
Just remember that all the cards go in the card-deck div. A drawback of this is if you have lets say 6 cards, it'll put all of the cards on the same line instead of breaking them up in multiple lines. Whenever I want cards to be on multiple lines I just use another card-deck. Hope this helps someone, cheers.
One way of doing what you want is to put both cards in two separate columns, each, i.e each box card should be inside a div with class col-md-6.
The following code shows two cards, side by side in desktop browser window size.
<div class="row">
<div class="col-md-6">
<div class="card mdb-color lighten-2 text-center z-depth-2">
<div class="card-body">
<p class="white-text mb-0">واحد جنيه سوداني = <?php echo convertCurrency("1.00", "SDG", "USD")." دولار امريكي";?>.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card mdb-color lighten-2 text-center z-depth-2">
<div class="card-body">
<p class="white-text mb-0">بتكوين <i class="fa fa-bitcoin" aria-hidden="true"></i> = <?php echo $info['rate']." جنيه سوداني";?></p>
</div>
</div>
</div>
</div>
I am usually able to do this. But for some reason everything I've tried just isn't working.
I've tried
<div class="row">
<div class="col-md-8">
<button>Toronto</button>
<button>Markham</button>
<button>Petawawa</button>
</div>
<div class="col-md-4">
<p>date</p>
<p>date</p>
<p>date</p>
</div>
</div>
And similar variations, but I can't seem to get the date and the event location to line up.
The code where the issue is occuring:
<div id="Location">
<div class="container">
<div class="row">
<div class="col-md-6 col-xs-12 aboutCopyContainer">
<p class="copyHeader" style="font-family: testFont;">Locations</p>
<p class="faqContent">Fall for the FEAST at an event near you!</p>
<div class="row">
<div class="col-md-6">
<div class="btnLocationCont">
<button class="btn btn-primary btn-lg locationBtn locationButtonText" style="font-family: AvenirNextLTPro-Condensed;" onclick="window.location.href='http://convio.cancer.ca/site/PageNavigator/UFE_ON_Oktoberfeast_Toronto.html'">Toronto</button>
<div class="locationDateCont">
<p class="locatDay eventTimeBut">14</p>
<hr style="margin:0px;" />
<p class="locatMonth eventTimeBut">Oct</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="btnLocationCont">
<button class="btn btn-primary btn-lg locationBtn locationButtonText" style="font-family: AvenirNextLTPro-Condensed;" onclick="window.location.href='http://convio.cancer.ca/site/PageNavigator/UFE_ON_Oktoberfeast_Petawawa.html'">Petawawa</button>
<div class="locationDateCont">
<p class="locatDay eventTimeBut">7</p>
<hr style="margin:0px;"/>
<p class="locatMonth eventTimeBut">Oct</p>
</div>
</div>
<div class="btnLocationCont">
<button class="btn btn-primary btn-lg locationBtn locationButtonText" style="font-family: AvenirNextLTPro-Condensed;" onclick="window.location.href='http://convio.cancer.ca/site/PageNavigator/UFE_ON_Oktoberfeast_Markham.html'">Markham</button>
<div class="locationDateCont">
<p class="locatDay eventTimeBut">22</p>
<hr style="margin:0px;"/>
<p class="locatMonth eventTimeBut">Oct</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here is the JS Fiddle of what's happening:
JSFiddle
and this is the website (under Locations section) to give you a better idea of what I'm trying to do (css styling etc applied).
Oktoberfeast Locations
Any suggestions are greatly appreciated! thank you for your time
You added fixed width inside bootstrap column child. And that width together with other element width exeeded bootsrap column width, so the class locationDateCont appeared underneath:
So, in your CSS file, remove that width from that class, and add this:
.btnLocationCont {
width: auto;
}
Hope this helps!
You probably don't want to do this that way. Reason being is on mobile devices they won't match up.
To keep them together and display on desktop and mobile you could do something like this:
<div class="row">
<div class="col-md-4">
<button>Toronto</button>
<p>date</p>
</div>
<div class="col-md-4">
<button>Markham</button>
<p>date</p>
</div>
<div class="col-md-4">
<button>Petawawa</button>
<p>date</p>
</div>
</div>
Fiddle:
https://jsfiddle.net/8t5mjhf8/4/
EDIT: To make sure the p's stay next to the buttons you need the following CSS. You will want to assign a class to the p's as to no interfere with other paragraphs.
p {
display: inline;
}