Center Column without appearing too thin on Mobile in Bootstrap 4 - html

What is the best way to keep page content centered without appearing too thin when viewed on mobile? This is using a centered single column layout.
When I view the following on a desktop, it achieves the desired look and spacing, but on mobile the content is constrained to too small an area and appears far too narrow.
<section id="copybox" class="pl-sm-1 pl-md-5 pr-sm-1 pr-md-5">
<div class="row justify-content-center">
<div class="col-7">
(Area consisting of multiple div's, paragraphs etc)
</div>
</div>
</section>
What can be done to resolve this?

You're using col-7 which is always going to take up 58.333% of the width of it's parent. Use a wider column (ie: col-10, col-11, col-12, etc...) on mobile.
<section id="copybox" class="pl-sm-1 pl-md-5 pr-sm-1 pr-md-5">
<div class="row justify-content-center">
<div class="col-sm-7 col-10 border">
(Area consisting of multiple div's, paragraphs etc)
</div>
</div>
</section>
Demo: https://www.codeply.com/go/ueIUlH19DB

Try to use wider columns as Zim suggested.
Also, make sure to have a viewport meta tag in html page
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Related

Adjust <p> width on bootstrap

Hello friends I have a problem with bootstrap and the <p> tag. When I add some big text in the <p> tag, it doesn't adjust to the 6 column that I define, it stays continuous to the right of the page taking up all space.
How could I make the text within the <p> tag always take the first 6 colums?
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class='container'>
<div class='row'>
<div class='col-sm-6'>
<h2 class='text'>text</h2>
<hr>
<h4 class='text-warning'>Title</h4>
<p>text content</p>
</div>
Just add this as a custom style and it'll wrap at your defined column size.
p{
word-wrap: break-word;
}
Check it out here.
First of all make sure you close all your <div> tags.
And then make sure you are displaying the device you need. The class col-sm-6 is for tabelt view. If you want 6 columns on every device add these classes aswell: col-lg-6 col-md-6 col-xs-6.
Due to the fact that bootstrap is mobile-first it would be enough to add only the rule col-xs-6, so it will have 6 columns on every device.
To learn more about the grid and the breakpoints visit:
Bootstrap CSS and scroll to Grid options

How to make image responsive with Bootstrap?

I'm building a website which will list some buildings for sale with a picture and a small description. Since I want the website to be responsive I'm trying to use the Bootstrap3 grid system.
So the current html I have is as follows (running code here on bootply):
<div class="container">
<div class="row">
<div class="col-sm-8">
<article class="row property-ad">
<div class="col-sm-4">
<img class="property-thumbnail" src="https://uwaterloo.ca/pharmacy/sites/ca.pharmacy/files/uploads/images/pharmacy-building-street-view.jpg">
</div>
<div class="col-sm-8">
<div class="property-ad-title">Nice building</div>
<div class="property-ad-description">and some describing text here</div>
</div>
</article>
</div>
<div class="col-sm-4">
<div class="right-side-ad">
some advertisement is going here
</div>
</div>
</div>
</div>
The problem is that the title and description are only displayed correctly on a large (lg) screen. On an md or sm screen however, the title and description are partly displayed on top of the image because the image appears larger than its container. I tried giving the image a max-width: inherit;, but that doesn't seem to do anything.
Next to the fact that I don't know how to give it a proper max-width, the main problem seems to be that I don't really know what behaviour I would want. Because if the image resizes its width, it would either get distorted, or it would also need to change its heigth. If the height changes however, the text next to it could get a larger height than the image, which would also make the layout look messy.
So my main questions;
What is the typical desired behaviour to make a website responsive when working with images that are next to text?
How would I implement that?
All tips are welcome!
Don't use your custome class for the img just add the bootstrap class for responsive images
img-responsive
<div class="col-sm-4">
<img class="img-responsive" src=".....jpg">
</div>
Check this Bootply
Simply stated: Bootstrap has the img-responsive class, or you could set max-width: 100% to the img tag.

Bootstrap 3.0 Centered Main Content with right Sidebar

I am trying to have a centered main content div along with a right sidebar using Bootstrap 3.0.
I have tried the following code to achieve this.
BootPly
But when i resize the browser to shorter width, the sidebar gets pushed down and also the main content get wider. Is this behavior expected of bootstrap ? Do i need to add col-xs* to accommodate the shorter width ?
I am wondering if this is the correct way to achieve this design ?
Thanks !
Yes, it is default behaviour. Bootstrap 3 was built with "mobile first" in mind, so the layout is responsive by default. You can achieve this effect by writing a custom grid and not using the Bootstrap column classes, like col-sm-6 and so on.
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="content">
Main Content
</div>
<div class="sidebar">
Side bar
</div>
</div>
</div>
</div>
Then write some css. This is just an example, and you should customise to fit your own needs.
.sidebar { width: 33.3%; }
.content { width: 66.6%; }
You can fit two columns on the smallest screen size, but it's unlikely that this is what you are after. On small screens there's very little space for any substantial content to fit into two columns.
<div class="col-xs-6">
Main Content
</div>
<div class="col-xs-6">
Side bar
</div>
You are indeed correct that this is a feature of bootstrap :) You're also correct on using .col-xs-* to achieve your planned design. To add to what you're trying to do, (just in case you haven't tried this already) you can also combine the grid classes in order to accommodate the different screen sizes.
Here's an example:
<div class="row">
<div class="col-md-8 col-sm-6 col-xs-12">
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
</div>
</div>
Goodluck! :)

Converting a Static Bootstrap website to Responsive

I have a bootstrap website that's setup statically, it doesn't adjust according to different view sizes. So I would like to make it responsive but not sure how. I'm also using LESS to do my modifications and such to the twitter bootstrap css. So far my site is set up like so..
<div id="wrapper">
<header>
<div class="container">
<div class="row">
<div class="span12">
<!-- LOGO HERE -->
</div>
</div>
</div>
</header>
<div id="main-content" class="container">
<div class="row">
<div class="span8">
<!-- My content -->
</div>
<div class="span4">
<!-- My content too -->
</div>
</div>
</div>
</div>
Also, the website was built for 940px so when I make it responsive I want to set the maximum veiw of the page to 940px instead of 1200px and have my div.wrapper still in the center of the page.
Hopefully all this makes sence haha.
To turn on responsive layout, you need to add the following code in the <head> of your document:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
You'll have to adjust your reference to the stylesheet to your specific structure, since you're using the .less source.
In responsive.less comment out or delete the following line:
#import "responsive-1200px-min.less";
This will respond to smaller screen resolutions, but keep your maximum .container width at 940px.
Change .container to .container-fluid and .row to .row-fluid. Take a look at this: http://jsfiddle.net/ypkJQ/. You have to also remember that every .row-fluid class resets span* width counter, that is span* width under .row-fluid is taken from percentage width of parent(.row-fluid).

mobile changes when using twitter bootstrap?

i have this example layout using twitter bootstrap:
<div class="container">
<div class="row">
<div class="span8">
<h1> Hello MOBLE WORLD</h1>
</div>
</div>
</div>
they all look the same in all device.
when i put the meta viewport on the section
<meta name="viewport" content="width=device-width, initial-scale=1.0">
on the iphone it looks well different almost as if its cut in half(horrible), i want to know why that happens and what changes and does margins or padding have to do anything with it. thanks
What you want to do is use the fluid grid which basically means using a class of row-fluid instead of row on the wrapper.