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%;
}
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.
When I use display:block it doesn't want to work which was working before. When I inspect it shows me strike through on display:block. Now the buttons are positioned on the right side of the col, I'd need them to be positioned in the middle under the image.
html
<div class="sectionLight">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-12 col-lg-4">
<img class="img-fluid imgCenter" src="images/square.png">
<div class="row">
<div class="col-sm-12">
<button type="button" class="btn btn-danger btn-lg btnCenter" data-toggle="modal" data-target=".square-modal-lg">Prime</button>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<img class="img-fluid imgCenter" src="images/fibo.png">
<div class="row">
<div class="col-sm-12">
<button type="button" class="btn btn-danger btn-lg btnCenter" data-toggle="modal" data-target=".fibo-modal-lg">Fibo</button>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<img class="img-fluid imgCenter" src="images/square_copy.png">
<div class="row">
<div class="col-sm-12">
<button type="button" class="btn btn-danger btn-lg btnCenter" data-toggle="modal" data-target=".prime-modal-lg">Square</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.btnCenter {
display: block;
margin: auto;
margin-top: 15px;
margin-bottom: 20px;
width: 50%;
}
You probably have included another css script that overwrites your current one.
You can try to make it !important. If that doesnt work, you might have to make your selector more spesific than the one currently overwriting it.
.btnCenter {
display: block !important;
margin: auto;
margin-top: 15px;
margin-bottom: 20px;
width: 50%;
}
You can debug this in the dev-tools. See the example image below:
In this example, primary.css is higher in the css hierarchy (meaning the file primary.css is included later than stacks.css) Therefore, it will overwrite the selector.
I am trying to make a simple example where I have a row and inside that row is columns. One column is for the name of the left-hand side and on the right-hand side is the three buttons that exist. However, I am having issues placing the buttons properly on the right side as well as spacing them at an appropriate distance. I tried using the max-width in my CSS but I just ended up screwing up the project even more. Below is my HTML/CSS file:
#submitGPBtn {
margin-right: 30px;
}
<div class="row">
<div>
<h4> Group Pattern Test</h4>
</div>
<div class="mx-auto">
<button class="btn btn-primary">Save</button>
</div>
<div class="mx-auto">
<button class="btn btn-primary">Close</button>
</div>
<div class="ml-auto">
<button class="btn btn-primary" id="submitGPBtn">Submit</button>
</div>
</div>
You would want to use a btn-toolbar to group your buttons in-line.
#submitGPBtn {
margin-right: 30px;
}
<div class="row">
<div class="col">
Group Pattern Test
</div>
<div class="col">
<div class="btn-toolbar">
<button class="btn btn-primary">Save</button>
<button class="btn btn-primary">Close</button>
<button class="btn btn-primary" id="submitGPBtn">Submit</button>
</div>
</div>
</div>
This question has been answered well here. But here's an example below, add float-right class to your button bar, you can put a breakpoint in the class like float-sm-right but float-right works on any viewport width.
#submitGPBtn {
margin-right: 30px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col">
Group Pattern Test
</div>
<div class="col">
<div class="btn-toolbar float-right">
<button class="btn btn-primary">Save</button>
<button class="btn btn-primary">Close</button>
<button class="btn btn-primary" id="submitGPBtn">Submit</button>
</div>
</div>
</div>
In bootstrap ml-auto is fine to align buttons to the right, but you should apply it only to the first item after the "offset".
I added ml-1 to space the other buttons and a lightyellow background just to show where the container ends.
My personal suggestion when you use bootstrap is to code inside a container, you can't set its size to what you want but it prevents stretching in wide monitors.
.container {
background-color: lightyellow;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col text-left">
<h4> Group Pattern Test</h4>
</div>
<button class="btn btn-success ml-auto">Save</button>
<button class="btn btn-success ml-1">Close</button>
<button class="btn btn-success ml-1" id="submitGPBtn">Submit</button>
</div>
</div>
I am creating an angular application in which i have an detail page with a cardheader which consist of two buttons namely back and edit and both sides and a text in between.
I have used bootstap and set the columns like below.
But when i see the screen in mobile view the header is not aligned properly
Below is the code i am using. How could i fix it to view in a single line in mobile view
<div class="card-header">
<div class="row">
<div class="col-sm-3 col-lg-3 text-left">
<button size="sm" class="btn btn-primary" (click)="goBack()">
<i class="fa fa-chevron-left"></i> Back
</button>
</div>
<div class="col-sm-6 col-lg-6 text-center">
<h4>Switch Detail</h4>
</div>
<div class="col-sm-3 col-lg-3 text-right">
<button size="sm" class="btn btn-primary" (click)="gotoEdit()">
<i class="fa fa-pencil"></i> Edit
</button>
</div>
</div>
</div>
There is a couple of approach you can follow.
You could force the width of the container to stay constant on all views. Note that this can cause your text to overflow.
<div class="card-header">
<div class="row">
<div class="col-3 text-left">
<button size="sm" class="btn btn-primary" (click)="goBack()">
<i class="fa fa-chevron-left"></i> <span class="button-text"> Back
</span>
</button>
</div>
<div class="col-6 text-center">
<h4>Switch Detail</h4>
</div>
<div class="col-3 text-right">
<button size="sm" class="btn btn-primary" (click)="gotoEdit()">
<i class="fa fa-pencil"></i> <span class="button-text"> Edit </span>
</button>
</div>
</div>
</div>
You could use #media Query to hide the text on the buttons leaving only the icons on a mobile view.
#media screen and (max-width: 560px) {
button-text {
display: none;
}
}
Alternatively, you could reduce the font size of the title on mobile using the same approach in case 2 above.
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