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
Related
I was working with bootstrap and found out a weird issue. When using collapse button, page width is changed (changes to lower), when I press collapse again to hide the shown content, page is reset to normal. What can be causing the issue?
<a class="btn btn-icon btn-light" data-toggle="collapse" href="#article-content1" role="button" aria-expanded="false" aria-controls="article-content1">
<i class="fas fa-minus"></i>
</a>
<div class="collapse" id="article-content1">
<div class="card-body">
You can show or hide this card.
</div>
<div class="card-footer">
<div class="container-fluid">
<div class="row">
<div class="col-1">
<img alt="image" src="./assets/img/avatar/avatar.png" class="rounded-circle avatar-outline ml-autox" alt="" width="46" height="46" style="margin-top:-3px">
</div>
<div class="col-6 text-left">
<strong>Jasmine Snow</strong></br>
<span class="color-muted">November 11, 2020</span>
</div>
<div class="col-5"><!-- empty --></div>
</div>
</div>
</div>
</div>
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>
I have a Jumbotron with 2 divs, one to display text and one for an image. It works fine on very small and large screen but image overflows badly on medium to small. I would like the image to either shrink to suit or else vanish completely.
I have not made any changes to any #media.
Here is the code I have:
<div class="jumbotron">
<div class="container">
<div class="row">
<div class=" col-md-6 col-sm-12" >
<h1>Dive Gweedore </h1>
<p>A place of wonder and crystal clear water</p>
<p><a class="btn btn-primary btn-sm" role="button">
Durability</a>
<a class="btn btn-primary btn-sm " role="button">
Strength</a>
<a class="btn btn-primary btn-sm" role="button">
Brilliance</a>
</p>
</div>
<div class=" col-md-6">
<img class="showcase-image" src="http://localhost/shop/image/cache/catalog/hand.png">
</div>
</div>
</div>
</div>
Insert Bootstrap img-responsive class in your image.
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
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;
}
I'm trying to display two custom buttons in the same row and centered across the page. Currently, the buttons are showing on two different rows. Also, there has to be a better way of centering the buttons than with 'offset3'. Thank you in advance.
<div class = "container">
<div class="row">
<div class="col-sm-3 offset3">
<a href="/bat-times/week">
<button class="btn btn-red"> Test 1</button>
</a>
</div>
<div class="col-sm-3">
<a href="#">
<button class="btn btn-yellow" onclick="checkTime()">Test 2</button>
</a>
</div>
</div>
</div>
You simply use Bootstrap's default class .text-center and that's it, keeping in mind the sum of your columns must be 12 (unless you use a custom number of columns). See code below:
<div class="container">
<div class="row">
<div class="col-sm-6 text-center">
<a href="/bat-times/week">
<button class="btn btn-red "> Test 1</button>
</a>
</div>
<div class="col-sm-6 text-center">
<a href="#">
<button class="btn btn-yellow " onclick="checkTime()">Test 2</button>
</a>
</div>
</div>
</div>
And see Bootply. I have added some CSS for visualization purposes, but you don't need it at all, only the HTML part. And of course, you could use text-left, text-right, text-justify, etc. See Bootstrap Type Alignment for complete list
Try this:
TYPE 1
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6 row">
<a href="/bat-times/week">
<button class="btn btn-red pull-right">Test 1</button>
</a>
</div>
<div class="col-xs-6 col-sm-6 row">
<a href="#">
<button class="btn btn-yellow pull-left" onclick="checkTime()">Test 2</button>
</a>
</div>
</div>
</div>
DEMO1
TYPE 2
<div class="container">
<div class="row text-center">
<a href="/bat-times/week">
<button class="btn btn-red">Test 1</button>
</a>
<a href="#">
<button class="btn btn-yellow" onclick="checkTime()">Test 2</button>
</a>
</div>
</div>
DEMO2
I found in your code you are using col-sm-3 which is not applicable for smaller devices like mobile rather it will work for tablet and desktop etc. we know that bootstrap grid system has divided our device screen with 12 equal parts if we will use col-xs-6 for our both div then it will divide our device screen into two equal part whether it is a mobile or tablet... doesn't matter. Then I used bootstrap text-center class for making the inside element centered align, bootstrap center-align class which is nothing but text-align:center; in our plain css.
Try the below piece of code. Demo
<div class = "container">
<div class="row">
<div class="col-xs-6 text-center">
<a href="/bat-times/week">
<button class="btn btn-red"> Test 1</button>
</a>
</div>
<div class="col-xs-6 text-center">
<a href="#">
<button class="btn btn-yellow" onclick="checkTime()">Test 2</button>
</a>
</div>
</div>
</div>