<!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.
Related
I'm interested in creating a dashboard using the Bootstrap grid system. I'd like the layout to look as follows:
What is the best way to structure this in the HTML file? Should it be 5 rows and 2 columns?
Here is my attempt:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-3 d-flex justify-content-center">
<img src="foo.png" alt="Box 1">
</div>
<div class="col-9">
Box 2
</div>
</div>
<div class="row">
<div class="col-2">
Box 3
</div>
<div class="col-2">
Box 3
</div>
</div>
<div class="row">
<div class="col-4">
<div>
<table>
Box 4
</table>
</div>
<div>
<table>
Box 5
</table>
</div>
</div>
<div class="col-8">
Box 6
</div>
</div>
<div class = "row">
<div class="col-12 d-flex justify-content-center">
Box 7
</div>
</div>
</div>
</body>
</html>
Any assistance would be most appreciated!
Thanks!
4 rows, two inner rows on row 3 for the left box 4 and box 5.
And then you specify the css inside each box, like alignment and height etc. But the 2 columns in row 3 containing box 4, 5 and 6 are on the same row, for the gap in between, just specify blank columns but make sure they always add up to 12.
.box {
border-style: dotted;
margin-top: 10px;
margin-bottom: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<!--Row 1-->
<div class="row">
<div class="col-3">
<div class="box">
Box 1 (Image)
</div>
</div>
<div class="col-1">
</div>
<div class="col-8">
<div class="box">
Box 2 （Text)
</div>
</div>
</div>
<!--Row 2-->
<div class="row">
<div class="col-4">
</div>
<div class="col-4">
<div class="box">
Box 3
</div>
</div>
<div class="col-4">
</div>
</div>
<!--Row 3-->
<div class="row">
<div class="col-4">
<!--Row 3.1-->
<div class="row">
<div class="col-12">
<div class="box">
Box 4 (Table)
</div>
</div>
</div>
<!--Row 3.2-->
<div class="row">
<div class="col-12">
<div class="box">
Box 5 (Table)
</div>
</div>
</div>
</div>
<div class="col-1">
</div>
<div class="col-7">
<div class="box">
Box 6 (Chart)
</div>
</div>
</div>
<!--Row 4-->
<div class = "row">
<div class="col-12">
<div class="box">
Box 7 (Table)
</div>
</div>
</div>
</div>
</body>
</html>
I am trying to get two cards beside each other but no matter what I do they end up underneath each other. I have them in the same row, in the same container but it still won't work.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home page</title>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="search-bar.css" rel="stylesheet">
</head>
<body>
<div class ="container-fluid">
<div class="row">
<div class ="col-2" style="width: 170px;">
<div class="card">
<img src="http://placehold.jp/150x150.png" alt="Avatar" style="height: 150px; width: 150px;">
<div class="container">
<h6><b>John Doe</b></h6>
</div>
</div>
</div>
<div>
<div class="card">
<img src="http://placehold.jp/150x150.png" alt="Avatar" style="height: 150px; width: 150px;">
<div class="container">
<h6><b>John Doe</b></h6>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home page</title>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="search-bar.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-2" style="width: 170px;">
<div class="card">
<img src="http://placehold.jp/150x150.png" alt="Avatar" style="height: 150px; width: 150px;">
<div class="container">
<h6><b>John Doe</b></h6>
</div>
</div>
</div>
<div>
<div class="card">
<img src="http://placehold.jp/150x150.png" alt="Avatar" style="height: 150px; width: 150px;">
<div class="container">
<h6><b>John Doe</b></h6>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</body>
</html>
Try this,
Some containers removed. Your cards are now in a column each and both columns are inside a row.
col-6 will make the columns 50% width each, you can make them thinner or wider using col-1 to col-12. The cards will also fill that width as long as you do not dictate any card sizes in your CSS!!
Adding class="img-fluid" to the images and removing the styled size you entered will make the images stay at the column width no matter the screen size.
<div class="container-fluid">
<div class="row">
<div class="col-6">
<div class="card">
<img src="http://placehold.jp/150x150.png" class="img-fluid" alt="Avatar">
<h6><b>John Doe</b></h6>
</div>
</div>
<div class="col-6">
<div class="card">
<img src="http://placehold.jp/150x150.png" class="img-fluid" alt="Avatar">
<h6><b>John Doe</b></h6>
</div>
</div>
</div>
</div>
You have two syntax errors:
An extra div closer </div>
and extra body closer </body>
I added class="col" to the second card div
Note by using the forced width on the first column, on small screens you may not see all of that image in columns 1 and 2 set by col-2 you have.
I removed some style= and made classes instead (always try to style wit CSS and classes
We have NO idea what your CSS file does and now this may impact answers negatively. This is the main reason I left some of the markup I would normally NOT do such as the containers around the text on the cards.
.first-column {
width: 170px;
}
.card-image {
height: 150px;
width: 150px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home page</title>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="search-bar.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-2">
<div class="card first-column">
<img src="http://placehold.jp/150x150.png" alt="Avatar" class="card-image">
<div class="container">
<h6><b>John Doe</b></h6>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="http://placehold.jp/150x150.png" alt="Avatar" class="card-image">
<div class="container">
<h6><b>John Doe</b></h6>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Second example with standard card use
.card-image.card-img-top {
width: 100%;
height: 150px;
}
.card-img-top {
width: 100%;
}
.card-title {
font-weight: bold;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<body>
<div class="container-fluid">
<div class="d-flex">
<div class="card">
<img src="http://placehold.jp/150x150.png" alt="Avatar" class="card-image card-img-top">
<div class="card-body text-center">
<h6 class="card-title">John Doe</h6>
</div>
</div>
<div class="card">
<img src="http://placehold.jp/150x150.png" alt="Avatar" class="card-image card-img-top">
<div class="card-body text-center">
<h6 class="card-title">John Doe</h6>
</div>
</div>
</div>
</div>
</body>
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.
Hi i'm at the beginning in Bootstrap framework.
I have this Html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="http://placehold.it/100x100" class="img-responsive">
</div>
<div class="col-md-6 text-right text-uppercase">
<h1>Jane Doette</h1>
<h3>Front-end Ninja</h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/1140x350" class="img-responsive">
</div>
</div>
<div class="col-md-12">
<h2>Featured Work</h2>
</div>
<div class="row">
<div class="col-md-6">
<img src="http://placehold.it/555x300"class="img-responsive">
<h3>Appify</h3>
<p>
Link to project
</p>
</div>
<div class="col-md-6">
<img src="http://placehold.it/555x300"class="img-responsive">
<h3>Appify</h3>
<p>
Link to project
</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<img src="http://placehold.it/555x300"class="img-responsive">
<h3>Appify</h3>
<p>
Link to project
</p>
</div>
<div class="col-md-6">
<img src="http://placehold.it/555x300"class="img-responsive">
<h3>Appify</h3>
<p>
Link to project
</p>
</div>
</div>
</div>
</body>
</html>
I want to add some margin on the right in the title,
---------------------------
| Image Title ++ Margin
| |
| |
| |
----------------------------
If i try to add some class in another css class like
.testclass{
margin-right:xxpx/zz%;
}
And i create a div in which i put the
I set the div's class to tesclass,the result is a complete mess!
I try also to style the div directly in html but the result still the same.
I really don't understand how handle the margin and padding properties inside the columns in bootstrap.
You can add a space or margin on the right by doing this:
<div class="row">
<div class="col-md-6">
<img src="http://placehold.it/100x100" class="img-responsive">
</div>
<div class="col-md-5 text-right text-uppercase">
<h1>Jane Doette</h1>
<h3>Front-end Ninja</h3>
</div>
<div class="col-md-1"></div>
</div>
Or you can just add padding-right: XXpx; to the col-md-6 with text.
I've written a basic code like this for experimental purposes:
<!doctype html>
<html lang='en'>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.min.css">
<style type="text/css">
.pos {
position: relative;
}
.well1, .well2 {
position: relative;
height: 380px;
}
</style>
</head>
<body>
<div class="container pos">
<div class="col-sm-12">
<div class="well"></div>
</div>
<div class="col-sm-6">
<div class="well well1"></div>
</div>
<div class="col-sm-6">
<div class="well well2"></div>
</div>
<div class="col-sm-12">
<div class="well"></div>
</div>
</div>
</body>
</html>
This is the output:
But the same layout doesn't appear in mobile screens.
How can I fix it?
In Bootstrap,the col-xx-x classes are relative to specifics media queries. So here, you'll have to had the class col-xs-6 if you want your 50% column to stay 50% when you are below 767px. Your markup should look like this :
<body>
<div class="container pos">
<div class="col-sm-12">
<div class="well"></div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="well well1"></div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="well well2"></div>
</div>
<div class="col-sm-12">
<div class="well"></div>
</div>
</div>
</body>