I can only find solutions for fixed sidebars (e.g. Creating a fixed sidebar alongside a centered Bootstrap 3 grid), but not for non-fixed ones, i.e. a sidebar that scrolls down with the content.
I am using a bootstrap grid (Bootstrap 4):
<nav class="navbar sticky-top">...</nav>
<!--content-->
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<img src="https://via.placeholder.com/150x130">
</div>
<div class="col-md-3">
<img src="https://via.placeholder.com/150x130">
</div>
<div class="col-md-3">
<img src="https://via.placeholder.com/150x130">
</div>
<div class="col-md-3">
<img src=https://via.placeholder.com/150x130">
</div>
<div class="row">
...
</div>
</div>
I need a sidebar to the left of this content, but under my top navigation bar. How do I do this?
(the number of rows I need is undefined. They will later be generated by a php loop, so I don't think I can put the sidebar in the grid system)
Just put the content in a wrapper, put another DIV before that, wrap a row around them and apply the usual classes to divide the page width:
<nav class="navbar sticky-top">...</nav>
<!--content-->
<div class="container-fluid">
<div class="row">
<div class="col-md-2 sidebar">
SIDEBAR
</div>
<div class="col-md-10">
<div class="row">
<div class="col-md-3">
<img src="https://via.placeholder.com/150x130">
</div>
<div class="col-md-3">
<img src="https://via.placeholder.com/150x130">
</div>
<div class="col-md-3">
<img src="https://via.placeholder.com/150x130">
</div>
<div class="col-md-3">
<img src="https://via.placeholder.com/150x130">
</div>
</div>
<div class="row">
some other content...
</div>
</div>
</div>
</div>
https://codepen.io/anon/pen/XZedxM
Related
i want to align col-lg-8 with col-lg-4 that contains 2 rows for 2 images, i need those 2 columns align perfectly so they fit each others height
i tried this:
desired look
and what i got
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-8">
<img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg"/>
</div>
<div class="col-lg-4">
<div class="row">
<div class="col-lg-2">
<img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg"/>
</div>
</div>
<div class="row">
<div class="col-lg-2">
<img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Link to CODEPEN
While it is true that you can't depend on Bootstrap to do everything, you don't need any of the additional css "gymnastics" proposed by #derek-gutierrez because with native Bootstrap classes alone you can get done almost everything and most certainly in this particular case here.
The following code is leaner and does everything you want with native Bootstrap classes alone. No extra gymnastics needed. All with perfect paddings/gutter out of the box:
<div class="container">
<div class="row">
<div class="col-lg-8">
<img src="Cupcakes01.jpg" class="img-fluid">
</div>
<div class="col-lg-4">
<div class="row">
<div class="col">
<img src="Cupcakes01.jpg" class="img-fluid">
</div>
</div>
<div class="row">
<div class="col">
<img src="Cupcakes01.jpg" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
That's the magic of the Bootstrap grid just working.
Notice: You had 2 unnecessary divs (first row and col-lg-12). I cut them out. That was totally useless fat in your code. Don't put in more code than necessary. That reduces the number of potential problems.
Try below code, I hope this is what you are looking for
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg"/>
</div>
<div class="col-lg-8">
<img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg"/>
</div>
<div class="col-lg-4">
<img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg"/>
</div>
</div>
</div>
You can't depend on bootstrap to do everything. You are going to add some of your own custom CSS to achieve the effect you want. If you are unfamiliar with css and selectors W3 schools is a good resource.
To achieve this effect add this CSS to the head of your document:
(This is simply to illustrate based off of your example, you will want to be more specific with your selectors if there is going to be more to this page)
<style>
img {
width: 100%; /* Makes imgs match the parent column/container width */
}
#top-image {
margin-bottom: 30px; /* Adds the necessary space to the bottom of the first image */
}
</style>
The columns inside the col-lg-4 should not be col-lg-2. This is basically saying these columns are 2/12ths the size of the container. Instead change them to 12 to span the full width of the container. I also added an id to the first image in this column "id="top-image" to add the necessary margin.
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-8">
<img src="img/1.png" />
</div>
<div class="col-lg-4">
<div id="top-image" class="row">
<div class="col-lg-12">
<img src="img/2.png" />
</div>
</div>
<div class="row">
<div class="col-lg-12">
<img src="img/3.png" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am having problems getting my navigation bar to look like the photo below using bootstrap.
<nav class="navbar navbar-inverse" role="navigation">
<div class="row">
<div class="col-md-2">
<img src="" class="img-responsive" />
</div>
<div class="col-md-8">
</div>
<div class="col-md-2">
</div>
</div>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
</div>
<div class="col-md-2">
<img src="" class="img-responsive" />
</div>
</div>
</nav>
When the screen resolution became smaller the images would go on top and bottom of the actual navigation links instead of shrinking as one whole piece. Is there a better layout to accomplish this?
In my website I have a bar on the top of the page. It contains some music player elements. They will be kept in 3 columns. I would like to keep the bar all back in the top of the page, but the grids stay in the middle.
<div class="container navbar-inverse navbar-fixed-top" style="height:50px;">
<div class="row">
<div class="col-md-2">
<div class="playerButton pre"></div>
<div class="playerButton play" onClick="play()"></div>
<div class="playerButton next"></div>
</div>
<div class="col-md-8">
<div class="waveBar">
<div class="waveBarTheme"></div>
<div class="waveBarPlayed"></div>
</div>
</div>
<div class="col-md-2">
<div class="playerButton unmute"></div>
<div class="playerButton repeat"></div>
<div class="playerButton addToPlaylist"></div>
<div class="playerButton screen"></div>
<div class="playerButton share"></div>
</div>
</div>
</div>
DEMO: http://jsfiddle.net/danials/b88mc56g/
Any idea to have the bar full-width and grids in the center ?
You have to separate the container(which is what restricts the width) from the navbar. Like this:
<div class="navbar-inverse navbar-fixed-top" style="height:50px;">
<div class="container">
<div class="row">
<div class="col-md-2">
<p>Left box</p>
</div>
<div class="col-md-8">
<p>Center box</p>
</div>
<div class="col-md-2">
<p>Right box</p>
</div>
</div>
</div>
</div>
Updated JSFiddle
I have a two columns one column is size 9 and other column is size 3. I have a Google Map inside col-3 but my map is at the bottom of the screen. How do I get it to move up?
<div class="container">
<div class="row">
<div class="col-sm-9">
content....
<div class="col-sm-3">
content...
</div>
<div>
</div>
</div>
You have your col-sm-3 nested within your col-sm-9
Try this:
<div class="container">
<div class="row">
<div class="col-sm-9">
content....
</div>
<div class="col-sm-3">
content...
</div>
</div>
</div>
If I understand your question correctly, you want the divs stacked with the 3-column div on top. If so, do it like this:
<div class="container">
<div class="row">
<div class="col-sm-9 col-sm-pull-3">
content....
</div>
<div class="col-sm-3 col-sm-pull-9">
content...
</div>
</div>
</div>
I want to create a 2 column image grid similar to this example.
I'm looking for suggestions on how to best achieve this using the Twitter Bootstrap grid? I've attempted to do this with not much success. My main issues were the gutter between images being uneven, not being able to align the images on the center line of the page, and how to handle both portrait and landscape images. Thanks in advance.
Edit: As recommend I have supplied an example with a screenshot of the result.
<div class="container">
<div class="row">
<div class="span12">
<div class="row">
<div class="span4"><img src="http://goo.gl/l9uUR"></div>
<div class="span4"><img src="http://goo.gl/l9uUR"></div>
<div class="span4"><img src="http://goo.gl/l9uUR"></div>
</div>
<div class="row">
<div class="span8"><img src="http://goo.gl/mrllo"></div>
<div class="span4"><img src="http://goo.gl/l9uUR"></div>
</div>
<div class="row">
<div class="span4"><img src="http://goo.gl/l9uUR"></div>
<div class="span8"><img src="http://goo.gl/mrllo"></div>
</div>
</div>
</div>
</div>
The first row of span4's are perfectly aligned however, the bottom of the span4's in the second two rows are not aligning to the bottom of the span8 as the image illustrates.
Ok seems as if reading up upon nesting columns in bootstrap will help you on this one, what you are trying to achieve is relatively straight forward, just takes time to figure it out
http://twitter.github.com/bootstrap/scaffolding.html#responsive
I have tried this and it works, though you just need to put the appropriate images in their place as they are all different sizes
<div class="container">
<div class="row">
<div class="span8">
<img src="http://example">
</div>
<div class="span4">
<img src="http://example">
</div>
</div><!--row-->
</div><!--container-->
<div class="container">
<div class="row">
<div class="span6">
<img src="http://example">
</div>
<div class="row">
<div class="span6">
<img src="http://example">
</div>
</div><!--row-->
<div class="span6">
<img src="http://example">
</div>
</div><!--row-->
</div><!--container-->
<div class="container">
<div class="row">
<div class="span9">
<img src="http://example">
</div>
<div class="span3">
<img src="http://example">
</div>
<div class="row">
<div class="span3">
<img src="http://example">
</div>
</div><!--row-->
</div><!--row-->
</div><!--container-->