I'm trying to put and left align an image within a column but the img is always automatically centered within a colum. I'm not so familiar with Bootstrap and I would be happy if you could show me the reason why it doesn't work.
Here is my code
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-heading">
<h1>Basic</h1>
</div>
<div class="panel-body">
<p>test</p>
<!--Portfolio Container-->
<div class="container-fluid text-center pull-left bg-grey">
<div class="row" border>
<div class="col-lg-12" width="100%">
<div class="thumbnail">
<img src="paris.jpg" alt="Paris">
<p><strong>Yes we built Paris</strong></p>
</div>
</div>
</div>
</div>
</div>
Many thanks in advance!
Text-center class used to center align content inside column , Remove text-center class from the parent container-fluid or override the css
<style>
.thumbnail img
{
text-align:left;
}
</style>
Just remove text-center from the parent container-fluid..
<div class="container-fluid pull-left bg-grey">
<div class="row" border="">
<div class="col-lg-12" width="100%">
<div class="thumbnail">
<img src="paris.jpg" alt="Paris">
<p><strong>Yes we built Paris</strong></p>
</div>
</div>
</div>
</div>
http://www.codeply.com/go/HOONi5zSpD
Related
I have looked at the documentation of boostrap 4.
To center the content horizontally we could use justify-content-center class.
for example
i have 4 sub elements in a div like images and text, i want to center them all at once but its not working using above class. is it achievable?
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="content col-12 col-sm-6 d-flex justify-content-center ">
<div class="photo-wrapper">
<img src="#" alt="">
</div>
<div class="text-wrapper">
<div class="title">
Title
</div>
<div class="position">
Position
</div>
<div class="phones">
Phone
</div>
</div>
</div>
<div class="col-12 col-sm-6 p-0 d-flex justify-content-center justify-content-sm-start">
See profile
</div>
It should look like below image but it doesn't.
Image link
You have to use it in a row class, for instance:
<div class="row justify-content-center">
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
</div>
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 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 have been using html/css for a while now. And I have never ran into this kind of grid problem with Bootstrap 3. I am trying to find a way to combine a 50% width (inside a <div class="container-fluid">) with a 50% width div (inside a <div class="container">). Like the grid in the following picture:
Example of the template
Yellow overlay: <div class="container"></div>
The problem is that they won't work together cause of the widths.
So how do I simulate this?
<section>
<div class="container-fluid">
<div class="col-sm-12 col-md-6 no-padding"></div>
<div class="container">
<p>content</p>
</div>
</div>
<div class="col-sm-12 col-md-6 no-padding photo"></div>
</div>
</section>
If I'm understanding what you're trying to achieve, there are a couple of problems. Firstly, you still need a row div to wrap the columns, which is in turn nested in the container. Also, by default, the container would have some padding, so that would need to be removed with some basic CSS as well.
Here is the HTML structure
<div class="container-fluid">
<div class="row">
<div class="col-lg-6" id="left">
Left Side
</div>
<div class="col-lg-6" id="right">
Right Side
</div>
</div>
</div>
Also, here's a live example you can play with: http://www.bootply.com/MKe7aJwKuc
Let me know if I missed the mark on what you're trying to do and I can try to rework it and help you out.
Should be this schema
<section>
<div class="container-fluid">
<div class="col-sm-12 col-md-6 no-padding"></div>
<div class="col-sm-12 col-md-6 no-padding photo"></div>
<div class="container">
<div class= "row">
<div class="col-sm-12 col-md-6 no-padding">Content</div>
<div class="col-sm-12 col-md-6 no-padding photo"></div>
</div>
</div>
</div>
</section>
on Bootstrap 4
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="elem left">Left Side</div>
</div>
<div class="col-lg-6">
<div class="elem right">Right Side</div>
</div>
</div>
</div>
sass
#mixin fluidwidth($widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
#each $breakpoint, $container-max-width in $widths {
#include media-breakpoint-up($breakpoint, $breakpoints) {
width: calc(100% + ((100vw - #{$container-max-width})/2) );
}
}
}
.elem.right{#include fluidwidth;}
I am using 3 columns inside a nested row.
instead of stacking horizontally columns are stacking vertically.
this is my code.
i have tried stackoverflow answers but not working.
<div class="jumbotron mainBar">
<div class="container mainBarContainer">
<div class="row">
<div class="col-xs-2">
<div class=" profilePic">
<h2>1<small>st</small><p>Title</p></h2>
</div>
</div>
<div class="col-xs-4">
<h1>Hello, world!</h1>
</div>
<div class="col-xs-6 container">
<div class="row">
<div clas="col-xs-4">
<div class=" profilePic1">
<h2>1<small>st</small><p>Title</p></h2>
</div>
</div>
<div clas="col-xs-4">
<div class=" profilePic1">
<h2>1<small>st</small><p>Title</p></h2>
</div>
</div>
<div clas="col-xs-4">
<div class=" profilePic1">
<h2>1<small>st</small><p>Title</p></h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
and here is the fiddle
fiidle
You have a spieling mistake. Change the clas to class which is inside second container.
The demo