I am trying to align the content of a div header horizontally using bootsrap but it is not working as the the two content are pulled to the right. This is my attempt
<div class = "page-header">
<img class="col-md-4 col-md-pull-4" class="img-responsive" src="/resources/images/header.png">
<hgroup class="col-md-4 col-md-push-4">
<h1 style="color: black;">XXXX</h1>
<h3 style="color:black;">XX</h3>
</hgroup>
</div>
Please how can align the image and the hgroup horizontally thesame
try this way class name like col-md-pull-4 to col-md-pull-8 & col-md-push-4 to col-md-push-8
<div class="page-header row">
<img class="col-md-4 col-md-push-8 img-responsive" src="/resources/images/header.png">
<hgroup class="col-md-8 col-md-pull-4">
<h1 style="color: black;">XXXX</h1>
<h3 style="color:black;">XX</h3>
</hgroup>
</div>
try this
<div class = "page-header">
<div class="row">
<div class="col-md-4">
<img class="img-responsive" src="/resources/images/header.png">
</div>
<div class="col-md-4">
<hgroup>
<h1 style="color: black;">XXXX</h1>
<h3 style="color:black;">XX</h3>
</hgroup>
</div>
</div>
</div>
Try this code:
<div class="page-header">
<div class="col-md-4 col-md-pull-4">
<img class="img-responsive" src="/resources/images/header.png">
</div>
<hgroup class="col-md-4 col-md-push-4">
<h1 style="color: black;">XXXX</h1>
<h3 style="color:black;">XX</h3>
</hgroup>
</div>
Related
yall!
I want a direct link to one of these texts, but I can't figure it out. What would be a direct link to the second 'Michael Stewart':
<div class="content">
<section class="project-details">
<div class="container">
<div class="project-details-item">
<div class="row">
<div class="project-details-info wow fadeInLeft">
<h3 class="project-details-title">
Michael Stewart<br> Attorney
</h3>
</div>
<div class="project-details-img col-md-8 col-md-offset-4">
<img alt="" class="img-responsive" src="img/projects/1-780x668.jpg">
</div>
</div>
</div>
<div class="project-details-item">
<div class="row">
<div class="project-details-info wow fadeInRight">
<h3 class="project-details-title">
Michael Stewart<br> Attorney
</h3>
</div>
<div class="project-details-img col-md-8">
<img alt="" class="img-responsive" src="img/projects/1-780x668.jpg">
</div>
</div>
</div>
You would do the following:
Your content fits in the viewport height so it isn't going to jump unless you have more content with an overflow.
Whichever element you want to jump to, you must give it a specific ID which you can only use once, and use that #id as the target for the anchor
Jump to Michael
<div class="content">
<section class="project-details">
<div class="container">
<div class="project-details-item">
<div class="row">
<div class="project-details-info wow fadeInLeft" id>
<h3 class="project-details-title">
Michael Stewart<br> Attorney
</h3>
</div>
<div class="project-details-img col-md-8 col-md-offset-4">
<img alt="" class="img-responsive" src="img/projects/1-780x668.jpg">
</div>
</div>
</div>
<div class="project-details-item">
<div class="row">
<div class="project-details-info wow fadeInRight">
<h3 class="project-details-title" id="michealStew">
Michael Stewart<br> Attorney
</h3>
</div>
<div class="project-details-img col-md-8">
<img alt="" class="img-responsive" src="img/projects/1-780x668.jpg">
</div>
</div>
</div>
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>
want to make this responsive by using image as bg in HTML onlyHTML file
I want to set model image as responsive background to main . adding CSS property like max-width is not working to div.
how to overlap bootstraps div?
<div class="game-cover">
<div class="container-fluid" id="about">
<div class="row" style="background: url({{ game.game_cover.url }})">
<div class="col-md-6 hidden-xs">
</div>
<div class="col-md-6 col-xs-12">
<div class="game-header">
<h2 class="text-uppercase" style="color: whitesmoke"> {{ game.game_title }} </h2>
<hr class="divider">
</div>
<div class="game-details">
<p class="text-justify" style="color: whitesmoke">{{ game.game_intro }}
</p>
</div>
</div>
</div>
</div>
</div>
what i want to do is this and make them overlap
<div class="game-cover">
<div class="container-fluid" id="about">
<div class="row">
<div class="col-md-12">
<img class="img-responsive" src="{{ game.game_cover.url }}">
</div>
<div class="col-md-6 hidden-xs">
</div>
<div class="col-md-6 col-xs-12">
<div class="game-header">
<h2 class="text-uppercase" style="color: whitesmoke"> {{ game.game_title }} </h2>
<hr class="divider">
</div>
<div class="game-details">
<p class="text-justify" style="color: whitesmoke">{{ game.game_intro }}
</p>
</div>
</div>
</div>
</div>
</div>
My png images gets really small when I put them inside a column in a row. However they are fine when there is not column but then they do not appear as a row and appear one above the other. I have no idea what may be causing the problem.
What I want to do: I want them to appear like this.
<div class="container">
<div class="row" id="parent">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 block left">
<div class="heading">
<h3> Simple to Enjoy </h3>
</div>
<div class="inside">
<div class="row">
<div class=""> <!--These Images!!!-->
<img class="img img-responsive img-sec-4" src="images\home_section_4_free_ride.png">
<p>Free Rides </p>
</div>
<div class="">
<img class="img img-responsive img-sec-4" src="images\home_section_4_membership.png">
<p>Free XXX Membership </p>
</div>
</div>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 block center">
<div class="heading">
<h3> Simple to Earn </h3>
</div>
<div class="inside">
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 block right">
<div class="heading">
<h3> Simple to Save </h3>
</div>
<div class="inside">
</div>
</div>
</div>
</div>
Sorry for bad english and indent.
Here is my CSS:
#parent {
text-align:center;
height:400px;
width:100%;
}
.center {
margin:auto
}
.left {
margin:auto auto auto 0;
}
.right {
margin:auto 0 auto auto;
}
.img-sec-4 {
height: auto;
width: auto;
}
EDIT:
Here is the screenshot of my result:
(The red highlighted area is where the problem is)
simply add class col-xs-6 to the div wrapping those images (each one)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row" id="parent">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 block left">
<div class="heading">
<h3> Simple to Enjoy </h3>
</div>
<div class="inside">
<div class="row">
<div class="col-xs-6">
<!--These Images!!!-->
<img class="img img-responsive img-sec-4" src="//lorempixel.com/200/200">
<p>Free Rides</p>
</div>
<div class="col-xs-6">
<img class="img img-responsive img-sec-4" src="//lorempixel.com/200/200">
<p>Free XXX Membership</p>
</div>
</div>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 block center">
<div class="heading">
<h3> Simple to Earn </h3>
</div>
<div class="inside">
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 block right">
<div class="heading">
<h3> Simple to Save </h3>
</div>
<div class="inside">
</div>
</div>
</div>
</div>
I'm experiencing a layout issue with my website (done using bootstrap 3)
For some reason the pictures alignment is messy (see pictures below)
Any idea what is wrong?
What I'd like:
What I have:
<section id="team">
<div class="row">
<div class="col-xs-2 col-sm-4">
<div class="team-member">
<div class="image" style="background-image:url(../images/male-employee.png)">
</div>
<p class="name">John Smith</p>
<p class="position">Fondateur
<br>Directeur Général</p>
</div>
</div>
<div class="col-xs-2 col-sm-4">
<div class="team-member">
<div class="image" style="background-image:url(../images/female-employee.png)">
</div>
<p class="name">John Smith</p>
<p class="position">Responsable diétéaires</p>
</div>
</div>
<div class="col-xs-2 col-sm-4">
<div class="team-member">
<div class="image" style="background-image:url(../images/female-employee.png)">
</div>
<p class="name">John Smithr</p>
<p class="position">Responsable dfsf, maux</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-sm-4">
<div class="team-member">
<div class="image" style="background-image:url(../images/male-employee.png)">
</div>
<p class="name">John Smith</p>
<p class="position">Responsable stome</p>
</div>
</div>
<div class="col-xs-2 col-sm-4">
<div class="team-member">
<div class="image" style="background-image:url(../images/female-employee.png)">
</div>
<p class="name">John Smith</p>
<p class="position">Responsable Facturation</p>
</div>
</div>
<div class="col-xs-2 col-sm-4">
<div class="team-member">
<div class="image" style="background-image:url(../images/male-employee.png)">
</div>
<p class="name">John Smith</p>
<p class="position">Technicien</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-sm-4 col-md-offset-2">
<div class="team-member">
<div class="image" style="background-image:url(../images/female-employee.png)">
</div>
<p class="name">John Smith</p>
<p class="position">Accueil Clients et Secrétariat</p>
</div>
</div>
<div class="col-xs-2 col-sm-4">
<div class="team-member">
<div class="image" style="background-image:url(../images/female-employee.png)">
</div>
<p class="name">John Smith</p>
<p class="position">Responsable administrative et assistante de Direction</p>
</div>
</div>
</div>
</section>
After each 3th div you could add this line to fix your height issue:
<div class="clearfix hidden-xs"></div>
Explanation:
The issue was occured by having divs with different heights. Since in bootstrap all col-* classes are floated, it's required to have some kind of clearfixing in similar cases to avoid misalignment. In this particular case the clearfix should not be applied to extra small screens because in that case there are 6 cols in a row instead of 3, so this is why i have used the hidden-xs class.
You need to add more rows in your divs. Right now the code isn't recognizing your columns in the code properly because it doesn't have anywhere to put them. I would edit your code for you but I'm on my phone.
Try putting a rowbefore the first member and ending row after the last member of the row and so on. Hope it helps.