I try create a card with bootstrap+animate.css
PLEASE check with google chorme last version:
<div class="shop-card well">
<h3>title 1</h3>
<a href="/">
<figure class="figure">
<img class="figure-img img-fluid img-rounded" src="http://wewswiderska.home.pl/images/3dspace.html-i1.png">
</figure></a>
<div class="price">1234 <span class="symbol">R</span>
<del>5678</del>
</div>
<form class="hide buys" id="inform-ordering-5" name="inform-ordering-5" role="form" style="overflow: hidden;position: absolute;left:-1px;width: 100%; bottom: -1px;">
<div class="btn-group btn-group-justified">
<a class="btn btn-danger" data-target="#phoneModal" data-toggle="modal" href="#">modal</a>
</div>
</form>
</div>
I want When I move my mouse over the card, A red button appears. And then disappear.
ّI done it.
ّNow when I click on the button, It opens a modal box.
I done it!
But this is my problem:
when I close the modal box, contaners of card floats to left!
here is a demo: https://jsfiddle.net/1pyeg7w2/
I couldn't solved it.
I wrapped your div.shop-card.well content with another div with position:relative rule and it seems to be working
<div class="shop-card well">
<div style="position:relative">
your content here
</div>
</div>
Related
I have a link button that I need to place to the right of a div. Adding float-left on the div and float-right on the link button does not do it. What am I doing wrong?
https://jsfiddle.net/3v2s4c50/
<div class="container">
<div class="row">
<div class="col">
<div class="card">
<div class="card-header">Today and Tomorrow</div>
<div class="card-body">
<div class="float-left">Someone somewhere is waiting for you.</div>
<a role="button" href="google.com" class="float-right btn btn-primary"> Login</a>
</div>
</div>
</div>
<div class="col">
2 of 2
</div>
</div>
</div>
remove floats and add:
.card-body{
display: flex;
justify-content: space-between;
align-items: center;
}
<div class="card-body d-flex">
<div class="flex-fill">Someone somewhere is waiting for you</div>
<a role="button" href="google.com" class="flex-fill btn btn-primary"> Login</a>
</div>
Well, it is doing it. But the portion of the screen that is showing the results is not wide enough to show both the div with the text and the button in the same row.. then it breaks down.
If you change the text to something smaller, like 'Someone is waiting' you can see the button floating right :)
You can also set a fixed width for your text div (currently it is expanding based on the content).
<div class="card-body">
<div class="float-left" style="width: 50%;">Someone somewhere is waiting for you</div>
<a role="button" href="google.com" class="float-right btn btn-primary"> Login</a>
</div>
You can add your link to a div with any class. Then add style "text-align: right;" into your div like this:
.my-link {
text-align: right;
}
.
<div class="my-link">
<a role="button" href="google.com" class="float-right btn btn-primary"> Login</a>
</div>
.
I hope this will be useful.
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>
Whenever I open a modal from Materializecss, the scrollbar (my body has inline scrollbar) hides everytime. What should I do so that whenever I open a modal, the body's scrollbar will remain?
<body>
<div id="modal_confirm_block" class="modal modal_dialog">
<div class="modal-content white" id="modal_confirm_co_content" style="padding:0px !important;">
<div id="div_available" class="center-align" style="padding: 20px !important;"> <i class="material-icons md-12 noselect center-align amber-text darken-4" > warning</i><br>
<p style="padding:20px !important;" class="center-align"> Are you sure you want to block this guest? </p>
</div>
</div>
<div class="modal-footer">
<div class="row" style="margin: 0 !important;">
<div class="col s6"> Confirm</div>
<div class="col s6"> Cancel</div>
</div>
</div>
</div>
</body>
Screenshot before opening a modal
Screenshot when a modal opens. Look at the scrollbar it was removed. And I don't like that because the screen always move.
for me, it worked by putting it that way in the css.
body {
overflow: scroll !important
}
I'm trying to create a responsive splash page, but it's not responding, no matter how much I try to manipulate it. What I'm mostly trying to do is fit the image with no margin or padding. I want it similar to Adele's mobile site. Also, I'm not sure if the code is clean and I'm naming the classes correctly. I created a codepen so you can check it out there.
<div class="featurette">
<img class="featurette-image img-responsive pull-left center-block" src="http://www.placehold.it/400/F84065/000" alt="#">
<div class="purchase-album">
<div class="album">
<img class="img-responsive" src="http://www.placehold.it/200/fa8ca2" />
<div class="lead">available now:</div>
</div>
<div class="space">
</div>
<p class="lead text-center available "></p>
<a href="#" target="_blank">
<button type="button" class="btn btn-default btn-lg outline" type="submit">iTunes</button>
</a>
<a href="#" target="_blank">
<button class="btn btn-default btn-lg outline" type="submit">loudr</button>
</a>
</div>
</div>
<div class="enter">
<button type="button" class="btn btn-default btn-lg outline" type="submit">
enter
</button>
</div>
</div>
Adeles page is a background image with the content displayed on top.
You can achieve this in many ways.
Try using this and playing about with the CSS to get everything in the desired place.
codepen here example
<header>
<div class="overlay">
<div class="header-content">
<div class="header-content-inner">
<h1>Your image here</h1>
<p>buttons here etc</p>
</div>
</div>
</div>
Shrink the page to see the responsive-ness
I am making a webpage with an image below a button, with a link next to it. When I added the image, the button and link shifted next to the image, I want them to stay above it. This is my code:
<div class="jumbotron-inner text-center">
<h2>Random Text</h2>
<a href"#" class="btn btn-info btn-large">Button</a>
<a href"#">Link</a>
<img src="img/image.png" alt="" />
</div>
Try this:
<div class="jumbotron-inner text-center">
<h2>Random Text</h2>
<div>
<a href"#" class="btn btn-info btn-large">Button</a>
<a href"#">Link</a>
</div>
<div>
<img src="img/image.png" alt="" />
</div>
</div>
Now it should work as you wanted
You can do it also using css-
a {
display:block;
}