I am trying to make a fixed column ( header- containing a image) with full width using bootstrap. Below this column there is another row containing three column( another image in the middle div). When I run my code the things get messy and also other contents passes above the fixed column which should be pass below it. Someone please help me. I am new to bootstrap. Here is my code
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="header"><img class="img-responsive" src="images/profile.jpg"></div>
</div>
</div>
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6"><img class="img-responsive" src="images/helpUs.jpg"></div>
<div class="col-sm-3"></div>
</div>
</div>
Here is CSS
.container-fluid{
background-color:#B8DB4D;
}
#header{
position: fixed;
width:100%;
background-color:red;}
Bootstrap has a convention for what you're describing, which can be accomplished by using the .navbar-fixed-top class on the content which should be sticky/fixed to the top of the page.
The only requirement for this to work as expected is that your <body> element has its padding-top property set to the expected height of the .navbar-fixed-top nav element. (in this example, the image 150px tall, so we set the body's padding-top to that height). This way, no content will be hidden behind the nav on page load (only when the user scrolls).
.container-fluid {
background-color: #B8DB4D;
}
#header {
position: absolute;
background-color: red;
}
body {
padding-top: 150px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=header%20img&w=350&h=150">
</div>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=other%20img&w=350&h=150">
</div>
<div class="col-sm-3"></div>
</div>
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=other%20img&w=350&h=150">
</div>
<div class="col-sm-3"></div>
</div>
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=other%20img&w=350&h=150">
</div>
<div class="col-sm-3"></div>
</div>
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=other%20img&w=350&h=150">
</div>
<div class="col-sm-3"></div>
</div>
</div>
Related
I have been trying to get 3 images to be responsive using bootstrap columns. They seem to be responsive, but the problem is that the images overlap except for the last column which remains being normal.
<div class="row">
<div class="col-sm-2 offset-sm-3">
<img class="img-responsive" src="../assets/images/roy-creates-categories-02.png">
</div>
<div class="col-sm-2">
<img class="img-responsive" src="../assets/images/roy-creates-categories-02.png">
</div>
<div class="col-sm-2">
<img class="img-responsive" src="../assets/images/roy-creates-categories-02.png">
</div>
</div>
I would like all 3 columns to like the one all the way on the right.
I've tried adding class "img-responsive" & "img-fluid" and neither have worked.
I'm using bootstrap 4.0.
The images are overflowing their container. The image on the right is full height but it is overflowing its container. Using the bootstrap '.col-2' means that you are limiting the column widths based on the window width. You could use background css rules instead of img elements to ensure containment or coverage of images or you could just use .col-auto instead of .col-2 with .justify-content-center provided you have appropriately sized images.
All three examples are in the snippet.
.row {
min-height: 150px;
}
.col-auto {
background-color: green;
}
.col-sm-2 {
background-color: red;
}
.bg-image {
width: 100%;
height: 100%;
background-image: url("https://picsum.photos/100");
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
.bg-image.bg-image--cover {
background-size: cover;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row justify-content-center">
<div class="col-auto">
<img class="img-fluid" src="https://picsum.photos/100">
</div>
<div class="col-auto">
<img class="img-fluid" src="https://picsum.photos/100">
</div>
<div class="col-auto">
<img class="img-fluid" src="https://picsum.photos/100">
</div>
</div>
<div class="row">
<div class="col-sm-2 offset-sm-3">
<div class="bg-image"></div>
</div>
<div class="col-sm-2">
<div class="bg-image"></div>
</div>
<div class="col-sm-2">
<div class="bg-image"></div>
</div>
</div>
<div class="row">
<div class="col-sm-2 offset-sm-3">
<div class="bg-image bg-image--cover"></div>
</div>
<div class="col-sm-2">
<div class="bg-image bg-image--cover"></div>
</div>
<div class="col-sm-2">
<div class="bg-image bg-image--cover"></div>
</div>
</div>
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 am trying to align three elements in a div in such a way that the image is inline with h1 while the p tag is beneath the h1 tag.
.valign{
position:relative;
top: 50%;
transform: translateY(-50%);
vertical-align: middle;
}
.banner{
position: relative;
height: 100vh;
width:100vw;
background: #eee;
}
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="banner" style="display:flex">
<div class="container">
<div class="valign">
<img src="img/logo.png" style="height: 150px;width: 150px">
<h1>Anirudh Sharma</h1>
<p>This is my portfolio</p>
</div>
</div>
</div>
</div>
</div>
Here is an image for reference:
This is how the elements must be arranged
This is how the elements are looking right now:
This is a screenshot of the webpage
Any help would be appreciated.
Try this
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="banner" style="display:flex">
<div class="container">
<div class="valign">
<div class="float-xs-left float-sm-left float-md-left">
<img src="img/logo.png"></div>
<div class="float-xs-left float-sm-left float-md-left">
<h1>Anirudh Sharma</h1>
<p>This is my portfolio</p></div>
</div>
</div>
</div>
</div>
</div>
the class value for float is based on bootstrap 4
Try this html
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="banner" style="display:flex">
<div class="container">
<div class="valign">
<div style="float:left">
<img src="img/logo.png" style="height: 150px;width: 150px"></div>
<div style="float:left">
<h1>Anirudh Sharma</h1>
<p>This is my portfolio</p></div>
</div>
</div>
</div>
</div>
</div>
Use floats, Bootstrap provides pull-left and pull-right helper classes, so use it on the two parts of your layout to have them side-by-by.
You need to add some margins here and there to make it look good.
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="banner" style="display:flex">
<div class="container">
<div class="valign">
<div class="row">
<div class="pull-left">
<img src="img/logo.png" style="height: 150px;width: 150px">
</div>
<div class="pull-left">
<h1>Anirudh Sharma</h1>
<p>This is my portfolio</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/n8o1w3cq/
I´m trying to acchive this image gallery using bootstrap grid layout:
but I can´t overflow the last image on the second row into the first row...
Here is my html code:
.gal-container {
display: block;
width: 100%;
padding: 16px;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.box {
padding: 32px;
}
.row img {
max-width: 100%;
max-height: 100%;
}
<section>
<div class="gal-container">
<div class="box">
<div class="row">
<div class="col-sm-6 nopadding"><img src="img/image1.jpg"></div>
<div class="col-sm-3 nopadding"><img src="img/image2.jpg"></div>
<div class="col-sm-3 nopadding"><img src="img/image3.jpg"></div>
</div>
<div class="row">
<div class="col-sm-3 nopadding"><img src="img/image4.jpg"></div>
<div class="col-sm-3 nopadding"><img src="img/image5.jpg"></div>
<div class="col-sm-6 nopadding"><img src="img/image6.jpg"></div>
</div>
</div>
</div>
</section>
The result of this code is this:
I would appreciate the help to put the Stranger Things image at the bottom of the two small pictures :)
There's absolutely no custom css needed for this and the job can be done with less code using native Bootstrap 4 classes alone:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<section class="container">
<div class="row no-gutters">
<div class="col-sm-6">
<div class="row no-gutters">
<div class="col-12"><img src="img/image1.jpg"></div>
<div class="col-sm-6"><img src="img/image2.jpg"></div>
<div class="col-sm-6"><img src="img/image3.jpg"></div>
</div>
</div>
<div class="col-sm-6">
<div class="row no-gutters">
<div class="col-sm-6"><img src="img/image4.jpg"></div>
<div class="col-sm-6"><img src="img/image5.jpg"></div>
<div class="col"><img src="img/image6.jpg"></div>
</div>
</div>
</div>
</section>
Your markup is not matching as per your desired layout.It should be something like this :
<div class="box">
<div class="row">
<div class="col-sm-6 nopadding">
<div class="col-sm-12 nopadding">
<img src="img/image1.jpg">
</div>
<div class="row">
<div class="col-sm-6 nopadding">
<img src="img/image2.jpg">
</div>
<div class="col-sm-6 nopadding">
<img src="img/image3.jpg">
</div>
</div>
</div>
<div class="col-sm-6 nopadding">
<div class="col-sm-12 nopadding">
<img src="img/image4.jpg">
</div>
<div class="row">
<div class="col-sm-6 nopadding">
<img src="img/image5.jpg">
</div>
<div class="col-sm-6 nopadding">
<img src="img/image6.jpg">
</div>
</div>
</div>
</div>
</div>
Also add overflow:hidden in nopadding.
Hope it helps !
If you just swap around positioning and the wrappers, you should be able to get your desired effect
Also, you will have to take into account the paddings and widths you need as they will affect the positioning of the elements.
Demo works in full screen due to size
.gal-container {
display: block;
width: 600px;
padding: 16px;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.box {
padding: 30px;
}
.row img {
max-width: 100%;
max-height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="gal-container">
<div class="row">
<div class="col-sm-6 nopadding">
<div class="col-sm-12 nopadding"> <img src="http://via.placeholder.com/300x150"> </div>
<div class="col-sm-6 nopadding"> <img src="http://via.placeholder.com/150x100"> </div>
<div class="col-sm-6 nopadding"> <img src="http://via.placeholder.com/150x100"> </div>
</div>
<div class="col-sm-6 nopadding">
<div class="col-sm-6 nopadding"> <img src="http://via.placeholder.com/150x100"> </div>
<div class="col-sm-6 nopadding"> <img src="http://via.placeholder.com/150x100"> </div>
<div class="col-sm-12 nopadding"> <img src="http://via.placeholder.com/300x150"></div>
</div>
</div>
</div>
I have these panels inside different rows. To easily show my problem, and my desired output, here's a visual...
At the left side is the problem I encounter, and at the right side is the desired output. I was wondering how it's possible to make the right panel overlap to the other row.
My html's structured something like this, which is all inside a .container-fluid(if that contributes to the problem)...
<div class="row">
<div class="col-md-6">
<div class="panel"> <!-- top-left panel --> </div>
</div>
<div class="col-md-6">
<div class="panel"> <!-- right panel --> </div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="panel"> <!-- bottom-left panel --> </div>
</div>
</div>
I'm using bootstrap.
p.s. sorry for the html "sample", not familiar yet on how to use the html snippet
Use flex
.flex{
display:flex;
}
.flex-1{
flex:1;
}
.height-50{
height:50px;
}
.margin-r-15{
margin-right:15px;
}
.border-1px{
border:1px solid black;
}
<div class="flex">
<div class="flex-1 margin-r-15">
<div class="height-50 border-1px" >
</div>
<div class="height-50 border-1px">
</div>
</div>
<div class="flex-1 border-1px">
</div>
</div>
You can code left div's in one wrapper and right one in another.
HTML
<div class="row">
<div class="col-md-6">
<div class="panel">
//top left panel
</div>
<div class="panel">
// bottom left panel
</div>
</div>
<div class="col-md-6">
<div class="panel">
// right panel
</div>
</div>
</div>
According to your visual above html will be fine but heights are not managed in this.
If you wish to have same height of right box according to left main box then use follwing code
HTML
<div class="row main">
<div class="col-md-6 inner">
<div class="panel">
//top left panel
</div>
<div class="panel">
// bottom left panel
</div>
</div>
<div class="col-md-6 inner">
<div class="panel">
// right panel
</div>
</div>
</div>
CSS
.main{
display:flex;
}
Please try like this:
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-12"></div>
</div>
<div class="row">
<div class="col-md-12"></div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-12"></div>
</div>
</div>
</div>
Please try this:
<div class="row">
<div class="col-lg-8 col-md-8 col-xs-12 col-s-12">
<div class="col-lg-12 col-md-12">
//Your Content Here
</div>
<div class="col-lg-12 col-md-12 col-xs-12 col-sm-12">
//Your Content Here
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-12">
<div class="col-lg-12 col-md-12 col-xs-12 col-sm-12">
//Your Content Here
</div>
</div>
</div>
If you can use separate columns (as shown in Gaurav's answer) that will work. If the height of the panels is unknown (variable) here isn't really a simple way. Another option is to put all your cols in a single row and use CSS3 column-width..
.row {
-moz-column-width: 50em;
-webkit-column-width: 50em;
-moz-column-gap: .1em;
-webkit-column-gap: .1em;
}
.col-md-6 {
float:none;
display: inline-block;
margin: .1em;
width: 100%;
}
http://www.bootply.com/6ynLAwenzq