<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<p id="p1" class="box">I am an Art and Computer Science student. I love mixing my art background with web development and design. My goal is to find a job in the web development industry. In my spare time I love playing sports and board games.</p>
</div>
<div class="col-md-6">
<img class="pic" src="https://beebom-redkapmedia.netdna-ssl.com/wp-
content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-
2016.jpg" alt="filter for now: cat"></div>
</div>
</div>
I am using CodePen and trying to split these two things (the p and the img) using the bootstrap grid and it won't split. The image stays underneath the paragraph.
You are probably not including the link to bootstrap. Here I am linking the bootstrap cdn within the header tags.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<p id="p1" class="box">I am an Art and Computer Science student. I love
mixing my art background with web development and design. My goal is to
find a job in the web development industry. In my spare time I love
playing sports and board games.</p></div>
<div class="col-md-6">
<img class="pic" src="https://beebom-redkapmedia.netdna-ssl.com/wp-
content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-
2016.jpg" alt="filter for now: cat"></div>
</div>
</div>
</body>
</html>
Related
I've got a header, paragraph and image, and I want them aligned with the header above the paragraph, and the image to the right. When I run it I get the 3 elements in a horizontal row
<div class="container">
<div class="row">
<h1 class="col-xs-3 paddingtop">Joselin</h1>
<p class="col-xs-3 bio">
Growing up in the Caribbean, as a young girl Joselin worked as a
coffee bean picker, giving her a profound insight into using only
the freshest, and highest quality coffee beans.
</p>
<img class="col-xs-6 meetus" src="meetus.jpeg">
</div>
</div>
If the h1 should be above the p and the img, the best thing would be to put it in its own row: <div class="row">. Then put the p and the img in a row right under that.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-6">
<h1 class="paddingtop">Joselin</h1>
<p class="bio">
Growing up in the Caribbean, as a young girl Joselin worked as a
coffee bean picker, giving her a profound insight into using only
the freshest, and highest quality coffee beans.
</p>
</div>
<div class="col-xs-6">
<img class="col-xs-6 meetus" src="meetus.jpeg">
</div>
</div>
</div>
You can then play around with the column sizes (`class="col-xs-3").
I'm trying to figure out why my small static webpage isn't showing up properly when viewed on mobile (noticed on Chrome android app). According to the docs, the columns should automatically stack on mobile. But, when I view it I see a normal view of the page with the width fitting correctly to the screen, but the columns stay in one row. Shown in the below screenshot.
I tested to see if it's my code by resizing the page on a desktop browser and the page responded as expected, stacking the cards so in a single column. Here's a desktop-view imitated on my phone.
Any idea what's going on? What am I doing wrong? Here's the code
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.3/css/bulma.css"/>
</head>
<body style="background-color:#00aced;">
<div class="container">
<div class="notification" style="background-color:#fff">
<strong>Remember:</strong> In order to continually receive updates, please install the GoodSamarit4n repository from
here. This is the <em>only</em> official source. The reason I am providing links to the add-on zips is for complete transparency and for those who would like to study and learn from the code.
<br>
</div>
</div>
<div style="padding: 20px;" class="container">
<div class="columns">
<div class="column">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://pugdaddy.000webhostapp.com/images/githubforkodi.png" alt="Image">
</figure>
</div>
<header class="card-header">
<p class="card-header-title">
Githubforkodi
</p>
</header>
<div class="card-content">
<div class="content">
A kodi program add-on for managing your github account. View repos, branches, notifications, Open/Close/Comment on issues, Merge/Deny pull requests, Get real-time notifications, And much more! The power of github combined with the simplicity of kodi.
Creator #goodsamarit4n. <a>#kodi</a> <a>#github</a> <a>#program</a> <a>#add-on</a>
<br>
<small>8:00 PM - 24 Jul 2017</small>
</div>
</div>
</div>
</div>
<div class="column">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://pugdaddy.000webhostapp.com/images/pugdonut.png" alt="Image">
</figure>
</div>
<header class="card-header">
<p class="card-header-title">
Squeee!
</p>
</header>
<div class="card-content">
<div class="content">
A kodi video add-on that provides cute, funny, and heartwarming animal videos from all over the internet. Skip the endless clicking around your favorite sites and let Squeee! bring all of those sites to you in an easy-to-digest fashion. Click through videos one at a time or play an entire playlist and just sit back and embrace the fluffy.
Creator #goodsamarit4n. <a>#kodi</a> <a>#squeee</a> <a>#video</a> <a>#add-on</a> <a>#cute</a> <a>#animals</a>
<br>
<small>8:00 PM - 24 Jul 2017</small>
</div>
</div>
</div>
</div>
<div class="column">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://pugdaddy.000webhostapp.com/images/illuminati.jpg" alt="Image">
</figure>
</div>
<header class="card-header">
<p class="card-header-title">
Alternative Facts
</p>
</header>
<div class="card-content">
<div class="content">
Get ready to get beligerantly angry or find yourself continually muttering "What the f###?" under your breath. For those who enjoy seeing just how crazy some folks are. With documentaries on conspiracy theories gathered from all over the web. If you don't see a topic, feel free to tweet at me and I'll see about adding it for you.
Creator #goodsamarit4n. <a>#kodi</a> <a>#alternativefacts</a> <a>#video</a> <a>#add-on</a> <a>#conspiracy</a> <a>#theories</a>
<br>
<small>8:00 PM - 24 Jul 2017</small>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Adding the following meta tag may solves the problem.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
I need to align the section information as shown in the figure.
Here's the desktop view :
And here's the mobile view, The Section header "Welcome" should move to the top of the row in the mobile view as shown in the figure
But in my program, it sticks with the paragraph as normally expected and comes down under the image.
NOTE: THE IMAGE SHOWN IS MY DESIRED OUTPUT which I'm not getting.
I am somewhat new to CSS and I need to solve this issue.
Here's my code
.col-centered {
text-align: left;
padding-top: 10px;
padding-bottom: 10px;
}
<div class="row">
<div class="col-sm-5 col-centered">
<img class="img-responsive" src="./Assets/Welcome_image.png" alt="WelcomeImage" />
</div>
<section class="col-sm-7 col-centered">
<h2 id="textheading">Welcome</h2>
<p>Provide highest quality education to students. give studnets more than what we promise them.Children of the ages between 18 months and 6 years are extremely receptive. Kids Planet Kids pre-schools' fun filled programme makes the most of this by encouraging the childrens to understand and develop socail skills, gross and fine major skills and creativity at the same time, throug songs, music and imaginative play.</p>
<p><mark> Read More </mark></p>
</section>
</div>
<div class="row">
<div class="col-sm-5 col-centered">
<img class="img-responsive" src="./Assets/AboutusImage.png" alt="AboutUsImage" />
</div>
<section class="col-sm-7 col-centered">
<h2 id="textheading">About Us</h2>
<p>Kids Planet is a leading education and test preparation comapny, head quartered in Secunderabad, has grown into a specialist, multi-location, multi-programme training provider having 118 cities across India. Kids Planet is a leading education and test preparation comapny, head quantered in secunderanbad. Has grown into a specialist, multi-location, multi-programme training provider having 118 cities across India.</p>
<p><mark> Read More </mark></p>
</section>
</div>
Updated
Now, with new information, you need to make use of the helper classes to Show/Hide elements
I created a duplicate h2 element to show/hide according to the width of the viewport and placed it on top of the image. Like this:
<div class="visible-xs-block col-xs-6 col-xs-offset-3">
<h2 id="textheading">Welcome</h2>
</div>
<div class="col-xs-6 col-xs-offset-3 col-sm-5 col-sm-offset-0">
<img class="img-responsive" src="http://lorempixel.com/300/300" alt="WelcomeImage" />
</div>
<section class="col-xs-6 col-xs-offset-3 col-sm-7 col-sm-offset-0">
<h2 id="textheading" class="visible-sm-block visible-md-block visible-lg-block">Welcome</h2>
...
</section>
I also removed the need for the col-centered and made use of the col-xs-offset-# as needed.
Let me know if this does not work :)
See updated demo:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
<div class="visible-xs-block col-xs-6 col-xs-offset-3">
<h2 id="textheading">Welcome</h2>
</div>
<div class="col-xs-6 col-xs-offset-3 col-sm-5 col-sm-offset-0">
<img class="img-responsive" src="http://lorempixel.com/300/300" alt="WelcomeImage" />
</div>
<section class="col-xs-6 col-xs-offset-3 col-sm-7 col-sm-offset-0">
<h2 id="textheading" class="hidden-xs">Welcome</h2>
<p>Provide highest quality education to students. give studnets more than what we promise them.Children of the ages between 18 months and 6 years are extremely receptive. Kids Planet Kids pre-schools' fun filled programme makes the most of this by encouraging
the childrens to understand and develop socail skills, gross and fine major skills and creativity at the same time, throug songs, music and imaginative play.</p>
<p><mark> Read More </mark></p>
</section>
</div>
<div class="row">
<div class="hidden-sm hidden-md hidden-lg col-xs-6 col-xs-offset-3">
<h2 id="textheading">About Us</h2>
</div>
<div class="col-xs-6 col-xs-offset-3 col-sm-5 col-sm-offset-0">
<img class="img-responsive" src="http://lorempixel.com/300/300" alt="AboutUsImage" />
</div>
<section class="col-xs-6 col-xs-offset-3 col-sm-7 col-sm-offset-0">
<h2 id="textheading" class="visible-sm-block visible-md-block visible-lg-block">About Us</h2>
<p>Kids Planet is a leading education and test preparation comapny, head quartered in Secunderabad, has grown into a specialist, multi-location, multi-programme training provider having 118 cities across India. Kids Planet is a leading education and
test preparation comapny, head quantered in secunderanbad. Has grown into a specialist, multi-location, multi-programme training provider having 118 cities across India.</p>
<p><mark> Read More </mark></p>
</section>
</div>
Old answer deleted after clarifications
For some reason my BS columns don't seem to be stacking horizontally in my fiddle, only on top of each other :-
<!DOCTYPE html>
<html>
<head>
<title>Sue Let The Dogs Out</title>
<script type="text/css" src=""></script>
</head>
<body>
<div class="header">
<div class="row">
<div class="container">
<h1>
Sue Let The Dogs Out!
</h1>
<ul class="nav">
<li>About</li>
<li>Services</li>
<li>Testimonials</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
<div class="jumbotron">
<div class="container">
<div class="row">
<h2> Bespoke Pet Services</h2>
</div>
<div class="row">
<h4>Around the Bristol Area</h4>
</div>
</div>
</div>
<div class="supporter">
<div class="container">
<div class="row">
<div class="col-md-4">
<h3>Dog Walking</h3>
<p>We offer one hour dog walks individually or in a group at extremely competitive rates. The walks take place in safe, traffic free, varied environments such as riverside walks, woodlands and parks. We are happy to deal with all dogs, from the
smallest through to giant breeds.</p>
</div>
<div class="col-md-4">
<h3>House Sitting</h3>
<p>We offer overnight pet sitting in the client's home. This unique service is ideal for pet owners who, for example, want a few days or weeks' holiday but are reluctant to kennel board. The majority of cats and dogs, particularly dogs, suffer
anxiety, stress and depression due to unfamilar surroundings, lack of exercise, stimulation and human companionship.</p>
</div>
<div class="col-md-4">
<h3>Pet Sitting</h3>
<p>We are able to arrange to visit your pet during the day to feed and water them - this can be ideal if you are a cat owner needing to be away for a few days but wishing to avoid the disruption of putting your cat in a cattery, for example.</p>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-8">
<h4>© Rebecca Townsend Design</h4>
</div>
<div class="col-md-4">
<h4>Contact Us</h4>
</div>
</div>
</div>
</div>
</body>
</html>
Could you suggest how I would fix this? I'm pretty new to coding so there will be a lot of mistakes within my code. Please feel free to give me some pointers!
You need to actually include the Bootstrap files in your HTML somehow. You can use this link or download them and insert them into your project locally.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"
You need to include the Bootstrap CSS library in order for the Bootstrap classes to do what you expect them too.
You can use a CDN like so:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
I'm new to HTML and working on a website where I need this text box to appear in the center as it looks rather odd on the left hand side (please help me make edits to the html as well:
<!-- Job Opportunities -->
<div class="wrapper wrapper-style3">
<article id="careers">
<header>
<h2>Careers</h2>
</header>
<div class="container">
<div class="row">
<div class="12u"></div>
</div>
<div class="row">
<div class="4u">
<article class="box box-style2">
<h3>Work With Us</h3>
<p>We are looking for enthusiastic, detail-orientated professionals to assist in our continued growth. As a small firm, we reward flexibility with excellent conditions and an enjoyable working environment. Rapid career progression is possible for candidates demonstrating the right characteristics. Please contact us, enclosing a CV, for details of our current vacancies.</p>
</div>
</div>
</article>
</div>
Create css class in <head>'s <style> element:
.centered { width:70%; margin: 0 auto; }
Add css class to div:
<!-- Job Opportunities -->
<div class="wrapper wrapper-style3 centered">
<article id="careers">
<header>
<h2>Careers</h2>
</header>
<div class="container">
<div class="row">
<div class="12u"></div>
</div>
<div class="row">
<div class="4u">
<article class="box box-style2">
<h3>Work With Us</h3>
<p>We are looking for enthusiastic, detail-orientated professionals to assist in our continued growth. As a small firm, we reward flexibility with excellent conditions and an enjoyable working environment. Rapid career progression is possible for candidates demonstrating the right characteristics. Please contact us, enclosing a CV, for details of our current vacancies.</p>
</article>
</div>
</div>
</div>
</article>
</div>
JsFiddle: http://jsfiddle.net/3Ly1s3tv/