I have a column with a 230x320 placeholder class='img-responsive' image inside it. the image is 230x320, but the column width is col-md-3.
The issue is that the image width is smaller then the column width, so space is left over to the right. Also, when the column is changed to col-md-2, the image turns responsive, thus displays the image smaller than the 230x320 size.
Is there a way to keep this column responsive, but decrease the width of the column, but keep the default bootstrap padding on the right?
Here is the image like so:
I have added the snippet code, but bootstrap is not working, maybe I have my links where they are not suppose to be?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class-="col-md-12">
<form>
<div class="form-group">
<label for="profilephoto" class="col-sm-2 control-label custom-label">Profile Photo</label>
<div class="col-md-3 profile-img"><img src="http://placehold.it/230x320" alt="profile-img" class="img-rounded img-responsive"></div>
<div class="col-md-3">
<img src="http://placehold.it/130x130" alt="avatar" class="img-circle">
<div class="caption">Avatar</div>
<button type="button" class="btn btn-primary btn-md outline btn-block upload-btn">
<span class="glyphicon glyphicon-plus"></span>Upload photo
</button>
</div>
</div>
</form>
</div>
</div>
</div>
Bootstrap's behavior is appropriate based on your markup. From the Bootstrap documentation on the img-responsive class [link]:
This applies max-width: 100%;, height: auto; and display: block;
to the image so that it scales nicely to the parent element.
The behavior you need is not max-width: 100%; but rather width: 100%;, which will scale the image to the full width of the parent element.
This codepen demonstrates the override, however in the final product I recommend adding a custom CSS class to the img tag.
Related
I'm using a grid with two rows with the first being fixed to the top of the screen via sticky-top and the second with min-vh-100 so that it fills the remaining height on the screen. Content will be dynamically added to the innerHTML of the second row and I want the user to always have the first row visible as the overflow is handled automatically by a scrollbar.
The first issue is that it creates a scrollbar on document load/ready and you can scroll down so that some of the content (which I think is determined by the stick-top height) in the second row is "hidden" behind the first row. I think this is because of the sticky-top but not sure how to fix it. A scrollbar should only be made if there is overflow in the second row when content is added. I should not be able to scroll down so that content is lost behind the first row.
The second issue is that I want the scrollbar to automatically scroll as content is added to the second row. I tried playing around with the body's scrollTop and scrollHeight but couldn't get it working. In the Codepen example, I should not be able to scroll down so that "Hello" is hidden.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
label:hover {
background: LightGray;
cursor: pointer;
}
</style>
</head>
<body class="bg-light">
<div class="container-fluid">
<form name="form" enctype="multipart/x-www-form-urlencoded" action="/execute" method="post">
<div class="row">
<div class="col">
<div class="row pt-2 pb-4 align-items-center justify-content-center bg-light sticky-top">
<button class="submitbutton btn btn-info" type="submit" name="Help" value="Help">Help</button>
<div class="ml-4 mr-4">
<input class="form-control mt-2" type="text" name="Textbox">
</div>
<button class="submitbutton btn btn-success mr-4" type="submit" name="Go" value="Go">Go</button>
<button id="cancel" type="button" class="btn btn-dark">Cancel</button>
</div>
<div class="row bg-dark">
<code class="pl-4 text-white min-vh-100">Hello</code>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
Codepen
I would like to keep the use of the rows and columns because it's part of a larger grid.
The solution I would use (if I'm following you properly) is adding
min-height: calc(100vh - 78px); // Change the px to whatever the sticky-top is
Codepen
You can override the default bootstrap css as:
codepen: https://codepen.io/Rishab2019/pen/rNOGBEz
.bg-light{
position:relative!important;
}
The main page of an html and css learning project has 3 columns using the bootstrap 3 classes. The first contains a text and a button to copy this text to the clipboard. The second and third have a link.
I tried to configure with the codes below.
Here is a fiddle: https://jsfiddle.net/buhvm3o8/4/
html code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row-fluid">
<div class="col-md-4">
<div id="select_txt" class="alert alert-success">
<strong>some text do copy</strong>
<button class="btn btn-secondary btn-sm" type="button" onclick="copy_data(select_txt)" style="float: right;">
<i class="glyphicon glyphicon-copy"></i>copy</button>
</div>
</div>
<div class="col-md-4">
<div class="alert alert-success">
site1
</div>
</div>
<div class="col-md-4">
<div class="alert alert-success">
site2
</div>
</div>
</div>
</div>
css code:
body {
font-family: "roboto", monospace;
height: 100%;
}
.alert-success {
width: 100%;
min-height: 100%;
text-align: center;
}
My questions are:
How can I set the "col-md-4" correctly so that it is as a column, because as shown in the image below, it is as a row.
How can I set the "col-md-4" to the screen height of anyone looking at it.
Use Bootstrap's Grid system to ensure that your columns are always the proper width. Right now they are set to be 12 units long when the screen size is below medium, and 4 units long at any greater size. Instead, you should have col-xs-4 on you class to force it to be 4 units at every screen size.
The easiest method would be to use the vh unit in CSS. Add a class to the column in question and set the height to height: 100vh which corresponds to 100% of the view height.
Other methods include using Flexbox to force the page width, or the
always troublesome 100%
height attribute. In most cases, in order for 100% height to work, you will
need either (a) all parents of the element to have their height set
to 100% or (b) the direct parent to have a statically defined height
Your fiddle with the updated values and the 100% height method
try adding xs breakpoint for smaller screens:
body {
font-family: "roboto", monospace;
height: 100%;
}
.alert-success {
width: 100%;
min-height: 100%;
text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row-fluid">
<div class="col-xs-4">
<div id="select_txt" class="alert alert-success">
<strong>some text to copy</strong>
<button class="btn btn-secondary btn-sm" type="button" onclick="copy_data(select_txt)" style="float: right;">
<i class="glyphicon glyphicon-copy"></i>copy</button>
</div>
</div>
<div class="col-xs-4">
<div class="alert alert-success">
site1
</div>
</div>
<div class="col-xs-4">
<div class="alert alert-success">
site2
</div>
</div>
</div>
</div>
That's the expected behavior of columns in Bootstrap! They collapse when the device's width get shorter. Try expanding your fiddle's preview width and it turns back into a column. That's how we can create responsible websites w/ bootstrap. If you want to dig deeper into it, I suggest reading bootstrap's grid system manual. Instead of column-md-4 you may use col-4 and it will be shown as a column independently of your device's width, for example.
I recommend reading this question. The way height works in CSS is slightly different than width, so what you need is to set a reference on either your html or body tags.
I have a bootstrap row containing a header tag and a link tag. They are aligned on the same row when the screen width is less than 768 pixels. When the container width is 768 or greater the link element shifts a few pixels higher.
Here is an example that demonstrates this behaviour: https://jsfiddle.net/bz3399x8/
<div class="row">
<div class="col-sm-12">
<a class="btn btn-primary" href="#" style="width: 80px; float: right;">
<i class="icon-plus">
Add
</i>
</a>
<h1>
Hello World
</h1>
</div>
</div>
Here are screenshots demonstrating this behaviour.
There are two issues:
what is causing this?
how to i fix this?
your syntax according to Bootstrap Docs is wrong,
it needs the .container to wrap .row
and
h1 and a button elements needs to be wrapped in Bootstrap columns.
So, you can use .col-sm-10 + .col-sm-2 in this case.
Added .col-xs for demo
.row {
/* demo*/
background:red
}
.btn {
margin-top:20px /* choose as it fit you better */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-10 col-sm-10">
<h1>
Hello World
</h1>
</div>
<div class="col-xs-2 col-sm-2">
<a class="btn btn-primary" href="#">
<i class="icon-plus">
Add
</i>
</a>
</div>
</div>
</div>
While wrapping elements in different column will help answer your problem. If you are looking at wrapping both elements inside single column you need to specify elements to be inline. Problem is occurring since h1 element and a element even though in same row for bootstrap but are displayed as block and inline-block.
Add display: inline-block to h1 element with top padding to a element. This should answer it as well.
Try it with display: inline on h1 see the difference in behavior. inline element dont support vertical margins.
Fiddle: https://jsfiddle.net/dk_dragonknight/m8ey6mba/
Here is my code using latest bootstrap v3
/*here is the specialjum class in css*/
.specialjum {
background: #1F72B8;
background-size: cover;
min-height: 600px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet" />
<div class="jumbotron specialjum">
<div class="row">
<h6 class="text-center" style="position: relative; left: -200px;"><img src="~/Images/logo.png" /></h6>
</div>
<div class="col-lg-6 col-lg-offset-4">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div>
</div>
</div>
No other bootstrap has been modified.
Now when I use the code above, the button gets pinned to the input field as expected and the input-group gets centered in the jumbotron div tag
however if I replace the span button after the input text
the button is way off to the right.
here is the following code for tat
.specialjum {
background: #1F72B8;
background-size: cover;
min-height: 600px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet" />
<div class="jumbotron specialjum">
<div class="row">
<h6 class="text-center" style="position: relative; left: -200px;"><img src="~/Images/logo.png" /></h6>
</div>
<div class="col-lg-6 col-lg-offset-4">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
</div>
</div>
Notice the only difference is where the button is located before or after the input tag.
NOTE: Bootstrap V3 - with no modifications
Please help and thank you =)
Bootstrap 3 is a mobile-first framework, I bring this up because I noticed you used the col-lg-* class with its offset variant. The col-lg-* classes were specifically made for very large displays. One that will not be often used by your users. If you were using Bootstrap as a boilerplate without any interest on responsiveness, then the col-md-* classes are the ones that will help you most. But if you were coding for responsiveness, you should always start by declaring the mobile sizes first and work your way up. The way Bootstrap 3 was intelligently designed, unless the layout changes, you don't need to declare the larger devices because it will take your smaller devices declarations as a rule.
For instance,
If you coded something col-xs-12, it will be 12 columns span all the way to desktop.
If you coded something col-xs-6, it will be 6 columns span all the way to desktop
If you coded something col-md-6, you will get that at desktop, but most likely your tablets will be 12 column span, and your mobile devices will be most definitely 12 column span. It will always default to 12 columns on mobile unless directed otherwise.
With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, Bootstrap is mobile first. Mobile first styles can be found throughout the entire library instead of in separate files. - Bootstrap docs
So with that in mind, try to start with the col-xs-* first.
Ok, now, to your centering problem and (not assuming you are coding for responsiveness, but for desktop only) All you need to do is adjust your classes like this:
Instead of this
<div class="col-lg-6 col-lg-offset-4">
Use this
<div class="col-md-6 col-md-push-3">
If you want to make full use of responsiveness, do the following:
<div class="col-xs-12 col-sm-6 col-sm-push-3 col-md-6 col-md-push-3">
See my DEMO
What is the exact version of Bootstrap that you use? Sorry, I wanted to ask this as a comment but I couldn't post one due to low rep.
For Bootstrap 3.3.6
Just give the .input-group specific width and margin: 0 auto; and you are good to go, e.g.
.input-group {
width: 20%;
/* Works for px values too */
margin: 0 auto;
}
.specialjum {
background: #1F72B8;
background-size: cover;
min-height: 600px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" />
<div class="jumbotron specialjum">
<div class="row">
<h6 class="text-center" style="position: relative; left: -200px;"><img src="~/Images/logo.png" /></h6>
</div>
<div class="col-lg-6 col-lg-offset-4">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
</div>
</div>
The above works for both occasions of html markup you provided.
See working fiddle ( All occasions included in fiddle: both html markups with px and % values for width of .input-group )
I have my page structured into 3 different modules: navigation on the left, images in the center, and social sidebar right. Below is the css that formats this content. I'm having trouble when I resize the window; the images in the center overlap with the navigation on the left and the sidebar gets pushed to the bottom of the page and overlaps with the end of the left navigation. The navigation module/sidebar is fixed.
I'm using twitter bootstrap as a base.
Any ideas on what's causing this and how to fix this?
css
div.sidebar{
width: 120px;
position:fixed;
top:12%;
left:2%;
overflow-y:auto;
height:100%;
}
html
<div class ="container-fluid">
<div class = "row-fluid">
<!-- left navigation div -->
<div class = "span1" style = "width:120px;">
<div class = "sidebar" >
#navigation
</div>
</div>
<!-- middle images div -->
<div class = "span8" style = "width: 900px;">
#lot of images
</div>
<!-- social sidebar -->
<div class = "span2" style = "margin-left: 10px; ">
#social module with images
</div>
</div>
</div>
when I make the window smaller
normal
Have you thought about responsive web design?
You say your using twitter bootstrap? Have a look at this:
http://twitter.github.com/bootstrap/scaffolding.html#responsive
Add this to the head
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
Change the HTML:
<div class="container-fluid">
<div class="row-fluid">
<!-- left navigation div -->
<div class="span4">
<div class = "sidebar" >
#navigation
</div>
</div>
<!-- middle images div -->
<div class="span6">
#lot of images
</div>
<!-- social sidebar -->
<div class="span4">
#social module with images
</div>
</div>
NOT TESTED. Im also not 100% how big the fluid container is, i think its 12, if its 16 you will have to change the spans so they add up to 16
Couple issues I see...
You are completely defeating the purpose of ".row-fluid" and the framework by adding widths?? Remove all width assignments to the grid elements (ie. .container, .row, .span(x)) and let the framework do what it was designed to do...create the width for you. If you need to adjust width from what is being generated, add it to block level element INSIDE of the .span(x).
Your span HAVE to add up to NO MORE than 12. You have 14 which will absolutely make the last wrap around.
Overriding the spans with inline widths will cause odd behavior. Can you use the default TBS scaffolding instead?
Suggestions :
1.Remove all the extra things you put for style let bootstrap do the things !!
2.always test your div with "well"
Put your codes like this
<div class="container">
<div class="row" style="margin-top:20px;">
<div class="col-lg-3 col-sm-12 ">
<div class="well"></div>
</div>
<div class="col-lg-3 col-sm-12 ">
<div class="well"></div>
</div>
<div class="col-lg-3 col-sm-12 ">
<div class="well"></div>
</div>
<div class="col-lg-3 col-sm-12 ">
<div class="well"></div>
</div>
</div>
col-lg-* for large device
col-xs-* for extra small device
col-sm-* for small device
use it like this you can achieve what you want
Plunker demo
resize your browser to view the effect