I'm fairly new to Html & Css. I'm trying to make a portfolio site as an exercise for myself. However, when I try to put multiple pictures next to eachother, sort of like a gallery. My pictures start to overlap eachother. I have tried to find a solution for a few hours now. But nothing seems to work.
Does any of you guys have a suggestion that might lead to a solution?
Thanks in advance!!]1
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width", initial-scale=1.0>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="styles/styles.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<title>Noah Wallaart</title>
</head>
<body>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="header">
<div class="navbar navbar-default">
<div class="container">
</div>
</div>
</div>
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-md-6">
<h1>Noah Wallaart</h1>
</div>
<div class="col-md-6">
</div>
</div>
</div>
</div>
<section>
<div class="container">
<div class="row">
<div class="col-md-"><img src="image/background.JPG"></div>
<div class="col-md-3"><img src="image/background.JPG"></div>
<div class="col-md-3"><img src="image/background.JPG"></div>
<div class="col-md-3"><img src="image/background.JPG"></div>
</div>
</div>
</section>
</body>
</html>
Try this:
<style>
.col-md-3{
margin: 10px;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-3"><img src="image/background.JPG"></div>
<div class="col-md-3"><img src="image/background.JPG"></div>
<div class="col-md-3"><img src="image/background.JPG"></div>
<div class="col-md-3"><img src="image/background.JPG"></div>
</div>
</div>
Change
<div class="container">
<div class="row">
<div class="col-md-"><img src="image/background.JPG"></div>
<div class="col-md-3"><img src="image/background.JPG"></div>
<div class="col-md-3"><img src="image/background.JPG"></div>
<div class="col-md-3"><img src="image/background.JPG"></div>
</div>
</div>
to
<div class="container">
<div class="row">
<div class="col-md-3"><img src="image/background.JPG"></div>
<div class="col-md-3"><img src="image/background.JPG"></div>
<div class="col-md-3"><img src="image/background.JPG"></div>
<div class="col-md-3"><img src="image/background.JPG"></div>
</div>
</div>
You missed off the 3, which means the medium columns won't add up to the correct 12 so there will be some issues.
I've used your code and it seems like it's due to the size of the images. Trying specifying the images with the same width on each one.
Related
I have a simple web page template.my problem is that, my web page has a horizontal scroll. But I want remove it. This is my code:
<html lang="FA">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body dir="rtl">
<section class="bg-blue">
<div class="container">
<div class="text-center">
<img src="logo.png" alt="">
<h2 class="logo-text d-inline-block p-4 ps-0">My logo text</h2>
</div>
</div>
<div class="row">
<div class="col-12">
<img src="" alt="">
</div>
</div>
</section>
<section class="bg-secondary">
<div class="container">
<div class="text-center" style="height: 800px;">
<div class="search-container">
<div class="search-form">
<input type="text" class="form-control search-field w-50" placeholder="search">
</div>
</div>
</div>
</div>
</section>
<footer class="bg-yellow">
<div class="container">
</div>
</footer>
</body>
</html>
This is screen shot of result:
Any solution?
Try setting the body css using the overflow-x property for horizontal scrollbars like this:
.body{
overflow-x:hidden;
}
overflow: hidden; is fine to use. But I suggest looking at your markup. Bootstrap adds a margin-left & margin-right to the row class. In this case margin-right is the culprit.
Try it like this:
Rearranged Markup:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<section class="bg-blue">
<div class="container">
<div class="row">
<div class="text-center">
<img src="logo.png" alt="">
<h2 class="logo-text d-inline-block p-4 ps-0">My logo text</h2>
</div>
</div>
<div class="col-12">
<img src="" alt="">
</div>
</div>
</section>
<section class="bg-secondary">
<div class="container">
<div class="text-center" style="height: 800px;">
<div class="search-container">
<div class="search-form">
<input type="text" class="form-control search-field w-50" placeholder="search">
</div>
</div>
</div>
</div>
</section>
<footer class="bg-yellow">
<div class="container">
</div>
</footer>
Original Markup:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<section class="bg-blue">
<div class="container">
<div class="text-center">
<img src="logo.png" alt="">
<h2 class="logo-text d-inline-block p-4 ps-0">My logo text</h2>
</div>
</div>
<div class="row">
<div class="col-12">
<img src="" alt="">
</div>
</div>
</section>
<section class="bg-secondary">
<div class="container">
<div class="text-center" style="height: 800px;">
<div class="search-container">
<div class="search-form">
<input type="text" class="form-control search-field w-50" placeholder="search">
</div>
</div>
</div>
</div>
</section>
<footer class="bg-yellow">
<div class="container">
</div>
</footer>
put the class="row" div inside container div
<div class="container">
<div class="text-center">
<img src="logo.png" alt="">
<h2 class="logo-text d-inline-block p-4 ps-0">My logo text</h2>
</div>
<div class="row">
<div class="col-12">
<img src="" alt="">
</div>
</div>
</div>
I've been trying to make an album images group, But there is a Big gap in the right side and won't be fit without using Padding, But when i use Padding it only fit for my PC resolution and becomes a bigger gap in other resolutions, Also if there is a picture bigger in resolution than the other images it wont resize itself of the main size, I've tried many ways but i just don't understand what should i change the height and width.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
<div class="cards-deck">
<div class="row">
<div class="col">
<div class="card">
<div class="card-block">
<img src="http://www.publicdomainpictures.net/pictures/90000/t2/csx-train.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-block">
<img src="http://www.publicdomainpictures.net/pictures/90000/t2/csx-train.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-block">
<img src="http://www.publicdomainpictures.net/pictures/90000/t2/csx-train.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-block">
<img src="http://www.publicdomainpictures.net/pictures/90000/t2/csx-train.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-block">
<img src="http://www.publicdomainpictures.net/pictures/90000/t2/csx-train.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-block">
<img src="http://www.publicdomainpictures.net/pictures/90000/t2/csx-train.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-block">
<img src="http://www.publicdomainpictures.net/pictures/90000/t2/csx-train.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-block">
<img src="http://www.publicdomainpictures.net/pictures/90000/t2/csx-train.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
<style>
.card-block {
display: flex;
align-items: center;
padding: 16px;
}
.card {
background-color: transparent;
border-width: 0px;
}
.row {
float: left;
}
</style>
</body>
</html>
Other devices LOOK
https://i.imgur.com/U2LtbFN.jpg
View Code: http://codepen.io/cbgraphics/pen/GrMYKQ
Looking at your code it appears that you are using Bootstrap. There are some built in tags that you didn't take advantage of.
I rebuilt a similar layout using lots of little tweaks to your code.
First - You need to wrap your content in the container class:
<div class="container">
Second - It is better if you put each card in a column div. These will automatically fill in your columns (assuming that the size of your images are all the same. <div class="col-md-3">
Third - I changed the padding to keep the grid spacing consistent.
You do not need to create a new row for each image. The current way you are using Bootstrap is trying to override the default functions and CSS that make it awesome.
More about the Bootstrap grid system: http://getbootstrap.com/css/#grid
So I'm trying to display a grid of pictures (4x3) using bootstrap in HTML. However, when I check the code the columns of pictures are there but they're not aligned properly. It looks like this:
Image
My code looks like this:
<body>
<div class="container">
<div class="row">
<br>
<div class="col-lg-12 col-md-6"><h1><b>Storyboards</b></h1></div>
</div>
</div>
<div class="container"> <!--storyboard pages-->
<div class="row">
<div class="col-lg-3">
<img src="lc01.jpeg" alt="test">
</div>
<div class="col-lg-3">
<img src="lc02.jpeg" alt="test">
</div>
<div class="col-lg-3">
<img src="lc03.jpeg" alt="test">
</div>
<div class="col-lg-3">
<img src="lc04.jpeg" alt="test">
</div>
<div class="row">
<div class="col-lg-3">
<img src="lc01.jpeg" alt="test">
</div>
<div class="col-lg-3">
<img src="lc02.jpeg" alt="test">
</div>
<div class="col-lg-3">
<img src="lc03.jpeg" alt="test">
</div>
<div class="col-lg-3">
<img src="lc04.jpeg" alt="test">
</div>
</div>
<style>
img{
width:280px;
height:420px;
border:1px solid #000000;
margin-bottom: 12px;
}
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
If anyone could explain to me what mistake I'm making that would be very helpful.
Thank you
You aren't closing your last column in either row:
<div class="col-lg-3">
<img src="lc04.jpeg" alt="test">
Please check that you have missed the closing div for the rows ( or closing div for las column )
<div class="row">
<div class="col-lg-3">
</div>
</div>
I need to reorder these columns in a certain order for screens smaller the col-md in bootstrap. I tried this answer Column order manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3 and it works for just 3 columns but not for the specific way the columns need to stack in mobile view. This way works but it feels dirty hiding and un-hiding the columns. Is there a cleaner way to accomplish this?
Desktop View here
Mobile View here
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 visible-md visible-lg">
<div class="col-md-4"><div class="well">1</div></div>
<div class="col-md-4"><div class="well">2</div></div>
<div class="col-md-4"><div class="well">ad1</div></div>
<div class="col-md-4"><div class="well">3</div></div>
<div class="col-md-4"><div class="well">4</div></div>
<div class="col-md-4"><div class="well">ad2</div></div>
<div class="col-md-4 col-md-push-8"><div class="well">ad3</div></div>
</div>
<!--col-md-12 visible-md visible-lg -->
<div class="col-xs-12 visible-xs visible-sm">
<div class="col-xs-12"><div class="well">ad1</div></div>
<div class="col-xs-12"><div class="well">1</div></div>
<div class="col-xs-12"><div class="well">ad2</div></div>
<div class="col-xs-12"><div class="well">2</div></div>
<div class="col-xs-12"><div class="well">3</div></div>
<div class="col-xs-12"><div class="well">ad3</div></div>
<div class="col-xs-12"><div class="well">4</div></div>
</div>
<!-- col-xs-12 visible-xs visible-sm -->
</div>
<!-- row -->
</div>
<!-- container -->
</body>
</html>
Codepen here
Please check:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container">
<div class="row hidden-xs hidden-sm">
<div class="col-md-8"><div class="well">728x90 Ad</div></div>
</div>
<div class="row">
<div class="col-md-8"><div class="well">Title</div></div>
<div class="col-md-4"><div class="well">ad1</div></div>
</div>
<div class="row">
<div class="col-md-4"><div class="well">1</div></div>
<div class="col-md-4 col-md-push-4"><div class="well">ad2</div></div>
<div class="col-md-4 col-md-pull-4"><div class="well">2</div></div>
</div>
<div class="row">
<div class="col-md-4"><div class="well">3</div></div>
<div class="col-md-4 col-md-push-4"><div class="well">ad3</div></div>
<div class="col-md-4 col-md-pull-4"><div class="well">4</div></div>
</div>
</div> <!-- container -->
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-8 main-container">
<h1>Welcome</h1>
<hr>
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-2">
<img class="pull-left" src="http://placehold.it/32x32"/>
</div>
<div class="col-sm-4">
<h3>Capture Everything.</h3>
<p>Save all your data, data are significant and crucial.</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">2</div>
<div class="col-sm-4">2</div>
</div>
<div class="row">
<div class="col-sm-2">3</div>
<div class="col-sm-4">3</div>
</div>
</div>
<div class="col-sm-6">Column 2</div>
</div>
</div>
<div class="col-sm-2"></div>
</div>
</body>
</html>
Below is the working link:
http://jsbin.com/kojorike/1/edit
How can i create a something like below with image in left column and text in right column?
http://postimg.org/image/x24ukc74j/
In bootstrap each class="row" consists out of 12 colums.
meaning you have to use them.
example:
<div class="row">
<p class="col-md-8">text text text</p>
<img src="/image.jpg" class="col-md-4" />
</div>
Note. you can use class="col-md-offset-5" to add a spacing between the previous element.