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>
Related
good day, I have a goal of aligning all images and test in my 12 grid bootstrap column. i divided it in 6, 4, and 2 but the icons in the 2 column does not match the length with the other columns. i have images of the current one and the layout that i intended to create.
<div class="container-full col-md-12">
<div class="row">
<div class="col-md-6">
<img src="img/pic1.jpg" class="display_img">
</div>
<div class="col-md-4">
<h1 class="text-center">A Wealth of Deals for Wellness</h1>
</div>
<div class="col-md-2">
<img src="img/link_beauty.png">
<img src="img/link_health.png">
<img src="img/link_wellness.png">
<img src="img/link_partners.png">
</div>
</div>
</div>
You can add class="img-responsive" class to <img> tag for creating the images responsive. Please see the below updated code:
<div class="container-full col-md-12">
<div class="row">
<div class="col-md-6">
<img src="img/pic1.jpg" class="display_img img-responsive">
</div>
<div class="col-md-4">
<h1 class="text-center">A Wealth of Deals for Wellness</h1>
</div>
<div class="col-md-2">
<img src="img/link_beauty.png" class="img-responsive">
<img src="img/link_health.png" class="img-responsive">
<img src="img/link_wellness.png" class="img-responsive">
<img src="img/link_partners.png" class="img-responsive">
</div>
</div>
</div>
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>
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.
I have divided my grid system following way.
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="slider"></div>
<!--divided column into 6/6-->
<div class="col-md-6">
<img src="img/2.jpg" style="width: 150px;height: 150px;" class="img-thumbnail" />
<img src="img/2.jpg" style="width: 150px;height: 150px;" class="img-thumbnail"/>
<img src="img/2.jpg" style="width: 150px;height: 150px;" class="img-thumbnail"/>
</div>
<div class="col-md-6">
<p>some content with image</p>
</div>
</div>
<div class="col-md-4">
some content plus image
</div>
</div>
</div>
My problem is I can't set 3 images in that div because of less width. Can any one tell how I can make it work. If I am doing any think wrong in my grid system please guide me.
Thank you
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="slider"></div>
<!--divided column into 6/6-->
<div class="col-md-6">
<div class="col-md-4">
<img src="img/2.jpg" style="width: 150px;height: 150px;" class="img-thumbnail" />
</div>
<div class="col-md-4">
<img src="img/2.jpg" style="width: 150px;height: 150px;" class="img-thumbnail"/>
</div>
<div class="col-md-4">
<img src="img/2.jpg" style="width: 150px;height: 150px;" class="img-thumbnail"/>
</div>
</div>
<div class="col-md-6">
<p>some content with image</p>
</div>
</div>
<div class="col-md-4">
some content plus image
</div>
</div>
Hope This will work..
You can use with to adding a custom class
.thumb_img .img-thumbnail{
width:32%;
padding:4px;
margin-right:1%;
float:left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="slider"></div>
<!--divided column into 6/6-->
<div class="col-md-6 thumb_img">
<div class="row">
<img src="img/2.jpg" class="img-thumbnail img-responsive" />
<img src="img/2.jpg" class="img-thumbnail img-responsive" />
<img src="img/2.jpg" class="img-thumbnail img-responsive" />
</div>
</div>
<div class="col-md-6">
<p>some content with image</p>
</div>
</div>
</div>
</div>
Not a 100% sure about your question but..
1) you can only nest col-'s in row's. i.e:
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
2) each time you've divided a row in multiple columns, then inside the nested row you have 12 columns available again. i.e:
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
</div>
<div class="col-md-4">
</div>
</div>
Or you can create 3 columns inside a row:
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
</div>
<div class="col-md-4">
</div>
</div>
I.e. 4 * 3 = 12 columns.
I am having a hard time getting 5 img-responsives classes in a row with bootstrap. I am new to bootstrap so I may be way off here but this is what I have right now.
HTML:
<div class="container" id="pics" >
<div class="row">
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<img class="img-responsive" src="img/usscreenshot.png">
<h3> Make a real time post with your friends!</h3>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<img class="img-responsive" src="img/mainscreenshot-01.png">
<h3> Discover new groups of people nearby!</h3>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<img class="img-responsive" src="img/conversationsscreenshot-01.png">
<h3>Chat with interesting groups!</h3>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<img class="img-responsive" src="img/eventscreenshot-01.png">
<h3>Find cool places to go!</h3>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<img class="img-responsive" src="img/eventscreenshot-01.png">
<h3>Find cool places to go!</h3>
</div>
</div>
</div>
</div>
</section>
I can get 4 img's in a nice row with proper spacing and it seems I have plenty of margin on either side for one more. I would like all 5 img's to be on one row and to all be responsive?
As far as mobile goes, I would only need 1 column scroll of all 5 images, I can get that to work just fine with what I have.
Thanks for any help.
You are using col-md-3 which will separate row in 4 equal column and the last column will move to next line instead set offset of 1 column and make each column of 2 point like col-md-2
<div class="container" id="pics" >
<div class="row">
<div class="col-md-2 col-md-offset-1 text-center">
<div class="service-box">
<img class="img-responsive" src="img/usscreenshot.png">
<h3> Make a real time post with your friends!</h3>
</div>
</div>
<div class="col-md-2 text-center">
<div class="service-box">
<img class="img-responsive" src="img/mainscreenshot-01.png">
<h3> Discover new groups of people nearby!</h3>
</div>
</div>
<div class="col-md-2 text-center">
<div class="service-box">
<img class="img-responsive" src="img/conversationsscreenshot-01.png">
<h3>Chat with interesting groups!</h3>
</div>
</div>
<div class="col-md-2 text-center">
<div class="service-box">
<img class="img-responsive" src="img/eventscreenshot-01.png">
<h3>Find cool places to go!</h3>
</div>
</div>
<div class="col-md-2 text-center">
<div class="service-box">
<img class="img-responsive" src="img/eventscreenshot-01.png">
<h3>Find cool places to go!</h3>
</div>
</div>
</div>
</div>