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.
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 want a 2 x 2 responsive image grid view in made with bootstrap.
DEMO IMAGE
<div class="col-md-4">
<div class="row">
<div class ="col-md-2">
<img src="download.png">
</div>
<div class ="col-md-2">
<img src="download.png">
</div>
</div>
<div class="row">
<div class ="col-md-2">
<img src="download.png">
</div>
<div class ="col-md-2">
<img src="download.png">
</div>
</div>
</div>
Hope this will help
.row{margin-bottom: 10px;}
.row img{margin:10px;max-width: 100%;}
<link href="https://getbootstrap.com/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6">
<img src="http://lorempixel.com/600/600/" />
</div>
<div class="col-md-6 col-sm-6">
<img src="http://lorempixel.com/600/600/" />
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<img src="http://lorempixel.com/600/600/" />
</div>
<div class="col-md-6 col-sm-6">
<img src="http://lorempixel.com/600/600/" />
</div>
</div>
</div>
I am stuck at a point where i dont know where to go....I am trying to create a grid system for my website but not getting the desired output.
Here is the output structure which i want to create using Bootstrap 4:
My Code :
<section class="homepage-banner-section">
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-4">
<img src="img/home-banner-one.png" class="img-fluid" alt="Responsive image">
</div>
<div class="col-sm-8 col-md-8">
<div class="row">
<div class="col-sm-4">
Some text here
</div>
<div class="col-sm-8">
<img src="img/home-banner-two.png" class="img-fluid" alt="Responsive image">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
Some Text Here
</div>
</div>
</div>
</section>
I will appreciate it if someone guide me the right direction.Have lack of knowledge about bootstrap grid system and column classes.
If you change both col-sm-4 to col-12 you will get two full width columns inside your row.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<section class="homepage-banner-section">
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-4">
<img src="img/home-banner-one.png" class="img-fluid" alt="Responsive image">
</div>
<div class="col-sm-8 col-md-8">
<div class="row">
<div class="col-12">
Some text here
</div>
<div class="col-12">
<img src="img/home-banner-two.png" class="img-fluid" alt="Responsive image">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
Some Text Here
</div>
</div>
</div>
</section>
You can divide your section / container into two columns (left/right) and then the right column into rows (text/image)
Something like below (see demo)
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js"></script>
<section class="homepage-banner-section">
<div class="container">
<div class="row">
<!-- left column -->
<div class="col-xs-4">
<img src="https://placekitten.com/200/300" class="img-fluid" alt="Responsive image">
</div>
<!-- right column -->
<div class="col-xs-8">
<!-- first row -->
<div class="row">
<div class="col">
some text only on right column
</div>
</div>
<!-- second row -->
<div class="row">
<div class="col">
<img src="https://placekitten.com/300/100" class="img-fluid" alt="Resp. img">
</div>
</div>
</div>
</div>
<!-- footer -->
<div class="row">
<div class="col-xs-12">
footer text that goes the width of the container
</div>
</div>
</div>
</section>
I am trying to create this:
I have the left and right image and the monkey image.
I was trying to create a row and make the left image col-3, the right image col-3 and the monkey and text col-6 in the middle.
Everything is stacking up on each other, comes out of the screen and not working. How can I make this sort of thing?
<section class="hero-area">
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-xs-3">
<img src="images/hero-left.svg" class="" alt="">
</div>
<div class="col-xs-6 col-md-126>
<h1 class="">
<b>monKey</b> Generator</h1>
<br>
<h2 class="">Generate a
<b>unique monkey</b> avatar
<br> from a
<b>Banano public key</b>
</h2>
<img src="https://bananomonkeys.herokuapp.com/image?address=ban_3tapge8i4kw9wa4irgda7epm4gaurr4rnp7ybjziphkt48afd6ba5pnaegs6"
class="" alt="">
</div>
<div class="col-md-3 col-sm-3">
<img src="images/hero-right.svg" class="" alt="">
</div>
</div>
</div>
</section>
There are couple of typos in your snippet above eg: col-md-126 and missing " after that. Also bootstrap 4 does not have xs on cols so using just col-3 col-6 col-3 would do the job.
See the snippet below.
img {
width:100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<section class="hero-area">
<div class="container-fluid">
<div class="row">
<div class="col-3">
<img src="images/hero-left.svg" alt="monkey left">
</div>
<div class="col-6">
<h1>
<b>monKey</b> Generator
</h1>
<br>
<h2>Generate a
<b>unique monkey</b> avatar
<br> from a
<b>Banano public key</b>
</h2>
<img src="https://bananomonkeys.herokuapp.com/image?address=ban_3tapge8i4kw9wa4irgda7epm4gaurr4rnp7ybjziphkt48afd6ba5pnaegs6" />
</div>
<div class="col-3">
<img src="images/hero-right.svg" class="" alt="monkey right">
</div>
</div>
</div>
</section>
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