I just started using Bootstrap and it's awesome so far. However I have one question, I created a content container and put a picture in it and I'm only going to have one in the row and I want it to go in the center of the page. I have tried a lot of things but to no avail, they don't work. Any help is appreciated! I'm also using Bootstrap version 3.3.6
This is my code for the container
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-6">
<div class="thumbnail">
<img src="random.jpg" alt="...">
<div class="caption">
<h3><center>I want the whole container in the center of the page.</center></h3>
</div>
</div>
</div>
</div>
</div>
Bootstrap has built in classes for you to use instead of the default tag. Try this for your image:
<img class="center-block" src="yourimage.png" />
Related
I am a beginner in web designing. I know some basics about layout in CSS.
I am tried to create a blog post layout, given in the picture below.
see image layout
Please help me to do that.
Welcome to StackOverflow! As heads up, usually you will want to come here for more specific questions to solve problems with your code, or to explain weird behavior you didn't quite understand. Your question is a little bit too open ended to be answered here but I can help you get started:
For starters, start thinking about translating every box in your picture into an HTML div. If you break each part of that picture into divs it can be a good foundation to add your css styling on top of. In your case, you might want something like this:
<div id="articleList">
<div id="article_1">
<div id="articleImage_1">
<img src="articleImage_1.jpg" alt="Picture #1">
</div>
<div id="articleContent_1">
<div id="articleTags_1"></div>
<div id="articleTitle_1"></div>
<div id="articleAuthorNameAndCommentsSubheader_1"></div>
<div id="articleBody_1"></div>
</div>
</div>
<div id="article_2">
<div id="articleImage_2">
<img src="articleImage_2.jpg" alt="Picture #2">
</div>
<div id="articleContent_2">
<div id="articleTags_2"></div>
<div id="articleTitle_2"></div>
<div id="articleAuthorNameAndCommentsSubheader_2"></div>
<div id="articleBody_2"></div>
</div>
</div>
</div>
Of course you would be generating each row inside a for loop or .map() type function. You would also add in your .css in a 'class' attribute for every div.
Please let me know if you find this helpful by selecting my post as the answer, and don't be shy if you have any more questions :)
If you know about boostrap than you can use this boostrap card to create that layout you want. Here is the sample code for it.
<div class="card w-50">
<div class="card-img-top d-flex align-items-center bg-light">
<div>
<img class="img-fluid" src="http://via.placeholder.com/150x150/1f1a38/ffffff?
text=Image" alt="Card image cap">
</div>
<p class="col p-2 m-0">Text next to the right of the image</p>
</div>
</div>
Bootstrap Grids
I'm having an problem with the Bootstrap grid system can't seam to position my content the right way that I want to. Here is what I have so far.
<header>
<div class="container-fluid">
<div class="row">
<div class="col-md-2"><img src="logo.png" alt="" class="img-responsive"/></div>
<div class="col-md-2"><h3>My Website</h3></div>
</div>
</div>
</header>
Goal
What I want to achieve is to have a full width web page for large desktops and responsive for mobiles where the logo image and the "My website" slogan will be on the left and the content will be positioned in the center.
Here are some images of what i want to achieve on desktop and mobile http://s16.postimg.org/tbt4b5det/Untitled_1.png - Desktop
http://s10.postimg.org/mbijfjvkp/Untitled_2.png - Mobile
check below what have:
<section>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<img src="/logo.png" alt="" class="img-responsive"/>
</div>
<div class="col-md-6 col-md-offset-3"><h4>Welcome</h4></div>
<div class="col-md-6 col-md-offset-3"><h4>How are you?</h4></div>
<div class="col-md-6 col-md-offset-3">
<div class="disclaimer">
<p>Some text here</p>
</div>
<div class="link">
<span>Follow Us</span>
</div>
</div>
</div>
</div>
</section>
Other Issues
It seams every time i test for different devices or simple resize the browzer the image goes extra small until it get to sm devices and than again continues to get smaller.
Thank You
I thank you for your help i'm new in web development any suggestion is appreciated.
The way I'd do it is by changing the container class to <div class="container-fluid" style="text-align:left;"> allowing for full width usage of a screen.
Then, just put a <div style="text-align: center;"> around what you want to center.
Though this will make all elements stretch the entire screen width, including the col-*-* classes. Just add col-*-offset-* as required to adjust for this.
Your img is getting smaller because of the img-responsive class.
I'm using Bootstrap 3, I'm not exactly sure why is offsetting to the
right.
<div class="container">
<div id="content">
<a href="/winning-films">
<div class="text-center banner">Check out the 2015 Salt Flats Film winners!!!</div>
</a>
<div class="row">
<div id="main-page">
<h2>SALT FLATS FILM FESTIVAL</h2>
<div class="center-slider">
<?php include_once('jssor_slider.php')?>
</div>
<h3>Presented by</h3>
<a href="http://www.kidsfindjoy.org">
<img class="img-responsive center center-block" src= "/img/joy-logo.jpg">
</a>
</div>
</div>
</div>
</div>
Is there someway to center the div with the container class on mobile?
It's hard to say without seeing the exact code, but as a general strategy inspect the page with something like chrome developer tools and see which element(s) are wider than the viewport, and thus widening the width or their parent elements.
Well, Here I have changed the order of the div with the class text-center banner, the <a></a> tag must be inside the div.
<div class="cointainer">
<div id="content">
<div class="text-center banner">Check out the 2015 Salt Flats Film winners!!!</div>
<div class="row">
<div id="main-page">
<h2>SALT FLATS FILM FESTIVAL</h2>
<div class="center-slider">
<!--?php include_once('jssor_slider.php')?-->
</div>
<h3>Presented by</h3>
<img class="img-responsive center center-block" src="/img/joy-logo.jpg">
</div>
</div>
</div>
</div>
The second suggest is to verify to use this line in your html head <meta name="viewport" content="width=device-width, initial-scale=1">
this will help you to center your page on load and disable zoom and scroll
The third suggest is to use Pingendo, if you are a new developer, this tool will help you to generate a beautiful view or interface with Bootstrap, and you will see the HTML code and CSS3 live when you draft elements of bootstrap to your view.
Regards!
I am learning how to become Front End Developer at Udacity. There is a project that I need to submit. I ran in couple of issues I couldn't find help with, some of my images and urls within divs don't want to align properly. I tried using this website as a solution https://codemyviews.com/blog/how-to-center-anything-with-css
because it offered most variations on aligning blocks... But none of them worked.
<div class="row">
<div class="col-4"><img src="http://www.panext.com/wordpress/wp-content/uploads/2012/09/question-63916_640-400x200.jpg"></div>
<div class="col-4"><img src="http://www.eu-projekti.info/eu/wp-content/uploads/2014/10/1159613_85120857-400x200.jpg"></div>
<div class="col-4 end"><img src="http://www.digitalzenway.com/wp-content/uploads/plan-to-eat-400x200.gif"></div>
</div>
These are images, I am trying to align first image to the left, 2nd to the center and 3rd to the right. I could align them by using margins and paddings in html, but I want it to work with responsive design.
<div class="row">
<div class="col-4">
https://github.com/udacity/Appify/
</div>
<div class="col-4">
https://github.com/udacity/Sunflower/
</div>
<div class="col-4">
https://github.com/udacity/Bokeh/
</div>
</div>
and these are urls right underneath the pictures, that aren't lining up, no matter what I try.
This is the screenshot of my webpage http://picpaste.com/Portfolio-NOGcuGm8.jpg
P.S. This is my first post at Stack Overflow, TIA!
You can use Bootstrap's text-center and text-right classes to modify inner alignment of columns.
<div class="row">
<div class="col-4"><img src="http://www.panext.com/wordpress/wp-content/uploads/2012/09/question-63916_640-400x200.jpg"></div>
<div class="col-4 text-center"><img src="http://www.eu-projekti.info/eu/wp-content/uploads/2014/10/1159613_85120857-400x200.jpg"></div>
<div class="col-4 text-right end"><img src="http://www.digitalzenway.com/wp-content/uploads/plan-to-eat-400x200.gif"></div>
</div>
If you aren't using Bootstrap, these classes simply apply text-align: center and text-align: right respectively.
Using Twitter Bootstrap 3, I have two colummns, one with an image and the other has text. I'm trying to place the two side by side for desktop view, but then for smaller screens (mobile,tablet) the text has to fall beneath the image. I have tried various float and positions css but unsuccessful.
Code:
<div class="row">
<h2>History</h2>
<div class="col-md-6">
<img class="img-rounded" src="img/fldry-ban.png"/>
</div>
<div class="col-md-6">
<p> text </p>
</div>
</div>
</div>
If anyone has the time to provide some details of what CSS i should be using, I would be greatly appreciated. :-)
By now you're just telling the browser: "Hey, if I am on a medium screen device (col-md-6) let's take 6 out of 12 blocks for displaying!"
You need to add the class for the mobile view too:
<div class="col-md-6 col-sm-12">
So now, the mobile browser also knows, that he should use the full 12 blocks to display.
For further information about how to use the grid system of bootstrap take a look at this.
try this
<img class="img-rounded" src="img/fldry-ban.png" style="width:100%;"/>
//or might be possible
<style>
.custom > img{
width:100%;
}
</style>
<div class="row">
<h2>History</h2>
<div class="col-md-6 col-sm-6 col-lg-6 custom">
<img class="img-rounded" src="img/fldry-ban.png"/>
</div>
<div class="col-md-6 col-sm-6 col-lg-6">
<p> text </p>
</div>
</div>