I am unable to write a paragraph wrapping the table on the right. The table just expands as the paragraph expands.
I am copying the Wikipedia page format of Apj Abdul Kalam. Also, can we reduce the width of the column in the table?
Here is my codepen link: https://codepen.io/TariqueBaig/pen/zRrKpx
<body>
<div class="container">
<h1 class="display-4 text-center">A.P.J. Abdul Kalam</h1>
<h3 class="text-center font-weight-light">Missile man of India</h3>
<div class="row">
<!-- <div class="col-lg-1"></div> -->
<div class="col-lg-8">
<p><span class="font-weight-bold">Avul Pakir Jainulabdeen Abdul Kalam</span> better known as <span class="font-weight-bold">A.P.J.Abdul Kalam</span> was born in 15th October 1931.He was the 11th President of India from 2002-2007.He was born and raise
in Rameshwaram, TamilNadu, and studied physics and aerospace engineering.He spent the next four decades as a scientist and science administrator, mainly at the Defence Research and Development Organisation (DRDO) and Indian Space Research Organisation
(ISRO) and was intimately involved in India's civilian space programme and military missile development efforts.He thus came to be known as the <span class="font-italic">Missile Man of India</span> for his work on the development of ballistic
missile and launch vehicle technology.He also played a pivotal organisational, technical, and political role in India's Pokhran-II nuclear tests in 1998, the first since the original nuclear test by India in 1974.</p>
<p>Kalam was elected as the 11th President of India in 2002 with the support of both the ruling Bharatiya Janata Party and the then-opposition Indian National Congress. Widely referred to as the "People's President," he returned to his civilian life
of education, writing and public service after a single term. He was a recipient of several prestigious awards, including the Bharat Ratna, India's highest civilian honour.</p>
<p>While delivering a lecture at the Indian Institute of Management Shillong, Kalam collapsed and died from an apparent cardiac arrest on 27 July 2015, aged 83. Thousands including national-level dignitaries attended the funeral ceremony held in
his hometown of Rameshwaram, where he was buried with full state honours.</p>
</div>
<div class="col-lg-4 border border-secondary">
<figure class="figure">
<img class="figure-img img-fluid img-thumbnail" src="https://upload.wikimedia.org/wikipedia/commons/b/b0/A._P._J._Abdul_Kalam_in_2008.jpg" alt="Image of Abdul Kalam">
<figcaption class="figure-caption text-center">Kalam in 2008</figcaption>
</figure>
<h6 class="text-center bg-primary text-white">11th President of India</h6>
<p class="text-center font-weight-bold">In office<br><span class="font-weight-normal">25 July 2002 - 25 July</span></p>
<table class="table">
<thead>
</thead>
<tbody>
<tr>
<th scope="row">Prime Minister</th>
<td>Atal bihari Vajpayee<br>Manmohan Singh</td>
</tr>
<tr>
<th scope "row">Vice President</th>
<td>Krishan Kant<br>Bhairon Singh Shekhawat</td>
</tr>
<tr>
<th scope="row">Preceded By</th>
<td>K.R.Narayanan</td>
</tr>
<tr>
<th scope="row">Succeeded By</th>
<td>Pratibha Patil</td>
</tr>
</tbody>
</table>
</div>
<div class="row">
<div>
Avul Pakir Jainulabdeen Abdul Kalam was born on 15 October 1931 to a Tamil Muslim family in the pilgrimage centre of Rameswaram on Pamban Island, then in the Madras Presidency and now in the State of Tamil Nadu. His father Jainulabdeen was a boat owner
and imam of a local mosque
</div>
</div>
</div>
</div>
</body>
Bootstrap .col-{…} are structures that do not wrap, or float around each other. As their name is, they are columns.
On the other hand, floating elements can be wrapped around by text and inline elements. A floating element is one where the value of the float css property is not none. Bootstrap 4 also has a set of shorthand classes for Float.
The example below uses the .float-right class to push the table to the right. Also, it is important to move the markup of the table right after the headings. To change the width of the table section, you can still use the .col-{} classes. (They set just the width and flex properties of the element, and without a flex container the flex does not have effect.) To set the width, another option would be to use one of the Sizing classes, but unfortunately, those not use media breakpoints.
<div class="container">
<h1 class="display-4 text-center">A.P.J. Abdul Kalam</h1>
<h3 class="text-center font-weight-light">Missile man of India</h3>
<!-- New position of the "table" -->
<div class="col-lg-3 float-right border border-secondary">
<figure class="figure">
<img class="figure-img img-fluid img-thumbnail" src="https://upload.wikimedia.org/wikipedia/commons/b/b0/A._P._J._Abdul_Kalam_in_2008.jpg" alt="Image of Abdul Kalam">
<figcaption class="figure-caption text-center">Kalam in 2008</figcaption>
</figure>
<h6 class="text-center bg-primary text-white">11th President of India</h6>
<p class="text-center font-weight-bold">In office<br><span class="font-weight-normal">25 July 2002 - 25 July</span></p>
<table class="table">
<thead>
</thead>
<tbody>
<tr>
<th scope="row">Prime Minister</th>
<td>Atal bihari Vajpayee<br>Manmohan Singh</td>
</tr>
<tr>
<th scope "row">Vice President</th>
<td>Krishan Kant<br>Bhairon Singh Shekhawat</td>
</tr>
<tr>
<th scope="row">Preceded By</th>
<td>K.R.Narayanan</td>
</tr>
<tr>
<th scope="row">Succeeded By</th>
<td>Pratibha Patil</td>
</tr>
</tbody>
</table>
</div>
<!--
Long-text description comes here.
This wrapping <div> can also be omitted.
-->
<div class="this-div-could-also-be-deleted">
<p><span class="font-weight-bold">Avul Pakir Jainulabdeen Abdul Kalam</span> better known as <span class="font-weight-bold">A.P.J.Abdul Kalam</span> was born in 15th October 1931.He was the 11th President of India from 2002-2007.He was born and raise in Rameshwaram, TamilNadu, and studied physics and aerospace engineering.He spent the next four decades as a scientist and science administrator, mainly at the Defence Research and Development Organisation (DRDO) and Indian Space Research Organisation (ISRO) and was intimately involved in India's civilian space programme and military missile development efforts.He thus came to be known as the <span class="font-italic">Missile Man of India</span> for his work on the development of ballistic missile and launch vehicle technology.He also played a pivotal organisational, technical, and political role in India's Pokhran-II nuclear tests in 1998, the first since the original nuclear test by India in 1974.</p>
<p>Kalam was elected as the 11th President of India in 2002 with the support of both the ruling Bharatiya Janata Party and the then-opposition Indian National Congress. Widely referred to as the "People's President," he returned to his civilian life of education, writing and public service after a single term. He was a recipient of several prestigious awards, including the Bharat Ratna, India's highest civilian honour.</p>
<p>While delivering a lecture at the Indian Institute of Management Shillong, Kalam collapsed and died from an apparent cardiac arrest on 27 July 2015, aged 83. Thousands including national-level dignitaries attended the funeral ceremony held in his hometown of Rameshwaram, where he was buried with full state honours.</p>
<div>
Avul Pakir Jainulabdeen Abdul Kalam was born on 15 October 1931 to a Tamil Muslim family in the pilgrimage centre of Rameswaram on Pamban Island, then in the Madras Presidency and now in the State of Tamil Nadu. His father Jainulabdeen was a boat owner and imam of a local mosque
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
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;
}
I deleted footer code from the HTML file. However, when I run the HTML file, I still see the footer being displayed in the browser.
Could this be because I did not clear the web browser cache?
Please find below the HTML file and screenshot of web browser:
HTML file
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Charles Darwin - biography</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link href='https://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'>
<link type="text/css" rel="stylesheet" href="Darwin.css"/>
</head>
<body>
<header>
<h1>Charles Darwin</h1>
<h3>(biography)</h3>
</header>
<section class="container">
<section class="jumbotron">
<div class="row">
<figure class="col-sm-5 сol-sm-7">
<img class="img-responsive center-block" src="image/Charles-Darwin.jpg" alt="CharlesDarwin" />
<figcaption>Biologist, Scientist (1809–1882)</figcaption>
<p class="desc">
<span class="dec3"> QUICK FACTS </span> <br><br>
<span class="dec"> FULL NAME </span> <br>
<span class="dec2">Charles Robert Darwin </span> <br>
<span class="dec"> BIRTH DATE </span> <br>
<span class="dec2">February 12, 1809 </span> <br>
<span class="dec"> DEATH DATE </span> <br>
<span class="dec2">April 19, 1882 </span> <br>
<span class="dec"> PLACE OF BIRTH </span> <br>
<span class="dec2">Shrewsbury, England </span> <br>
<span class="dec"> PLACE OF DEATH </span> <br>
<span class="dec2">Downe, England </span> <br>
<span class="dec"> EDUCATION </span> <br>
<span class="dec2">University of Edinburgh, Cambridge </span> </p>
</figure>
<figure>
<p><b>Synopsis</b></p>
<p>Naturalist Charles Darwin was born in Shrewsbury, England, on February 12, 1809. In 1831, he embarked on a five-year survey voyage around the world on the HMS Beagle. His studies of specimens around the globe led him to formulate his theory of evolution and his views on the process of natural selection. In 1859, he published On the Origin of Species. He died on April 19, 1882, in London.</p>
<blockquote class="blockquote-reverse"><i>“A man who dares to waste one hour of time has not discovered the value of life.”
<br>-Charles Darwin</i></blockquote>
<p><b>Early Life</b></p>
<p>Naturalist Charles Robert Darwin was born on February 12, 1809, in the tiny merchant town of Shrewsbury, England. He was the second youngest of six children. Darwin came from a long line of scientists. His father, Dr. R.W. Darwin, was as a medical doctor, and his grandfather, Dr. Erasmus Darwin, was a renowned botanist. Darwin’s mother, Susanna, died when he was only 8 years old. Darwin was a child of wealth and privilege who loved to explore nature.In October 1825, at age 16, Darwin enrolled at Edinburgh University along with his brother Erasmus. Two years later, Charles Darwin became a student at Christ's College in Cambridge. His father hoped he would follow in his footsteps and become a medical doctor, but the sight of blood made Darwin queasy. His father suggested he study to become a parson instead, but Darwin was far more inclined to study natural history.</p> <br>
<p><b>Voyage on the HMS Beagle</b></p>
<p>While Darwin was at Christ's College, botany professor John Stevens Henslow became his mentor. After Darwin graduated Christ's College with a bachelor of arts degree in 1831, Henslow recommended him for a naturalist’s position aboard the HMS Beagle. The ship, commanded by Captain Robert FitzRoy, was to take a five-year survey trip around the world. The voyage would prove the opportunity of a lifetime for the budding young naturalist.
<br>
On December 27, 1831, the HMS Beagle launched its voyage around the world with Darwin in tow. Over the course of the trip, Darwin collected a variety of natural specimens, including birds, plants and fossils. Through hands-on research and experimentation, he had the unique opportunity to closely observe principles of botany, geology and zoology. The Pacific Islands and Galapagos Archipelago were of particular interest to Darwin, as was South America.
<br>
Upon his return to England in 1836, Darwin began to write up his findings in the Journal of Researches, published as part of Captain FitzRoy's larger narrative and later edited into the Zoology of the Voyage of the Beagle. The trip had a monumental affect on Darwin’s view of natural history. He began to develop a revolutionary theory about the origin of living beings that was contrary to the popular view of other naturalists at the time.</p>
<p><b>Theory of Evolution</b></p>
<p>Darwin's exposure to specimens all over the globe raised important questions. Other naturalists believed that all species either came into being at the start of the world, or were created over the course of natural history. In either case, the species were believed to remain much the same throughout time. Darwin, however, noticed similarities among species all over the globe, along with variations based on specific locations, leading him to believe that they had gradually evolved from common ancestors. He came to believe that species survived through a process called "natural selection," where species that successfully adapted to meet the changing requirements of their natural habitat thrived, while those that failed to evolve and reproduce died off.</p>
<br>
<p>In 1858, after years of further scientific investigation, Darwin publically introduced his revolutionary theory of evolution in a letter read at a meeting of the Linnean Society. On November 24, 1859, he published a detailed explanation of his theory in his best-known work, <i> On the Origin of Species by Means of Natural Selection.</i></p>
<p><b>Death and Legacy</b></p>
<p>Following a lifetime of devout research, Charles Darwin died at his family home, Down House, in London, on April 19, 1882, and was buried at Westminster Abbey. During the next century, DNA studies revealed evidence of his theory of evolution, although controversy surrounding its conflict with Creationism—the religious view that all of nature was born of God—still abounds today.</p>
</figure>
<div class="row">
<figure class="col-sm-3 col-sm-6 col-sm-3 ">
</figure>
<figure class="col-sm-6">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" width="100%" height="100%" src="https://www.youtube.com/embed/A0VnuhHq5m0" frameborder="0" allowfullscreen></iframe>
</div>
</figure>
</div>
</section>
</section>
</body>
</html>
Screenshot of the HTML file as rendered in the web browser
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.
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.