I am using bootstraps grid system to try and align the text next to the image. For some reason, it's not working for me. This what it looks like and I just want the text next to the image on the right side.
Here is my html:
<div class="container">
<h1 class="text-center">Executive Directors</h1>
<div class="row text-center">
<div class="col-md-6">
<img class="" src="/wp-content/themes/creativeforces/images/majapic.jpg" width="250px">
<h3 class="text-center">Maja Miletich</h3>
<p><strong>Maja Miletich </strong>is the CEO of Zip Zap Zop Kids, LLC. Maja has worked with children on many levels. Having a brother with Autism has given Maja an understanding of how powerful communication is for ALL children. Maja has worked for years as a teacher where she practices emergent curriculum. Maja has studied theater and improv at A.C.T. in San Francisco as well as graduated from The Second City Training Center in Hollywood where she studied improv and sketch comedy. Maja has her Bachelors Degree in Early Childhood Education. Maja's focus is on inclusive classrooms where curriculum is designed to allow children and young adults to feel comfortable expressing themselves in whichever way they feel most comfortable. Maja believes when we can share with one another what has been taught then, and only then, are we actually learning.</p>
</div>
</div>
<div class="row text-center">
<div class="col-md-6">
<img class="" src="/wp-content/themes/creativeforces/images/majapic.jpg" width="250px">
<h3 class="text-center">Maja Miletich</h3>
<p><strong>Maja Miletich </strong>is the CEO of Zip Zap Zop Kids, LLC. Maja has worked with children on many levels. Having a brother with Autism has given Maja an understanding of how powerful communication is for ALL children. Maja has worked for years as a teacher where she practices emergent curriculum. Maja has studied theater and improv at A.C.T. in San Francisco as well as graduated from The Second City Training Center in Hollywood where she studied improv and sketch comedy. Maja has her Bachelors Degree in Early Childhood Education. Maja's focus is on inclusive classrooms where curriculum is designed to allow children and young adults to feel comfortable expressing themselves in whichever way they feel most comfortable. Maja believes when we can share with one another what has been taught then, and only then, are we actually learning.</p>
</div>
</div>
</div>
any help would be appreciated!
In Bootstrap's grid system, to get two elements side-by-side you would need to nest two .col divs within a single .row, like below:
<div class="container">
<h1 class="text-center">Executive Directors</h1>
<div class="row text-center">
<div class="col-md-6">
<img class="" src="/wp-content/themes/creativeforces/images/majapic.jpg" width="250px">
<h3 class="text-center">Maja Miletich</h3>
</div>
<div class="col-md-6">
<p><strong>Maja Miletich </strong>is the CEO of Zip Zap Zop Kids, LLC. Maja has worked with children on many levels. Having a brother with Autism has given Maja an understanding of how powerful communication is for ALL children. Maja has worked for years as a teacher where she practices emergent curriculum. Maja has studied theater and improv at A.C.T. in San Francisco as well as graduated from The Second City Training Center in Hollywood where she studied improv and sketch comedy. Maja has her Bachelors Degree in Early Childhood Education. Maja's focus is on inclusive classrooms where curriculum is designed to allow children and young adults to feel comfortable expressing themselves in whichever way they feel most comfortable. Maja believes when we can share with one another what has been taught then, and only then, are we actually learning.</p>
</div>
</div>
</div>
To learn more about bootstrap's grid system go here.
change your code with this
<div class="container">
<h1 class="text-center">Executive Directors</h1>
<div class="row text-center">
<div class="col-md-6">
<img class="" src="/wp-content/themes/creativeforces/images/majapic.jpg" width="250px">
</div>
<div class="col-md-6">
<h3 class="text-center">Maja Miletich</h3>
<p><strong>Maja Miletich </strong>is the CEO of Zip Zap Zop Kids, LLC. Maja has worked with children on many levels. Having a brother with Autism has given Maja an understanding of how powerful communication is for ALL children. Maja has worked for years as a teacher where she practices emergent curriculum. Maja has studied theater and improv at A.C.T. in San Francisco as well as graduated from The Second City Training Center in Hollywood where she studied improv and sketch comedy. Maja has her Bachelors Degree in Early Childhood Education. Maja's focus is on inclusive classrooms where curriculum is designed to allow children and young adults to feel comfortable expressing themselves in whichever way they feel most comfortable. Maja believes when we can share with one another what has been taught then, and only then, are we actually learning.</p>
</div>
</div>
<div class="row text-center">
<div class="col-md-6">
<img class="" src="/wp-content/themes/creativeforces/images/majapic.jpg" width="250px">
</div>
<div class="col-md-6">
<h3 class="text-center">Maja Miletich</h3>
<p><strong>Maja Miletich </strong>is the CEO of Zip Zap Zop Kids, LLC. Maja has worked with children on many levels. Having a brother with Autism has given Maja an understanding of how powerful communication is for ALL children. Maja has worked for years as a teacher where she practices emergent curriculum. Maja has studied theater and improv at A.C.T. in San Francisco as well as graduated from The Second City Training Center in Hollywood where she studied improv and sketch comedy. Maja has her Bachelors Degree in Early Childhood Education. Maja's focus is on inclusive classrooms where curriculum is designed to allow children and young adults to feel comfortable expressing themselves in whichever way they feel most comfortable. Maja believes when we can share with one another what has been taught then, and only then, are we actually learning.</p>
</div>
</div>
</div>
in each row you need do add two cols, one for the picture and one for the description, like this:
<div class="row">
<div class="col-md-6">
<img class="" src="/wp-content/themes/creativeforces/images/majapic.jpg" width="250px">
</div>
<div class="col-md-6">
<p> desccription here</p>
</div>
</div>
the description now appear next to the image.
in the bootstrap's page there is a grid's tutorial, learn it here.
Related
I am trying to line up 3 different columns under the same class using flexbox.
But when i enter the HTML on my browser, all the content in the different containers are lined in a single line from top too bottom, instead of having the columns beside each other from left to right, and the items inside goes from top to bottom.
Here is the relevant part of the HTML code(all inside the body tag.)
<div class="container">
<article class="text item">
<a href="https://www.foxnews.com/category/person/joe-biden">President
Biden</a> is set to meet with Ukrainian President Volodymyr Zelensky
at the White House on Wednesday – a visit that is expected to build on
and amplify the bilateral relationship, and to underscore the United
States’ "ironclad" commitment to Ukraine’s security and sovereignty,
senior administration officials said.
</article>
<p class="text item">
The two leaders have spoken twice by phone – once in April, and once in
June before <a href="https://www.shorturl.at/puMQX">Biden met with
Russian President Vladimir Putin in Geneva</a>.
</p>
<p class="text item">
Senior administration officials said Biden and Zelensky will chair an
expanded bilateral meeting with their key advisers, and will later
transition to a one-on-one conversation, giving them "the space to
communicate with one another more directly."
</p>
</div>
<a href="#" class="text seperator">FLASHBACK: BIDEN ASSURES ZELENSKY HE WILL STAND UP FOR
UKRAINE SOVEREIGNTY IN PUTIN SUMMIT
</a>
<div class="container">
<p class="text items">
Officials said Biden will convey his <em>"ironclad commitment"</em> to
Ukraine’s security, sovereignty and Euro-Atlantic aspirations. Biden
is also expected to discuss the security situation that Ukraine is
facing, as the nation continues to see <a href="#">acts of Russian
aggression</a> in the region.
</p>
<p class="text items">
Biden also will discuss ways in which the U.S. could continue to provide
security assistance to Ukraine, officials said – noting that the U.S
. will provide a new $60 million security assistance package for Ukraine
that will include additional Javelin anti-armor systems and other
defensive lethal and non-lethal capabilities.
</p>
<p class="text items">
So far, the U.S. has committed $2.5 billion in support of Ukraine forces
since 2014, including more than $400 million in 2021 alone.
</p>
<p class="text items">
As for reform, Biden is set to discuss the ways in which Ukraine has made
"progress on governance, rule of law, and anti-corruption reforms since
2014." Biden, while serving as vice president for former President
Obama, was tasked with overseeing the administration’s Ukraine policy.
</p>
<p class="text items">
The president is also expected to discuss cooperation efforts to bolster
collaboration on shared energy and climate goals, including through a
reinvigorated Strategy Energy and Climate Dialogue, which officials say
would give a "strong" platform to "advance energy security objectives,
enhance economic ties, and achieve ambitious climate targets."
</p>
</div>
BIDEN SAYS UKRAINE HAS NOT MET NATO MEMBERSHIP CRITERIA
<div class="container">
<p class="text items">
As for the <a href="https://www.shorturl.at/lxCF2">coronavirus pandemic
</a>, officials said the U.S. has "stood shoulder-to-shoulder" with the
Zelensky administration, and has already provided $55 million in
COVID-related assistance, and donated nearly 2.2 million doses of COVID
vaccines to Ukraine.
</p>
<p class="text items">
"We intend to continue providing assistance to Ukraine, including cold
chain storage support and an additional $12.8 million in COVID
-related assistance," an official said.
</p>
<p class="text items">
Officials said the U.S. will also provide an additional $45 million in
humanitarian assistance to help address Ukrainians who remain impacted
by the crisis with Russia.
</p>
<p class="text items">
Meanwhile, senior administration officials said that after the meeting,
the U.S. and Ukraine will announce the reinvigoration of the Strategic
Partnership Commission, which they say has not met in three years.
</p>
<p class="text items">
Senior administration officials said they anticipate a meeting this fall
between Secretary of State Antony Blinken and Ukraine’s foreign minister
to approve a new charter between the U.S. and Ukraine that will "set
out the parameters for how we can work closely together to meet these
21st-century challenges."
</p>
</div>
and here is the relevant CSS included.
CSS:
.container
{
display: flex;
flex-flow: column wrap;
justify-content: space-evenly;
align-items: stretch;
align-content: center;
}
.items
{
flex-grow: 1;
flex-shrink: 3;
align-self: auto;
}
In this snipper, I want the Bootstrap columns to have their height defined by their content, not the tallest element that is visible in the same row. In other words, I want each of these cards to start a couple of pixels below the one on-top whether or not there is a large card in that topping row. How can I go about doing this?
.card-container {
width: 100%;
overflow: hidden;
position: relative;
background-color: white;
margin-bottom: 15px;
box-shadow: 0 0 10px rgb(0 0 0 / 30%);
border: 1px solid rgba(204, 204, 204, 1);
transition: all 0.5s ease-in-out;
}
.card-container:hover {
box-shadow: 0 0 10px rgb(0 0 0 / 50%);
}
.card-image {
max-height: 200px;
overflow: hidden;
}
.card-image-src {
width: 100%;
transition: all 1s ease-in-out;
}
.card-image-src:hover {
transform: scale(1.1);
}
.card-text {
padding: 15px;
}
.card-title {
text-align: center;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container p-3 my-3">
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="card-container">
<div class="card-image d-flex align-items-center">
<img src="https://online-learning.harvard.edu/sites/default/files/styles/header/public/course/cs50x-original.jpg" class="card-image-src">
</div>
<div class="card-text">
<h1 class="card-title">
Harvard CS50
</h1>
<p class="card-description">
This is CS50x , Harvard University's introduction to the intellectual enterprises of computer science and the art of programming for majors and non-majors alike, with or without prior programming experience. An entry-level course taught by David J. Malan,
CS50x teaches students how to think algorithmically and solve problems efficiently. Topics include abstraction, algorithms, data structures, encapsulation, resource management, security, software engineering, and web development. Languages
include C, Python, SQL, and JavaScript plus CSS and HTML. Problem sets inspired by real-world domains of biology, cryptography, finance, forensics, and gaming. The on-campus version of CS50x , CS50, is Harvard's largest course. Students who
earn a satisfactory score on 9 problem sets (i.e., programming assignments) and a final project are eligible for a certificate. This is a self-paced course–you may take CS50x on your own schedule.
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card-container">
<div class="card-image d-flex align-items-center">
<img src="https://online-learning.harvard.edu/sites/default/files/styles/header/public/course/cs50x-original.jpg" class="card-image-src">
</div>
<div class="card-text">
<h1 class="card-title">
Harvard CS50
</h1>
<p class="card-description">
This is CS50x , Harvard University's introduction to the intellectual enterprises of computer science and the art of programming for majors and non-majors alike, with or without prior programming experience.
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card-container">
<div class="card-image d-flex align-items-center">
<img src="https://online-learning.harvard.edu/sites/default/files/styles/header/public/course/cs50x-original.jpg" class="card-image-src">
</div>
<div class="card-text">
<h1 class="card-title">
Harvard CS50
</h1>
<p class="card-description">
This is CS50x , Harvard University's introduction to the intellectual enterprises of computer science and the art of programming for majors and non-majors alike, with or without prior programming experience. An entry-level course taught by David J. Malan,
CS50x teaches students how to think algorithmically and solve problems efficiently. Topics include abstraction, algorithms, data structures, encapsulation, resource management, security, software engineering, and web development. Languages
include C, Python, SQL, and JavaScript plus CSS and HTML. Problem sets inspired by real-world domains of biology,
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card-container">
<div class="card-image d-flex align-items-center">
<img src="https://online-learning.harvard.edu/sites/default/files/styles/header/public/course/cs50x-original.jpg" class="card-image-src">
</div>
<div class="card-text">
<h1 class="card-title">
Harvard CS50
</h1>
<p class="card-description">
This is CS50x , Harvard University's introduction to the intellectual enterprises of computer science and the art of programming for majors and non-majors alike, with or without prior programming experience. An entry-level course taught by David J. Malan,
CS50x teaches students how to think algorithmically and solve problems efficiently. Topics include abstraction, algorithms, data structures, encapsulation, resource management, security, software engineering, and web development. Languages
include C, Python, SQL, and JavaScript plus CSS and HTML. Problem sets inspired by real-world domains of biology, cryptography, finance, forensics, and gaming. The on-campus version of CS50x , CS50, is Harvard's largest course. Students who
earn a satisfactory score on 9 problem sets (i.e., programming assignments) and a final project are eligible for a certificate. This is a self-paced course–you may take CS50x on your own schedule.
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card-container">
<div class="card-image d-flex align-items-center">
<img src="https://online-learning.harvard.edu/sites/default/files/styles/header/public/course/cs50x-original.jpg" class="card-image-src">
</div>
<div class="card-text">
<h1 class="card-title">
Harvard CS50
</h1>
<p class="card-description">
This is CS50x , Harvard University's introduction to the intellectual enterprises of computer science and the art of programming for majors and non-majors alike, with or without prior programming experience. An entry-level course taught by David J. Malan,
CS50x teaches students how to think algorithmically and solve problems efficiently. Topics include abstraction, algorithms, data structures, encapsulation, resource management, security, software engineering, and web development. Languages
include C, Python, SQL, and JavaScript plus CSS and HTML. Problem sets inspired by real-world domains of biology, cryptography, finance, forensics, and gaming. The on-campus version of CS50x , CS50, is Harvard's largest course. Students who
earn a satisfactory score on 9 problem sets (i.e., programming assignments) and a final project are eligible for a certificate. This is a self-paced course–you may take CS50x on your own schedule.
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card-container">
<div class="card-image d-flex align-items-center">
<img src="https://online-learning.harvard.edu/sites/default/files/styles/header/public/course/cs50x-original.jpg" class="card-image-src">
</div>
<div class="card-text">
<h1 class="card-title">
Harvard CS50
</h1>
<p class="card-description">
This is CS50x , Harvard University's introduction to the intellectual enterprises of computer science and the art of programming for majors and non-majors alike, with or without prior programming experience. An entry-level course taught by David J. Malan,
CS50x teaches students how to think algorithmically and solve problems efficiently. Topics include abstraction, algorithms, data structures, encapsulation, resource management, security, software engineering, and web development. Languages
include C, Python, SQL, and JavaScript plus CSS and HTML. Problem sets inspired by real-world domains of biology, cryptography, finance, forensics, and gaming. The on-campus version of CS50x , CS50, is Harvard's largest course. Students who
earn a satisfactory score on 9 problem sets (i.e., programming assignments) and a final project are eligible for a certificate. This is a self-paced course–you may take CS50x on your own schedule.
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card-container">
<div class="card-image d-flex align-items-center">
<img src="https://online-learning.harvard.edu/sites/default/files/styles/header/public/course/cs50x-original.jpg" class="card-image-src">
</div>
<div class="card-text">
<h1 class="card-title">
Harvard CS50
</h1>
<p class="card-description">
This is CS50x , Harvard University's introduction to the intellectual enterprises of computer science and the art of programming for majors and non-majors alike, with or without prior programming experience. An entry-level course taught by David J. Malan,
CS50x teaches students how to think algorithmically and solve problems efficiently. Topics include abstraction, algorithms, data structures, encapsulation, resource management, security, software engineering, and web development. Languages
include C, Python, SQL, and JavaScript plus CSS and HTML. Problem sets inspired by real-world domains of biology, cryptography, finance, forensics, and gaming. The on-campus version of CS50x , CS50, is Harvard's largest course. Students who
earn a satisfactory score on 9 problem sets (i.e., programming assignments) and a final project are eligible for a certificate. This is a self-paced course–you may take CS50x on your own schedule.
</p>
</div>
</div>
</div>
</div>
</div>
Can you please check the below code link? Hope it will work for you. You need to just give height: calc(100% - 15px); to .card-container.
Please refer to this link:
https://jsfiddle.net/yudizsolutions/zqmxecdo/1/
This is a really weird issue and I'm 100% sure I'm closing my html correctly.
If I have more then two child divs, it'll escape the parent. Literally.
So this works:
<div class="info-box">
<div class="container">
<div class="info-title">Why would you buy Buy LoL Account?</div>
<div class="info-description">
Are you searching for an affordable high-quality League of Legends account? You’ve come to the right place.
We sell Smurf accounts with impressive rankings, from Diamond, Silver, Gold, and even Platinum but the big question
is why should you buy from us and not the other online sellers?
</div>
</div>
</div>
<div class="info-box">
<div class="container">
<div class="info-title">Buy LoL Smurfs Accounts</div>
A Smurf is an account owned by a player who has another level 30 account. The Smurf account is mainly used for training purposes against other more skilled opponents. We have Smurfs accounts already in level 30 so you won’t need to level them higher again. These will provide you with the quickest way to amass riot points and rise to level 30 in League of Legends. When you buy Smurfs account from us, it will be delivered instantly with all the necessary instructions.
</div>
</div>
</div>
However if I add one more:
<div class="info-box">
<div class="container">
<div class="info-title">Why would you buy Buy LoL Account?</div>
<div class="info-description">
Are you searching for an affordable high-quality League of Legends account? You’ve come to the right place.
We sell Smurf accounts with impressive rankings, from Diamond, Silver, Gold, and even Platinum but the big question
is why should you buy from us and not the other online sellers?
</div>
</div>
</div>
<div class="info-box">
<div class="container">
<div class="info-title">Buy LoL Smurfs Accounts</div>
A Smurf is an account owned by a player who has another level 30 account. The Smurf account is mainly used for training purposes against other more skilled opponents. We have Smurfs accounts already in level 30 so you won’t need to level them higher again. These will provide you with the quickest way to amass riot points and rise to level 30 in League of Legends. When you buy Smurfs account from us, it will be delivered instantly with all the necessary instructions.
</div>
</div>
</div>
<div class="info-box">
<div class="container">
<div class="info-title">Buy LoL Smurfs Accounts</div>
A Smurf is an account owned by a player who has another level 30 account. The Smurf account is mainly used for training purposes against other more skilled opponents. We have Smurfs accounts already in level 30 so you won’t need to level them higher again. These will provide you with the quickest way to amass riot points and rise to level 30 in League of Legends. When you buy Smurfs account from us, it will be delivered instantly with all the necessary instructions.
</div>
</div>
</div>
I get this:
But it does not look like that in my editor:
<div class="info-container">
<div class="info-box">
<div class="container">
<div class="info-title">Why would you buy Buy LoL Account?</div>
<div class="info-description">
Are you searching for an affordable high-quality League of Legends account? You’ve come to the right place.
We sell Smurf accounts with impressive rankings, from Diamond, Silver, Gold, and even Platinum but the big question
is why should you buy from us and not the other online sellers?
</div>
</div>
</div>
<div class="info-box">
<div class="container">
<div class="info-title">Buy LoL Smurfs Accounts</div>
A Smurf is an account owned by a player who has another level 30 account. The Smurf account is mainly used for training purposes against other more skilled opponents. We have Smurfs accounts already in level 30 so you won’t need to level them higher again. These will provide you with the quickest way to amass riot points and rise to level 30 in League of Legends. When you buy Smurfs account from us, it will be delivered instantly with all the necessary instructions.
</div>
</div>
</div>
<div class="info-box">
<div class="container">
<div class="info-title">Get a Ready-Made League of Legends Lvl 30 Account</div>
<div class="info-description">
If you are interested in having your own already developed League of Legends lvl 30 account, then you are in the right place. A level 30 they comes with numerous benefits. If you are a new player, you’ll begin at level 1, which is limited in the number of Champions, summoner spells, masteries, runes, and game modes you have. It’s a very boring level to start from. As you continue playing, you gradually unlock more game features but truth be told, it can take a really long time to unlock the most critical features. You need to reach level 30 to unlock features that allow you to play ranked matches, which are where all the fun in LoL is found. We provide you with a faster way to get to this level. Simply buy a level 30 account and begin playing those exciting ranked matches right away. You don’t need to spend months trying to level up.
</div>
</div>
</div>
<div class="info-box">
<div class="container">
<div class="info-title">The Difference Between Unranked and Ranked Accounts</div>
<div class="info-description">
The major difference between an unranked and a ranked League of Legends account can be described as the difference between playing a normal casual game and playing a highly competitive game. Ranked matches are more exciting and highly competitive than unranked accounts, adding fun and enjoyment to the game. You cannot play a ranked game until you have a level 30 summoner, Ranked BlazingBoost, and 16 Champions. We have ranked accounts that are ready for competitive matches. With our already developed level 30 League of Legends account, you can begin playing exciting ranked matches immediately.
</div>
</div>
</div>
<div class="info-box">
<div class="container">
<div class="info-title">Get NA or EUW Accounts</div>
<div class="info-description">
You can buy a LoL account from us regardless of your location. We sell uranked accounts for different geographic regions including North America and EUW. Players from the US and Canada are usually connected via the NA server while their European counterparts connect via the EUW server.
We have both ranked and unranked accounts for different regions. They are all safe accounts that you can use without fear of running into a sudden ban. We also provide safe payment processing and instant delivery for accounts in every region worldwide.
</div>
</div>
</div>
</div>
What am I doing wrong here?
There is an extra </div> in your code which is because you haven't add <div class="info-description"> for the second and third child nodes, try this:
<div class="info-container">
<div class="info-box">
<div class="container">
<div class="info-title">Why would you buy Buy LoL Account?</div>
<div class="info-description">
Are you searching for an affordable high-quality League of Legends account? You’ve come to the right place.
We sell Smurf accounts with impressive rankings, from Diamond, Silver, Gold, and even Platinum but the big question
is why should you buy from us and not the other online sellers?
</div>
</div>
</div>
<div class="info-box">
<div class="container">
<div class="info-title">Buy LoL Smurfs Accounts</div>
<div class="info-description">
A Smurf is an account owned by a player who has another level 30 account. The Smurf account is mainly used for training purposes against other more skilled opponents. We have Smurfs accounts already in level 30 so you won’t need to level them higher again. These will provide you with the quickest way to amass riot points and rise to level 30 in League of Legends. When you buy Smurfs account from us, it will be delivered instantly with all the necessary instructions.
</div>
</div>
</div>
<div class="info-box">
<div class="container">
<div class="info-title">Buy LoL Smurfs Accounts</div>
<div class="info-description">
A Smurf is an account owned by a player who has another level 30 account. The Smurf account is mainly used for training purposes against other more skilled opponents. We have Smurfs accounts already in level 30 so you won’t need to level them higher again. These will provide you with the quickest way to amass riot points and rise to level 30 in League of Legends. When you buy Smurfs account from us, it will be delivered instantly with all the necessary instructions.
</div>
</div>
</div>
</div>
to avoid such problems try using IDEs they have basic functionalities to check correctness of the HTML.
I'm working with several rows that contain two columns. One column containing text and the other containing an image. Each row alternates where the copy and image are displayed.
The 1st row has the image on the left, copy on right.
The 2nd row has the image on the right, copy on left.
The 3rd row has the image on the left, copy on right... and so on...
[website: http://www.raa.com/dev/who-we-are.shtml#team]
I'm new to Bootstrap and am trying to figure out how (on Mobile devices) to get the image to appear below the copy on **ALL ROWS.** Currently when viewing the site, the image and copy alternate in position for each row. I tried the push/pull commands with no success.
Help!!
******HTML Code******
<!-- start Ronald Simmons area -->
<section id="ronaldSimmons">
<div class="container">
<div class="row">
<div class="col-md-5">
<img src="images/team-pics/simmons.png">
</div>
<div class="col-md-7">
<font size="+3" color="#396598">MANAGEMENT</font>
<p></p>
<h2>
<div class="top-buffer-md">Ronald E. Simmons</div>
</h2>
<p class="lead"><font color="#396598">Chairman</font></p>
<p>Ron has been in the investment industry for over 25 years, and has worked with retiring crew member
families since 1987. He is the co-founder and Chairman of Retirement Advisors of America. In 2012
Ron was elected to serve in Texas State House of Representatives. He is a national speaker on
leadership and entrepreneurship and is very involved with the charitable organization Equip. Ron
serves as Vice Chairman of the national Board of Directors of the Autism Society of America and is
also involved with his church, Prestonwood Baptist, as a teacher in the young married division. He
is a graduate of Dallas Baptist University with a Bachelors degree in Business.</p>
<p><font color="#396598">Back to Top</font>
</div>
</div>
</div>
</section>
<!-- end Ronald Simmons area -->
Where you need to put text box on right side then you can follow this HTML structure
<section id="ronaldSimmons">
<div class="container">
<div class="row">
<div class="col-md-7 pull-right">
<font size="+3" color="#396598">MANAGEMENT</font>
<p></p>
<h2>
<div class="top-buffer-md">Ronald E. Simmons</div>
</h2>
<p class="lead"><font color="#396598">Chairman</font></p>
<p>Ron has been in the investment industry for over 25 years, and has worked with retiring crew member families since 1987. He is the co-founder and Chairman of Retirement Advisors of America. In 2012 Ron was elected to serve in Texas State House of Representatives. He is a national speaker on leadership and entrepreneurship and is very involved with the charitable organization Equip. Ron serves as Vice Chairman of the national Board of Directors of the Autism Society of America and is also involved with his church, Prestonwood Baptist, as a teacher in the young married division. He is a graduate of Dallas Baptist University with a Bachelors degree in Business.</p>
<p><font color="#396598">Back to Top</font>
</p>
</div>
<div class="col-md-5">
<img src="images/team-pics/simmons.png">
</div>
</div>
</div>
and simply add css rules on small screen
#media only screen and (max-width: 767px){
.pull-right{
float: none !important;
}
}
Because TB always force element on right with pull-right class and in your case you don't need to right align text box on small screen.
Doesn't seem effective, but would work:
<section id="ronaldSimmons">
<div class="container">
<div class="row">
<div class="col-md-7 visible-xs-*-*">
<font size="+3" color="#396598">MANAGEMENT</font><p></p>
<h2><div class="top-buffer-md">Ronald E. Simmons</div></h2>
<p class="lead"><font color="#396598">Chairman</font></p>
<p>Ron has been in the investment industry for over 25 years, and has worked with retiring crew member families since 1987. He is the co-founder and Chairman of Retirement Advisors of America. In 2012 Ron was elected to serve in Texas State House of Representatives. He is a national speaker on leadership and entrepreneurship and is very involved with the charitable organization Equip. Ron serves as Vice Chairman of the national Board of Directors of the Autism Society of America and is also involved with his church, Prestonwood Baptist, as a teacher in the young married division. He is a graduate of Dallas Baptist University with a Bachelors degree in Business.</p>
<p><font color="#396598">Back to Top</font>
</div>
<div class="col-md-5">
<img src="images/team-pics/simmons.png" >
</div>
<div class="col-md-7">
<font size="+3" color="#396598">MANAGEMENT</font><p></p>
<h2><div class="top-buffer-md">Ronald E. Simmons</div></h2>
<p class="lead"><font color="#396598">Chairman</font></p>
<p>Ron has been in the investment industry for over 25 years, and has worked with retiring crew member families since 1987. He is the co-founder and Chairman of Retirement Advisors of America. In 2012 Ron was elected to serve in Texas State House of Representatives. He is a national speaker on leadership and entrepreneurship and is very involved with the charitable organization Equip. Ron serves as Vice Chairman of the national Board of Directors of the Autism Society of America and is also involved with his church, Prestonwood Baptist, as a teacher in the young married division. He is a graduate of Dallas Baptist University with a Bachelors degree in Business.</p>
<p><font color="#396598">Back to Top</font>
</div>
</div>
</div>
</section>
If I have a two column layout
<div class="row">
<div class="large-8 push-4 columns">main content</div>
<div class="large-4 pull-8 columns">side nav</div>
</div>
If i have the below content in the main content div:
Introduction Text
Memorial Day is a US federal holiday wherein the men and women who died while serving in the United States Armed Forces are remembered.[1] The holiday, which is celebrated every year on the final Monday of May,[2] was formerly known as Decoration Day and originated after the American Civil War to commemorate the Union and Confederate soldiers who died in the Civil War. By the 20th century, Memorial Day had been extended to honor all Americans who have died while in the military service. It typically marks the start of the summer vacation season, while Labor Day marks its end.
History of the holiday
The practice of decorating soldiers' graves with flowers is an ancient custom.[5] Soldiers' graves were decorated in the U.S. before[6] and during the American Civil War. A claim was made in 1906 that the first Civil War soldier's grave ever decorated was in Warrenton, Virginia, on June 3, 1861, implying the first Memorial Day occurred there.[7] Though not for Union soldiers, there is authentic documentation that women in Savannah, Georgia, decorated Confederate soldiers' graves in 1862.[8] In 1863, the cemetery dedication at Gettysburg, Pennsylvania, was a ceremony of commemoration at the graves of dead soldiers. Local historians in Boalsburg, Pennsylvania, claim that ladies there decorated soldiers' graves on July 4, 1864.[9] As a result, Boalsburg promotes itself as the birthplace of Memorial Day.
Should the Introduction Text and the History of the holiday section each be in it's own row and column or should I be using the semantic tags? See below example:
<div class="row">
<div class="large-8 push-4 columns">
<div class="row">
<div class="large-12 columns">Introduction text and next paragraph</div>
</div>
<div class="row">
<div class="large-12 columns">History of the holiday and next paragraph</div>
</div>
</div>
</div>
<div class="row">
<div class="large-8 push-4 columns">
<section>
<div>Introduction text and next paragraph</div>
</section>
<section>
<div>History of the holiday and next paragraph</div>
</section>
</div>
</div>
According to the spec a section might be a little more semantic in this situation as you could want each section listed as a part of the document's outline. However, if you're just wrapping them for styling, a div is a better choice.
From the spec:
The section element represents a generic document or application section…The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.