I need one div which should be aligned to right on desktop view, but when it comes to responsive, then it should aligned to left or center.
<div class="container">
<div class="row">
<div class="col-md-4 text-right">Name:</div>
<div class="col-md-4">
<input class="form-control" type="text">
</div>
</div>
</div>
Here div for label 'Name' is my target.
My test platform, please change the view to mobile view here
In desktop view I need the div content on right side(near to textbox). I have used 'text-right' to achieve this(this may not required).
In mobile view(below img) the div content is on right side(this because of 'right-text'). But I need it in left side.
Without 'text-right', it would be like(below img), in my code I added 'text-right' in order to make it on right side(which may not needed).
Target: I need the div content on right side for desktop view, when it goes to mobile view I need it in left side. Please ignore the text-right in my code
You could use a media query, in this example I'm assuming it would be positioned absolute.
.container{
position: absolute;
right: 0px;
width: 400px;
}
#media screen and (max-width: 1000px) {
.container{
right: auto;
left: 50%;
margin-left: -200px;
}
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-4 ">Name:</div>
<div class="col-md-4 col-md-pull-4">
<input class="form-control" type="text">
</div>
</div>
</div>
Try this. :)
Related
I have created a header div as follows:
<div class="header">
<div class="row">
<div class="col-lg-2 col-sm-2 col-xs-2 col-md-2">
<img class="img-responsive" src="logo.png"/>
</div>
</div>
</div>
Here is the header class:
.header {
background-color: #5DBCD2;
height: 10%;
}
Even though the div's max height is restricted to 10%, the image exceeds this.
Can someone please help
Add the following to your CSS so that you can have the image contained within the div nicely as it scales down.
.header img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
You can also add overflow: hidden; to the header element but that will cut it off rather than scale it, but it is another potential option.
I am not sure if it will be to any help, but try to add a max-height to the image in CSS.
EDIT
You could add this in the CSS (so that the image has 10% of the width of the parent):
.img-responsive {
width: 10%;
}
I tried your code with an image of 2000 x 1522 pixel dimensions.
Worked fine.
Few things you can do:
1) Debug your page using Developer tools in the browser.
2) Check if your css file path is correct.
3) Check for any errors in console part of the developer tools.
In your above code bootstrap before declaring row you must first declare container you should have something like this below
<div class="header">
<div class="container">
<div class="row">
<div class="col-lg-2 col-sm-2 col-xs-2 col-md-2">
<img class="img-responsive" src="logo.png"/>
</div>
</div>
</div>
</div>
Probably this should work
TB3 here. Here is the respective jsFiddle. I am trying to build a little minitron (mini jumbotron) that has the following layout:
As you can see, there is a main <div> given the minitron class. Each 'minitron' has:
An icon (Glyphicon)
A name
A description
A 'Learn More' button
Unfortunately my CSS-fu is pretty weak, and as you can see in that fiddle, I'm just not achieving the desired layout.
Here's my attempt at some CSS rules:
.minitron-icon {
width:20%;
height: 20%;
margin: 5px;
}
.minitron-name {
font-size: 18px;
}
.minitron-desc {
width: 80%;
margin: 5px;
}
.minitron-learnmore {
width: 95%;
}
Can anyone spot where I'm going awry?
What about this one? https://jsfiddle.net/oh69hq71/17/
Taking advantage of BS grid system using rows and columns. The first row containing the glyphicon and name/description, the other one with the learn more full width.
<div class="well minitron">
<div class="row">
<div class="col-xs-2">
<span class="glyphicon glyphicon-piggy-bank minitron-icon"></span>
</div>
<div class="col-xs-10">
<div class="row">
<span class="minitron-name">Some Name</span>
</div>
<div class="row">
<span class="minitron-desc">A short meaningful description goes here.</span>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button class="minitron-learnmore btn btn-success" type="button">LEARN MORE ABOUT JUPITER!</button>
</div>
</div>
</div>
*Update:
Increasing glyphicon size: In the glyphicon span set its style as "font-size:1.5em;"
To align it closer to name and description, add the style="text-align:right" at the glyphicon div container
The description is aligned to the named without the original css styles.
To increase padding (or margin) between the learn more button and description/icon, increase the learn more div top margin
New fiddle: https://jsfiddle.net/oh69hq71/18/
I am building an app that uses Bootstrap. I want this app to have a footer. The footer needs to "stick" to the bottom. In other words, if the content is larger than the height of the screen, the footer should still be visible, the content goes under it. If the content takes less than the height of the screen, I still need the footer to stick tothe bottom. I tried using the sticky footer. However, that doesn't work. Currently, I am trying the following:
Here's My Plunker
My HTML looks like this:
<div class="footer">
<div class="container text-center">
<button class="btn btn-warning"><span class="glyphicon glyphicon-filter"></span></button>
<button class="btn btn-warning"><span class="glyphicon glyphicon-th"></span></button>
</div>
</div>
How do I build a footer that permanently sticks to the bottom? I'm basically trying to build an "action bar" that is visible only when the site runs on a phone.
Thank you for your help.
use the following code
.footer {
background-color: #f5f5f5;
bottom: 0;
height: 60px;
position: fixed;
width: 100%;
}
you should change the footer position :
.footer {
background-color: #f5f5f5;
bottom: 0;
height: 60px;
position: fixed; /*change it*/
width: 100%;
}
Bootstrap comes with its nav elements ready to roll as a footer.
Simply create your element and add these classed navbar navbar-default navbar-fixed-bottom.
<footer>
<div class="navbar navbar-default navbar-fixed-bottom" id="footer">
<div class="container">
<p>this is your footer that sticks to the bottom</p>
</div>
</div>
</footer>
You can then expand on this by splitting the containing div into blocks with something like
<div class="row">
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
the above would go inside the container div
as shown here http://jsfiddle.net/showcaseimagery/5y14pqgv/
Building a portfolio site with TB v3.0.0 and encountered a horizontal scrolling issue that I can't seem to figure out.
Trying to achieve a full bleed for the images on mobile devices so I striped the left/right padding, but horizontal scrolling occurs. Here's the css I added that's causing the problem:
#media (max-width: 767px) {
.container {
padding-right: 0;
padding-left: 0;
margin-right: auto;
margin-left: auto;
}
}
Here's the staging site I'm working off of: http://www.kesernio.com/playground/
I wonder if changing the padding helps to set the images 100% in the first place.
The code below will be 100% viewport (green). Also mention your content has a padding. This padding is set on your col-xs-12 (to remove it: set the padding of .col-xs-12 to zero )
In your case remove the padding of your col-- with images.
<div class="container" style="background-color:green;">
<div class="row">
<div class="col-xs-12 contact">
content
</div>
</div>
</div>
</div>
About your scrollbar, in fact you do this:
<div class="container" style="background-color:green;padding:0">
<div class="row">
<div class="col-xs-12 contact">
content
</div>
</div>
</div>
add padding:0 this will give you a horizotal scrollbar cause your .row classes have a negative margin of 15px on both sides.
To remove the scrollbar set the margin of the .row to zero to:
<div class="container" style="background-color:green;padding:0">
<div class="row" style="margin:0">
<div class="col-xs-12 contact">
content
</div>
</div>
</div>
See also: https://stackoverflow.com/a/19044326/1596547 about the construction of the gutter of the grids
I am trying to place a search text box on the right hand side of the header and I can't seem to figure out how to do it using Bootstrap 2.0.1.
The code I am trying is
<div class="page-header">
<h1 class="span2">
Parts
</h1>
<div class="span4">
<div class="control-group">
<div class="controls">
<div class="input-prepend">
<span class="add-on">
<i class="icon-search"></i>
</span>
<input type="search" class="span3" placeholder="Search" name="search" id="search"/>
</div>
</div>
</div>
</div>
</div>
But it the search text box is not being pushed to the right with the spans and offsets and the line on the bottom of the header is not being pushed to the bottom of the tag. Any ideas?
Adding float: right to the first div tag nested within .page-header works for me. You also need to remember to clear your floats, this is the reason the line at bottom of the header is not being pushed to the bottom of the tag.
So adding the following CSS would resolve your problem:
.page-header {
overflow: hidden; /* clear floats */
}
.page-header div {
float: right; /* float search content right */
}
Working example: http://jsfiddle.net/7zds9/
Edit
For some reason, as pointed out by #PlTaylor, the input field wraps onto a new linein Chrome. This can be fixed using the following CSS:
.input-prepend input {
float: left;
}
Working example: http://jsfiddle.net/7zds9/1/
You can use this:
input {
float: right;
}
http://jsfiddle.net/dXJb8/
Or you can use position: fixed; to set the location of your search box.
http://jsfiddle.net/dXJb8/1/