I am trying to have my bootstrap 3.0 layout pin the content of the right column to the top, thus staying in place as the main content scrolls on. I have arrived at the following code, which blows up as I re-size the browser. Is there a way to do this?
<div class="col-md-10>main content</div>
<div class="col-md-2 container" style="padding: 15px 0px 10px 23px; position: fixed; right: 20px; top:75px">
Right column, stuck to the top
</div>
I am not really (engineer learning these techniques) a bootstrap or CSS guy, so if bootstrap doesn't support this - that is valuable information for me as well.
You can use affix on the content inside the right column..
<div class="col-md-10>main content</div>
<div class="col-md-2">
<div class="affix">..</div>
</div>
Here's an example Bootply that you may find useful: http://bootply.com/104413
Demo
You can do this by using the affix class.
<div class="well col-span-4" data-spy="affix">
<div class="btn btn-large btn-danger col-span-12">This is fixed</div>
</div>
Animation
Related
I'm not sure if I'm doing something wrong or if this is the intended result but the I'm using semantic ui's sidebar and it pushes everything past the max screen width. Am I missing something here?
<div class="ui bottom attached segment pushable">
<div class="ui left vertical menu visible thin attached inverted sidebar">
<a class="item">
Item 1
</a>
<a class="item">
Item 2
</a>
<a class="item">
Item 3
</a>
</div>
<div class="pusher">
<div id="search-bar">
<div class="ui fluid action input">
<input placeholder="Search..">
<div class="ui green button"> Search </div>
</div>
</div>
<h3 class="ui block header">
Item
</h3>
</div>
</div>
https://jsfiddle.net/kour6d1x/
If you don't want the content "pushed" for the Semantic UI sidebars you should use the .overlay class on it - relevant demos
Like the class name suggests, it will overlay the sidebar rather than pushing the content along with it.
Add overlay class to the <div class="ui left vertical menu visible thin attached inverted sidebar"> element.
JSfiddle
I have used below css to reduce thr width of pusher when sidebar is open. In below code 58px is the width of sidebar
.sidebar.visible + .pusher{
margin-right: 58px;
}
Custom CSS subtracting the width of the sidebar would do the trick:
.sidebar.visible + .pusher {
width: calc(100% - 260px);
}
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 div I'm trying to give specific properties to. My page has a header and a footer, and I want the body to consist of a panel with 15px padding all around, but the bottom padding always ends up variable. If the window is too tall, I end up with bottom padding that's 3–4x larger than the top and side padding, and if the window is too small, the footer overlaps the bottom of the panel. My html essentially looks like this:
<div class="container-fluid">
<div class="row">
<div id="content" class="col-sm-12">
<div class="panel panel-default">
Title
</div>
<div class="panel-body">
Content
</div>
</div>
</div>
</div>
I've tried giving #content the following style:
position: fixed;
top: 15px;
bottom: 15px
hoping that I could get a constant border all around, but when I have both top and bottom properties, top just overrides bottom and I still have that variable padding on the bottom. Any ideas?
For further clarification, see jsfiddle here. Notice that when you drag the divider above Result, the lower border moves up or down at about half the speed you're moving your cursor—I want to make it so the bottom of the panel stays a constant distance from the bottom of the window.
Thanks!
It's easiest to just introduce a wrapper to avoid stomping on Bootstrap styles.
<div class="container-fluid">
<div class="my-wrapper">
<div class="row">
<div id="content" class="col-sm-12">
<div class="panel panel-default">
Title
</div>
<div class="panel-body">
Content
</div>
</div>
</div>
</div>
</div>
And:
.my-wrapper{padding:15px;}
JSFiddle
Is there a way in Bootstrap 3 to right align a div?
I am aware of the offsetting possibilitys but I want to align a formatted div to the right of its container while it should be centered in a fullwidth mobile view. The class 'pull-right' is not working anymore. Did they forgot to replace it or am I missing something obvious?
<div class="row">
<div class="container">
<div class="col-md-4">
left content
</div>
<div class="col-md-4 col-md-offset-4">
<!-- The next div has a background color and its own paddings and should be aligned right-->
<!-- It is now in the right column but aligned left in that column -->
<div class="yellow_background">right content</div>
</div>
</div>
</div>
Shure I know how to do this in CSS, but can it be done in pure bootstrap 3?
The class pull-right is still there in Bootstrap 3
See the 'helper classes' here
pull-right is defined by
.pull-right {
float: right !important;
}
without more info on styles and content, it's difficult to say.
It definitely pulls right in this JSBIN
when the page is wider than 990px - which is when the col-md styling kicks in,
Bootstrap 3 being mobile first and all.
Bootstrap 4
Note that for Bootstrap 4 .pull-right has been replaced with .float-right
https://www.geeksforgeeks.org/pull-left-and-pull-right-classes-in-bootstrap-4/#:~:text=pull%2Dright%20classes%20have%20been,based%20on%20the%20Bootstrap%20Grid.
Do you mean something like this:
HTML
<div class="row">
<div class="container">
<div class="col-md-4">
left content
</div>
<div class="col-md-4 col-md-offset-4">
<div class="yellow-background">
text
<div class="pull-right">right content</div>
</div>
</div>
</div>
</div>
CSS
.yellow-background {
background: blue;
}
.pull-right {
background: yellow;
}
A full example can be found on Codepen.
i think you try to align the content to the right within the div, the div with offset already push itself to the right, here some code and LIVE sample:
FYI: .pull-right only push the div to the right, but not the content inside the div.
HTML:
<div class="row">
<div class="container">
<div class="col-md-4 someclass">
left content
</div>
<div class="col-md-4 col-md-offset-4 someclass">
<div class="yellow_background totheright">right content</div>
</div>
</div>
</div>
CSS:
.someclass{ /*this class for testing purpose only*/
border:1px solid blue;
line-height:2em;
}
.totheright{ /*this will align the text to the right*/
text-align:right;
}
.yellow_background{
background-color:yellow;
}
Another modification:
...
<div class="yellow_background totheright">
<span>right content</span>
<br/>image also align-right<br/>
<img width="15%" src="https://www.google.com/images/srpr/logo11w.png"/>
</div>
...
hope it will clear your problem
Bootstrap 4+ has made changes to the utility classes for this. From the documentation:
Added .float-{sm,md,lg,xl}-{left,right,none} classes for responsive floats and removed .pull-left and .pull-right since they’re redundant to .float-left and .float-right.
So use the .float-right (or a size equivalent such as .float-lg-right) instead of .pull-right for your right alignment if you're using a newer Bootstrap version.
Add offset8 to your class, for example:
<div class="offset8">aligns to the right</div>
I'm trying to create a floating panel. It needs be detached from the grid and fill the entire height of the document, on the left side like SO:
My experiment so far:
<div class="row left">
<div class="small-3">
<div class="panel">
Panel HTML
</div>
</div>
</div>
<div class="row">
<div class="small-6 columns"><div class="panel">Main - Content</div></div>
<div class="small-6 columns"><div class="panel">Main - Content</div></div>
</div>
Produce the following:
I'm not sure what is the best practice when using Foundation, and could not find a reference in their docs. Appreciate the help :)
here if found the issue https://github.com/zurb/foundation/issues/226
try this jquery plugin to sync height https://github.com/ginader/syncHeight ( i didnt tried it yet)
this guy found something of a solution for the full height problem :
https://gist.github.com/joanhard/6375966
It is also javascript based, but it's only a line of javascript compare to the use of an extra plugin...
You can set position: fixed; on the div you want to have max-height, then set its height to a 100%. I have created a quick fiddle where you can see it in action.
The HTML:
<div class="row">
<div class="small-4 columns" id="sidebar">
Fixed full height
</div>
<div class="small-8 columns">
Other Content
</div>
</div>
The CSS:
#sidebar{
position: fixed;
height: 100%;
background: #222;
color: #FFF;
padding: 5px;
}
If you're using jQuery in your project, I wrote a quick wrapper for jQuery.syncHeight, which makes it easier to use, with multiple instantiation:
https://gist.github.com/replete/5728123