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?
Related
I am trying to create this:
I have the left and right image and the monkey image.
I was trying to create a row and make the left image col-3, the right image col-3 and the monkey and text col-6 in the middle.
Everything is stacking up on each other, comes out of the screen and not working. How can I make this sort of thing?
<section class="hero-area">
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-xs-3">
<img src="images/hero-left.svg" class="" alt="">
</div>
<div class="col-xs-6 col-md-126>
<h1 class="">
<b>monKey</b> Generator</h1>
<br>
<h2 class="">Generate a
<b>unique monkey</b> avatar
<br> from a
<b>Banano public key</b>
</h2>
<img src="https://bananomonkeys.herokuapp.com/image?address=ban_3tapge8i4kw9wa4irgda7epm4gaurr4rnp7ybjziphkt48afd6ba5pnaegs6"
class="" alt="">
</div>
<div class="col-md-3 col-sm-3">
<img src="images/hero-right.svg" class="" alt="">
</div>
</div>
</div>
</section>
There are couple of typos in your snippet above eg: col-md-126 and missing " after that. Also bootstrap 4 does not have xs on cols so using just col-3 col-6 col-3 would do the job.
See the snippet below.
img {
width:100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<section class="hero-area">
<div class="container-fluid">
<div class="row">
<div class="col-3">
<img src="images/hero-left.svg" alt="monkey left">
</div>
<div class="col-6">
<h1>
<b>monKey</b> Generator
</h1>
<br>
<h2>Generate a
<b>unique monkey</b> avatar
<br> from a
<b>Banano public key</b>
</h2>
<img src="https://bananomonkeys.herokuapp.com/image?address=ban_3tapge8i4kw9wa4irgda7epm4gaurr4rnp7ybjziphkt48afd6ba5pnaegs6" />
</div>
<div class="col-3">
<img src="images/hero-right.svg" class="" alt="monkey right">
</div>
</div>
</div>
</section>
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
I can not solve the problem, please help. I do adaptive site with the bootstrap grid and can not locate four images in one line. images should be near without any interval and spacing.
I have my code:
<div class="main_boxes">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="one">
<img src="img/one.png" />
</div>
</div>
<div class="col-md-3">
<div class="two">
<img src="img/two.png" />
</div>
</div>
<div class="col-md-3">
<div class="three">
<img src="img/three.png" />
</div>
</div>
<div class="col-md-3">
<div class="four">
<img src="img/four.png" />
</div>
</div>
</div>
</div>
</div>
Images are 295x150 and with intervals in browser
Add the class img-responsive to each <img> tag like so:
<div class="main_boxes">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="one">
<img class="img-responsive" src="img/one.png" />
</div>
</div>
<div class="col-md-3">
<div class="two">
<img class="img-responsive" src="img/two.png" />
</div>
</div>
<div class="col-md-3">
<div class="three">
<img class="img-responsive" src="img/three.png" />
</div>
</div>
<div class="col-md-3">
<div class="four">
<img class="img-responsive" src="img/four.png" />
</div>
</div>
</div>
</div>
</div>
I have made a fiddle with no margin/ padding like this:
http://jsfiddle.net/Le6oosvo/2/
I used this HTML:
<div class="main_boxes">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<div class="one">
<img class="img-responsive" src="http://lorempixel.com/295/150" />
</div>
</div>
<div class="col-sm-3">
<div class="two">
<img class="img-responsive" src="http://lorempixel.com/295/150" />
</div>
</div>
<div class="col-sm-3">
<div class="three">
<img class="img-responsive" src="http://lorempixel.com/295/150" />
</div>
</div>
<div class="col-sm-3">
<div class="four">
<img class="img-responsive" src="http://lorempixel.com/295/150" />
</div>
</div>
</div>
</div>
</div>
And this little bit of CSS:
.main_boxes .col-sm-3 {
padding-left: 0px;
padding-right: 0px;
}
I used .col-sm-3 in stead of .com-md-3 to make the images align on the side of each other longer (when you squeeze it down). I also added bootstrap class to make the images responsive.
Suppose your images are 200px wide and 200px high. You could try something like
<div class="container">
<div class="row">
</div>
<div class="col-md-3">
<image src="image1.jpg"></img>
</div>
<div class="col-md-3">
<image src="image2.jpg"></img>
</div>
<div class="col-md-3">
<image src="image3.jpg"></img>
</div>
<div class="col-md-3">
<image src="image4.jpg"></img>
</div>
</div>
The bootstrap grid is 12 columns wide. Which means the columns have to add up to 12. You can do this by making four divs of three columns each. It would look something like this when done
Image 1 Image 2 Image 3 Image 4
Hope this helps.
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 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-->