Here is my code I cannot understand why my image will not line up.
The last image leaves a rather large space above it. Help Im making a gallery of some piece of art.
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<section class="col-sm-12 col-md-6 col-lg-6">
<a href="#">
<div class="thumbnail"> <img src="images/Celeb. Portraits Tom Waits, Tupac, Notorious BIG_2.jpg" alt="celeb" /></div>
</a>
</section>
<section class=" col-sm-12 col-md-6 col-lg-6">
<a href="#">
<div class="thumbnail"><img src="images/music_2.jpg"="guitar" /></div>
</a>
</section>
<section class="col-sm-12 col-md-6 col-lg-6">
<a href="#">
<div class="thumbnail"> <img src="images/big man house.jpg" alt="celeb" /></div>
</a>
</section>
<section class="col-sm-12 col-md-6 col-lg-6 clear">
<a href="#">
<div class="thumbnail"> <img src="images/elephant_2.jpg" alt="elephant" /></div>
</a>
</section>
This is happening because of the different height of items on the top two images. To get them to appear in neat rows, put each group of two in a div with class row.
<div class="row">
<section class="col-sm-12 col-md-6 col-lg-6">
...
</section>
<section class="col-sm-12 col-md-6 col-lg-6">
...
</section>
</div>
<div class="row">
<section class="col-sm-12 col-md-6 col-lg-6">
...
</section>
<section class="col-sm-12 col-md-6 col-lg-6">
...
</section>
</div>
Related
This question already has answers here:
Center image using text-align center?
(28 answers)
Closed 9 days ago.
I want to align the image to center each text. Below is my code. I tried it using container,. but it doesn't work.
and below is the picture.
<section id="features">
<!-- <div class="container-fluid"> -->
<div class="row justify-content-center">
<div class="col-md-4 col-sm-12 title-text">
<img src="images/feature1.png" alt="feature1">
<h3 class="features-title">Food Listing.</h3>
<p class="features-prgrph">Quickly and easily post information about food you want to share.</p>
</div>
<div class="col-md-4 col-sm-12 title-text">
<img src="images/feature2.png" alt="feature2">
<h3 class="features-title">Matchmaking</h3>
<p class="features-prgrph">Find people in your area looking for food.</p>
</div>
<div class="col-md-4 col-sm-12 title-text">
<img src="images/feature3.png" alt="feature3">
<h3 class="features-title">Request System.</h3>
<p class="features-prgrph">Request food from other users with a few taps.</p>
</div>
</div>
<!-- </div> -->
</section>
Try this,
Add text-center each one like this,
<div class="col-md-4 col-sm-12 title-text text-center">
Code:
<section id="features">
<!-- <div class="container-fluid"> -->
<div class="row justify-content-center">
<div class="col-md-4 col-sm-12 title-text text-center">
<img src="images/feature1.png" alt="feature1">
<h3 class="features-title">Food Listing.</h3>
<p class="features-prgrph">Quickly and easily post information about food you want to share.</p>
</div>
<div class="col-md-4 col-sm-12 title-text text-center">
<img src="images/feature2.png" alt="feature2">
<h3 class="features-title">Matchmaking</h3>
<p class="features-prgrph">Find people in your area looking for food.</p>
</div>
<div class="col-md-4 col-sm-12 title-text text-center">
<img src="images/feature3.png" alt="feature3">
<h3 class="features-title">Request System.</h3>
<p class="features-prgrph">Request food from other users with a few taps.</p>
</div>
</div>
<!-- </div> -->
</section>
Output:
Add the class text-center in the div with the class title-text.
I'd like to order my bootstrap cards thus:
My code is this:
<div class="row ">
<div class="col-12 col-md-6 mb-1" style="height: 75vh;">
<div class="map svelte-xu5vn1" id="map">
...
</div>
<div class="col-12 col-md-6">
<div class="col-6">
<a rel="prefetch" href="communes/xxx/objects/Cykelhus">
<div class="card mr-1 mb-1">
<div class="card-body text-center">
<img class="card-img-top" src="img/300x300/cykelhus.thumb.jpg" alt="(image)">
<p class="card-text">Cykelhus</p>
</div>
</div>
</a>
</div>
<div class="col-6">
<a rel="prefetch" href="communes/brf_masthugget/objects/Sedumtak">
<div class="card mr-1 mb-1">
... as per the above
But I get this result:
What do I need to change?
Fixed it, I needed to add a <div class="row"> before the first of the cards:
<div class="row">
<div class="col-6">
<a rel="prefetch" href="communes/xxx/objects/Cykelhus">
...
And close it of course.
hmm, sure I'd already tried that ...
This question already has an answer here:
Bootstrap 4.0 Grid System Layout not working
(1 answer)
Closed 4 years ago.
The class .col-6 is not working propely, when below 575px screen size, the cards gets a weird aspect. How to fix it?
Click on Run code snippet->Full Page, and resize the screen to below 575px of width:
.divCard{
float:left;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="container-fluid">
<div class="row mx-md-2">
<div class="card-group col-lg-8">
<div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 divCard">
<article class="card">
<a href="#">
<img class="card-img-top" src="https://imgjapan.com/wp-content/themes/img_jpn/static/img/global-locations/img-singapore.jpg">
</a>
</article>
</div>
<div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 divCard">
<article class="card">
<a href="#">
<img class="card-img-top" src="https://imgjapan.com/wp-content/themes/img_jpn/static/img/global-locations/img-singapore.jpg">
</a>
</article>
</div>
<div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 divCard">
<article class="card">
<a href="#">
<img class="card-img-top" src="https://imgjapan.com/wp-content/themes/img_jpn/static/img/global-locations/img-singapore.jpg">
</a>
</article>
</div>
</div>
<div class="col-12 col-lg-4" style="background-color: red"></div>
</div>
</div>
Wrap the content of your class col-lg-8 inside of a row class.
As col-*-* have default margins which is causing the issue.
Please try the below code.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="container-fluid">
<div class="row mx-md-2">
<div class="card-group col-lg-8">
<div class="row">
<div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 divCard">
<article class="card">
<a href="#">
<img class="card-img-top" src="https://imgjapan.com/wp-content/themes/img_jpn/static/img/global-locations/img-singapore.jpg">
</a>
</article>
</div>
<div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 divCard">
<article class="card">
<a href="#">
<img class="card-img-top" src="https://imgjapan.com/wp-content/themes/img_jpn/static/img/global-locations/img-singapore.jpg">
</a>
</article>
</div>
<div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 divCard">
<article class="card">
<a href="#">
<img class="card-img-top" src="https://imgjapan.com/wp-content/themes/img_jpn/static/img/global-locations/img-singapore.jpg">
</a>
</article>
</div>
</div>
</div>
<div class="col-12 col-lg-4" style="background-color: red; height:200px"></div>
</div>
</div>
I noticed some errors and here is how to fix it. I will provide simplified version to show where the problem is.
According to bootstrap you need to have the following scheme in your layout.
container → row → col → row → col and so on.
Your layout has container → row → col → col and i suppose this is the problem.
Plus, it is really helpful to add borders so you can easily see the layout and how it behaves.
I hope this solves your problem.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-lg-8">
<div class="row">
<div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 border">
<article class="card w-100">1</article>
</div>
<div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 border">
<article class="card w-100">2</article>
</div>
<div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 border">
<article class="card w-100">3</article>
</div>
</div>
</div>
</div>
</div>
I have six blocks. I combined the top and bottom and now there is a gap. anyway to move this row up without breaking anything?I would like to know how to solve this issue with bootstrap.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="" crossorigin="anonymous">
<div class="col-lg-4 col-md-4 col-sm-6">
<a href="portfolio-item.html">
<img class="img-responsive img-home-portfolio" src="https://placehold.it/600x250">
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<a href="portfolio-item.html">
<img class="img-responsive img-home-portfolio" src="https://placehold.it/600x250">
</a>
</div>
<div class="col-lg-4">
<a href="portfolio-item.html">
<img class="img-responsive img-home-portfolio" src="https://placehold.it/400x450">ss
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<a href="portfolio-item.html">
<img class="img-responsive img-home-portfolio" src="https://placehold.it/600x250">
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<a href="portfolio-item.html">
<img class="img-responsive img-home-portfolio" src="https://placehold.it/600x250">
</a>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</div>
The gaps are coming from the padding on the bootstrap rows, create a class to remove the padding and add it to each of your rows.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="" crossorigin="anonymous">
<div class='col-lg-8'>
<div class='row'>
<div class="col-lg-6 col-md-4 col-sm-6">
<a href="portfolio-item.html">
<img class="img-responsive img-home-portfolio" src="https://placehold.it/600x250">
</a>
</div>
<div class="col-lg-6 col-md-4 col-sm-6">
<a href="portfolio-item.html">
<img class="img-responsive img-home-portfolio" src="https://placehold.it/600x250">
</a>
</div>
<div class="col-lg-6 col-md-4 col-sm-6">
<a href="portfolio-item.html">
<img class="img-responsive img-home-portfolio" src="https://placehold.it/600x250">
</a>
</div>
<div class="col-lg-6 col-md-4 col-sm-6">
<a href="portfolio-item.html">
<img class="img-responsive img-home-portfolio" src="https://placehold.it/600x250">
</a>
</div>
</div>
</div>
<div class="col-lg-4">
<a href="portfolio-item.html">
<img class="img-responsive img-home-portfolio" src="https://placehold.it/400x450">ss
</a>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</div>
NOTE: This answer was posted before OP changed his question's title....
Keeping the answer simple, you could structure the page like following:
<div>
<div id="col1"></div>
<div id="col2"></div>
</div>
<div id="tallBlock">
</div>
<div>
<div id="col3"></div>
<div id="col4"></div>
</div>
If you use column-count on the top and bottom divs, then they would be split into 2 columns. You should manually set the height on the col divs to ensure they don't try to flow into the second column when they are not post to.
In second column, I have a read more button, on click of that, text expands & the icons of 1st & 3rd column also comes down which I do not want... Somebody give me a demo template In which If I click the button, then only the icon below to the text div should come down and should not affect the position of other columns icons. I'm using this code...
<div class="grid">
<div class="row">
<div class="groups col-sm-4 col-xs-offset-4 career-description">
<h1>srv</h1>
<button class="btn-link favorite glyphicon glyphicon-bookmark CLbookmark"></button>
<h3 class="noData_Msg" style="text-align: center;">Sorry, Data is not available for this career.</h3>
<p class="brief_Desc_a">
</p>
<p class="det_DescF" ng-show="readMore">
</p>
<a class="link_b" ng-click="readMore = true" href="javascript:void(0)">Read More</a>
<a class="link_b" ng-click="readMore = false" href="javascript:void(0)">Read Less</a>
</div>
</div>
<div class="row career-cards">
<div class="groups col-sm-4">
<div class="future-trnds">
<img class="img-responsive" src="images/Future_trends_v02.png" alt="">
</div>
</div>
<div class="groups col-sm-4 col-xs-offset-8">
<div class="related-Careers">
<img class="img-responsive" src="images/Related_careers_v02.png" alt="">
</div>
</div>
</div>
<div class="row">
<div class="groups col-sm-4">
<div class="day-in-life">
<img id="no_Gray" class="img-responsive" src="images/Day_In_Life_v02.png" alt=""><img id="gray_Out" ng-Click="false" class="img-responsive gray_Icon hidden" src="images/Day_In_Life_v02.png" alt="">
</div>
</div>
<div class="groups col-sm-4">
<div class="introVideo">
<div class="vid_Dimension" style="height: 300px !important;" ng-hide="!video_Url" my-youtube code="video_Url">
</div>
<h3 class="no_Video" ng-show="!video_Url">Sorry, video is not available for this career.</h3>
</div>
</div>
<div class="groups col-sm-4">
<div class="cost-Salary">
<a href="javascript:void(0)" class="modal-cost modal-cont displayTooltip" title="Cost & Salary">
<img class="img-responsive " src="images/Cost_salary_v02.png" alt="Cost & Salary">
</a>
</div>
</div>
</div>
<div class="row">
<div class="groups col-sm-4">
<div class="honeycomb-wraper">
<div class="honeycomb" ng-include="'pages/traitTriangle.html'"></div>
</div>
</div>
<div class="groups col-sm-4">
<div class="courses_Colleges">
<img class="img-responsive " src="images/Courses_Colleges_v02.png" alt="">
</div>
</div>
<div class="groups col-sm-4">
<div class="honeycomb-wraper">
<!-- <div class="honeycomb" ng-include="'pages/iconicPeople_grid.html'"></div> -->
<div class="honeycomb" ng-include="'pages/workEnv_Hex.html'"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="content">
<div class="cont">
<div class="slide-text">
<span>Opportunity & Industries </span>
</div>
<div static-image ></div>
</div>
<div class="cont">
<div class="slide-text">
<span>Cost & salary</span>
</div>
<div class="slide-content">
<!-- <img class="img-responsive" alt="modal-image" title="modal-image" /> -->
<div ></div>
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<style>
.border{
border: 2px solid black;
}
.heightWidth{
height: 200px;
width: 200px;
}
</style>
<body>
<div class="col-lg-4 col-md-4 col-sm-12 border"> this is your first division
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12 heightWidth border">
first image goes here
</div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12 heightWidth border">
2nd image goes here
</div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12 heightWidth border">
3rd image goes here
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 border"> this is your second divsion
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12">
your middle section the text part goess here
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 cl-sm-12 border"> this one is your third division
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12 heightWidth border">
first image goes here
</div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12 heightWidth border">
2nd image goes here
</div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12 heightWidth border">
3rd image goes here
</div>
</div>
</div>
</body>
</html>
This will work.