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 )
Related
I want to acomplish something like this:
And so far after hours of learning bootstrap and playing with the grid system I managed to do this:
Code that I use:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-body">
<div class="row-fluid">
<div class="col-md-4">
<img class="img-responsive" src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTUxMDc1OTAzM15BMl5BanBnXkFtZTgwOTMwOTMyMDI#._V1_SY1000_CR0,0,674,1000_AL_.jpg" style="width: 130px; height: 200px">
</div>
<div class="col-md-8">
<div class="row">
<div class="text-title">Logan 2017</div>
<p>
Set in the future, Logan and Professor Charles Xavier must cope with the loss of the X-Men when a corporation lead by Nathaniel Essex is bent on destroying the world. With Logan's healing ...
</p>
</div>
<div class="row">
<button class="btn btn-warning btn-bold-text">IMDb</button>
<button class="btn btn-danger pull-right"><span class="glyphicon glyphicon-remove"></span></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
As you can see, I want to be able to maximize the picture to the size of the panel, make buttons stick to bottom and fix the margin of the text.
Can someone help me ? Thanks!
I don't need anyone to do the code for me, just tell me what should I be looking for. Is there any spacing between columns in bootstrap ? I tried playing with margins and paddings but no chance of acomplishing what I want.
https://jsfiddle.net/0jv537r0/1/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="well" style="position: relative; background: #fff;">
<div class="row">
<div class="col-xs-4">
<img class="img-responsive" src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTUxMDc1OTAzM15BMl5BanBnXkFtZTgwOTMwOTMyMDI#._V1_SY1000_CR0,0,674,1000_AL_.jpg">
</div>
<div class="col-xs-8">
<div class="text-title">Logan 2017</div>
<p>
Set in the future, Logan and Professor Charles Xavier must cope with the loss of the X-Men when a corporation lead by Nathaniel Essex is bent on destroying the world. With Logan's healing ...
</p>
</div>
</div>
<button class="btn btn-warning btn-bold-text" style="position: absolute; bottom: 20px; left: 33.33333333%;">IMDb</button>
<button class="btn btn-danger pull-right" style="position: absolute; bottom: 20px; right: 20px;"><span class="glyphicon glyphicon-remove"></span></button>
</div>
</div>
</div>
</div>
So, I changed it to a well instead of a panel since you wern't actually using any of the panel elements other than the border. My answer isn't 100% full proof, you'd want to bring the styles not inline and add specifics for different screen widths, but in a nutshell at least you can see what I did to accomplish your goal. You could also use flexbox and then keep the buttons inside the col-xs-8 because with felxbox you could make the height of the col-xs-8 element match the height of the image.
Your "problem" is a commong one. Placing elements at the bottom of a parent element. There is generally not an out of the box solution to accomplish this. You must use position absolute. This position elements based on their closest non static parent. You could do this on the col-xs-8 element but because it's height won't match that of the image, that won't work you need to move the buttons outside the column. (Columns by default in Bootstrap have a non static position).
Now there are countless ways to accomplish what you wanted I just chose the route closet to what you had. I might suggest the media object (http://getbootstrap.com/components/#media) native to bootstrap. Wrap the media element in a wrapper with a border and you should be close to what you want, but really, media, panel, wells they are all similar. That is why in Bootstrap 4 they have all been removed in favor of cards. You might be better off going with BS4 as well. It's getting closer and closer to release and I have a site fully done with the current alpha and it's pretty solid. We're about to push the project to production too.
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.
I am new to web development, particularly CSS and Bootstrap. I am struggling to center the set of 5 items in a Bootstrap row. Here is what I have:
<div class="container-fluid">
<div class="row text-center" style="border:2px solid green">
<div style="display:inline-block;float:none;vertical-align:top;margin-top:8px">My Label</div>
<div class="col-xs-2 col-sm-2 col-md-1"style="display:inline-block;float:none">
<input class="form-control" type="number"></input>
</div>
<div style="width:2%;display:inline-block;float:none"></div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-1"style="display:inline-block;float:none">
<button class="btn btn-default btn-block" role="button">Button1</button>
</div>
<div class="col-xs-3 col-sm-3 col-md-2"style="display:inline-block;float:none">
<input class="form-control" type="number"></input>
</div>
<div style="width:2%;display:inline-block;float:none"></div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-1"style="display:inline-block;float:none">
<button class="btn btn-default btn-block" role="button">Button2</button>
</div>
</div>
</div>
For the most part, it gives me the result I want in Firefox and Chrome. The controls are spaced a little and it is responsive -- the white space shrinks while the controls grow (in % of screen) as the screen gets smaller. Control widths are controlled via Bootstrap col-*-# classes. Though, IE seems to align the buttons at the bottom of the row for some reason. I'm not sure why.
Aside from defining custom CSS classes instead of style attributes, is this the correct/best way to achieve the result that I want? Or, is there a better way to do this in CSS or Bootstrap? It seems hackish to have to use vertical-align and margin to get the label to line up. Also, I started out using form elements and classes. But, that kept making things worse. What is the benefit of using the form element or downside to not using it?
I read numerous similar posts. But they all seemed to have something different enough that the solutions seemed to not fit what I am doing. I have a set of controls that I want centered as a unit. I do not want to simply snap them to the 12-column Bootstrap grid.
JSFiddle
You still can use a custom class when you need it :
.classname {
display: inline-block;
vertical-align: middle;
float: none;
}
I am using the grid system of bootstrap.
My HTML looks as follows (jade syntax)
form.form-horizontal(role='form', name='containerForm', id='containerForm', novalidate)
fieldset
.form-group
label.col-lg-2.control-label(for='ContType')
.col-lg-4
select.form-control(ng-model="data.ContainerType", id='ContType', name='ContType', ng-options='translate(s.name) for s in containerTypeList')
.form-group
(and so on)
The 'form-control' CSS class is taking 100% width of parent DIV (e.g. col-lg-4, these col-lg classes are effectively "table cells"):
.form-control {
display: block;
width: 100%;
}
I need however to display some HTML right before the SELECT above (or, alternatively, after). I need that HTML to be in the same line as the SELECT. If I simply enter something after the SELECT now, it goes to next line, due to width=100% of that SELECT.
How I can possibly achieve my goal while keeping bootstrap classes in place?
You could place both in a row, then put each item in it's own column. For example:
<div class="row col-sm-12">
<div class="col-sm-6">
<input type="text" class="form-control">
</div>
<div class="col-sm-6">
<button class="btn btn-primary">Demo</button>
</div>
Alternatively, you could use an input-group, for example:
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">Demo</button>
</span>
</div>
How do i set width of input in this case in bootstrap 3.0
Here is the example http://jsfiddle.net/6eBFz/
code
<div class="submit">
<div class="col-md-8 col-sm-8">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
<div class="col-md-4 col-sm-4">
<div class="input-group">
<input type="text" class="form-control ">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Add </button>
</span>
</div>
</div>
</div>
i am looking at the bootstrap way and not custom css
Bootstrap inputs take on the width of their container.
From the Bootstrap docs (http://getbootstrap.com/css/#forms-inline)..
"Inputs, selects, and textareas are 100% wide by default in Bootstrap.
To use the inline form, you'll have to set a width on the form
controls used within."
CSS: .set-width{ width: 50%; }
HTML: <div class="input-group set-width">
You can add a set-width method (call it whatever you want) on any div and then manually size it in your CSS. I wouldn't recommend adding style="width: 50%;" to code because it makes it less readable and makes it much harder to edit later on. Plus with making a CSS class you can reuse it on several input fields (or anything else that you want to be set to that width really! Width can be set in pixels, or in em.
Here is a helpful resource to understand CSS classes and ID's