The code is linked below with JSFiddle.
The problem was when I decrease the screen size the div blocks should be in the same line with decreased width instead they are going one below the other. (once check it by increasing the screen width).
The other one I want to highlight is that the code for showing
read more option for text/paragraph when we decrease the block size. That is when we click on read more the block size should increase and show the remaining text. It would be very helpful if someone suggests code for this.
The code is
.center{
float: none;
padding:0px;
margin-left: auto;
margin-right: auto;
}
div.allign{
height:170px;
margin:15px;
text-align:center;
}
div.content{
height:200px;
background-color:#fff;
background-color:#F4F1EE;
}
<div class="container-fluid">
<div class="row-fluid content">
<div class="col-md-1 "></div>
<div class="col-md-3 allign">
<h3>Get Started</h3>
<p>How it works?</p>
<p>It's very easy and simple,just sign up for free and get started with your account.
It's easy to reserve or cancel a book from anywhere.</p>
</div>
<div class="col-md-3 allign">
<h3>About library</h3>
<p>location,Directions,Books info...</p>
<p>Total books:1124<br />journals:130<br />.</p>
</div>
<div class="col-md-3 allign">
<h3>No text books?</h3>
<p>Dont worry here we go...</p>
<p>Reserve your books from online by just one click.
Read online/offline by downloading pdf files.</p>
</div>
</div>
</div>
Click here for a JSFiddle example
https://jsfiddle.net/nvpqfxbj/6/
Thanks in advance.
You are using the "md" grid size on those elements so they will become full width below 991px. If you want to maintain the columns on all devices, then use the "xs" columns.
Instead of 'col-md-3' and 'col-md-1' use 'col-xs-3' and 'col-xs-1'. However, you don't need the empty first column because BS address it with offsetting columns.
Also, the margins set from .allign will override the margins BS uses on the columns and you'll have problems unless you remove it. If you need the margins, use another container div nested inside the col-* containers.
BOOTPLY EXAMPLE: http://www.bootply.com/EfOZtUQqcs
This is the basic principle all responsive grid systems are built upon and you're going to struggle unless you understand this basic concept. It's all covered in the BS3 documentation.
http://getbootstrap.com/css/#grid
As for your "read more" problem. The code you provided is not the culprit. There is something going on server-side or JS that is causing this and you've provided no server-side or JS code.
This works for me.
Bootstrap 5
<div class=".container-fluid">
Related
https://jsfiddle.net/jonathansh1115/oc75f0sr/
I read about many posts of the width would not be 100% and people always say
body {
margin=0;
padding=0;
}
will work but loooook at this!!
ps:i am using the bootstrap link there
Well, there are lots of issues with your code.
Firstly you are not using bootstrap properly. You have to add the CSS file also. Bootstrap will not work if you only include the js file. Once you include it then everything will work just fine.
The spacing around divs is because of the browser defaults. If you include Bootstrap they will just disappear. Also, you need to use bootstrap classes properly.
In my opinion, you should go through Bootstrap's documentation and then create your layout. http://getbootstrap.com/getting-started/
If I understand your problem you want that your 3 blocks have a 100% width. Here they have a 100% of 33.33% of your page because you have col-sm-4.
Try to replace by :
<div id="all">
<div class="row col-sm-12" id="hqllo"><h1>hqllo</h1></div>
<div class="row col-sm-12" id="nook"><h1>nooook</h1></div>
<div class="row col-sm-12" id="pro"><h1>pro</h1></div>
</div>
remove this in css
.row {
width:calc(100%/3);
}
jsfiddle
I am currently having an issue with Bootstrap that involves html content in one column and an image in another.
For example, I have this html:
<div class="container-fluid main">
<div class="row">
<div class="col-xs-12 col-md-12 col-sm-12 col-lg-5 new-offers-text">
<h2>The new Tivoli now with half price specification upgrades</h2>
<ul>
<li>Half price upgrade from an SE to an EX model - saving <strong>£825</strong></li>
<li>Half price upgrade from an EX to an ELX – saving <strong>£700</strong></li>
</ul>
<p>Offer available until 31st October 2015 and on <strong>petrol engines</strong> only.</p>
<div class="clear spacer"></div>
<h3>Tivoli PCP</h3>
<p>SsangYong Tivoli is now available through a PCP giving you peace of mind.</p>
<p><strong>And for a limited time only, Tivoli EX petrol manuals purchased through PCP are eligible for 3 years free servicing</strong></p>
<p>With low monthly payments and SsangYong providing a Guaranteed Future Value for your vehicle you have three options on completion of your contract:</p>
<ul>
<li>Option 1 - Pay final payment & keep the car</li>
<li>Option 2 - Return the car</li>
<li>Option 3 - Trade in against a new SsangYong</li>
</ul>
<p>Talk to us about tailoring a personal quotation to meet your needs.</p>
</div>
<div class="col-xs-12 col-md-12 col-sm-12 col-lg-7">
<img src="/media/wysiwyg/porto/cmspages/ssangyong/tivoli/towing.jpg" class="manufacturer-logo">
</div>
</div>
</div>
As you can see I have an image in the col-lg-7, the issue I am now having is that when the page is scaled down horizontally I get a large area of white space because the content container get's narrow.
Here is an example: http://puu.sh/kJRsm/86562deefe.jpg
How do you combat this issue because on large screens the layout looks absolutely fine, it's just when the container starts to get narrow that the white space area get's larger?
I think I could combat the issue by making the col-7 div 100% height of the row and maybes take out the img tag and just add a css background with a cover size property on it however I'm wondering if there are any other ways?
I think the best way to do this is using flexbox https://philipwalton.github.io/solved-by-flexbox/demos/grids/ and check that Vertically Centered Grid Cells section.
Other way is, if you don't have to display all that text on sm or md size you can set hidden-sm or hidden-md on part of text and maybe create some read more link or something. For more info check out this http://getbootstrap.com/css/#responsive-utilities.
And maybe the third way is as you said to create div and inside put that picture and maybe use
.div {
overflow: hidden;
}
.div img {
height: 100%;
width: auto;
}
//OR
.div {
background-size: cover;
background-position: center;
}
Maybe there is some better way to do this and i would also like to learn about it but those are the options that i know and i had similar problem many times.
There are two ways to remove the white space.
One is to remove the divs we used to separate the text and image and float the image to right or left & give it a "width" and "max-width:100%" so on the large screens, It takes the image's width and the image will cover an area and the rest of space will be used by text. Don't remember to use the inside the to work like this.
Here is the example : http://www.w3schools.com/css/tryit.asp?filename=trycss_layout_float
the Second option is to test in all the screen sizes (lg-md-sm-xs) Forget sm&xs if you set the image to be 12 columns. You will have to reduce the image width to arrange the text with it on col-md.Regardsnabeel
Using bootstrap 2, what would be the simplest method of having a static width column on the left and have the right column be fluid. Something like this with 200 px width left column and the right to fill
the browser window.
======================
Hello
======================
A |
B | 100%
200px|
D |
E |
F |
I tried adding a min-width to a regular container layout but it have some weird behavior when resizing:
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">Hello</div>
</div>
<div class="row-fluid">
<div class="span2" style="min-width:200px">Left Column</div>
<div class="span10">Right Column</div>
</div>
</div>
Here is a JS fiddle as well though the quad layout of js fiddle itself seems to be adding its own behavior.
http://jsfiddle.net/BVmUL/882/
Short answer to your question is NO. Bootstrap 2 uses media queries and percentual measures to achieve their responsive grid layouts. Trying to make an hybrid approach using Bootstrap 2 is completely redundant.
You can try this approach. Use float:left; on the left column and give a padding-left:200px; to the right column and that's it. You've drawn your layout. Added clearfix at the bottom so you can use a footer in the future if you like. This way you keep support for most browsers.
Check JsFiddle Demo
HTML
<div class="container-fluid">
<div class="row-fluid">
<div class="span12 header">Hello</div>
</div>
<div class="row-fluid">
<div class="span2 left-col">Left Left Left Left Left Left Left</div>
<div class="span10 right-col">Right Right Right Right Right Right Right </div>
</div>
</div>
<div class="clearfix"></div>
CSS
.header{
background-color:#f00;
}
.left-col{
background-color:#0f0;
float:left;
width:200px;
height:400px;
}
.right-col{
background-color:#00f;
height:400px;
padding-left:200px;
}
After that you can use Javascript to dynamically adjust the left column width and the right column padding on window resize.
You may also want to consider the following alternatives:
1. Calc() (IE9+ only)
If you don't care about IE8- support this is the easiest way to achieve it. You can learn how here
2. Media Queries (IE9+ only)
You can use Media Queries just like Bootstrap does but you can't use percentual measures to achieve what you're looking for. You can use it to change css property values and make it responsive (with your custom limitations) that way.
3. Flexbox (IE10+ only (partial IE9))
Will be great but not recommended for now because of browser support.
4. Tables
Take this thread to know why you shouldn't use it.
So you basically want the right column to fit the available space.
You have 5 options that are not specific to bootstrap but general HTML/CSS:
1) use calc
.left-col {
width: 200px;
}
.right-col {
width: calc(100% - 200px);
}
That obviously excludes IE8 and other browsers that do not support calc.
2) use float
I didn't think of that one. Check #henser's answer for that. Seems to work pretty good although I was under the impression that the right-col would break down if there isn't enough available space for it's content. Apparently I was wrong - this seems to be the best method if you want to support older browsers.
3) use flexbox
That is a bit more work and maybe complicated but I can recommend this great guide to get started with flexbox.
That obviously excludes old IE versions as well.
4) use tables
Ugly, not really recommended but it supports all browsers.
5) Javascript
you can use JavaScript to calculate the remaining space. But that of course needs to be fired on resize. Not recommended as it's not as fast as the other options.
// jQuery example
$('.right-col').width($(window).width() - $('.left-col').width());
I am currently using the bootstrap scaffolding/grid system as follows:
<div class="row-fluid">
<div id="insta-shop-filter" class="span2 visible-desktop">
</div>
<div id="insta-shop-grid" class="span10">
</div>
<div>
As you can see I added the visible-desktop to insta-shop-filter so that this will disappear on non-desktop. However what I wanted to do is that when this disappears I wanted insta-shop-grid to have a span12, so it takes the full width. Is there a way to do this without having to use javascript/jQuery and listening for window events?
You can use CSS3 media queries to toggle your styling on different devices. In this instance, you might consider writing a media query based on a 640px or 480px device width that does something like the following:
#media screen and (max-device-width:640px){
#insta-shop-filter{
display:none;
}
#insta-shop-grid{
width:640px!important;
}
}
One small note here, using !important is discouraged.
In bootstrap 2 (which it appears you are using) I don't think there is an easy way to do this without overriding the style with a custom CSS media query (like #Conqueror suggested) or adding/removing classes in javascript.
However I just want to point out that this is baked into Bootstrap3 by using col-SIZE-SPAN as documented here. In your case it would be.
<div class="row-fluid">
<div id="insta-shop-filter" class="col-md-2 hidden-sm">
</div>
<div id="insta-shop-grid" class="col-md-10 col-sm-12">
</div>
<div>
I want to have two columns on my web page. For me the simples way to do that is to use a table:
<table>
<tr>
<td>
Content of the first column.
</td>
<td>
Content of the second column.
</td>
</tr>
</table>
I like this solution because, first of all, it works (it gives exactly what I want), it is also really simple and stable (I will always have two columns, no matter how big is my window). It is easy to control the size and position of the table.
However, I know that people do not like the table-layout and, as far as I know, they use div and css instead. So, I would like also to try this approach. Can anybody help me with that?
I would like to have a simple solution (without tricks) that is easy to remember. It also needs to be stable (so that it will not accidentally happen that one column is under another one or they overlap or something like that).
i recommend to look this article
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
see 4. Place the columns side by side special
To make the two columns (#main and #sidebar) display side by side we float them, one to the left and the other to the right. We also specify the widths of the columns.
#main {
float:left;
width:500px;
background:#9c9;
}
#sidebar {
float:right;
width:250px;
background:#c9c;
}
Note that the sum of the widths should be equal to the width given to #wrap in Step 3.
I agree with #haha on this one, for the most part. But there are several cross-browser related issues with using the "float:right" and could ultimately give you more of a headache than you want. If you know what the widths are going to be for each column use a float:left on both and save yourself the trouble. Another thing you can incorporate into your methodology is build column classes into your CSS.
So try something like this:
CSS
.col-wrapper{width:960px; margin:0 auto;}
.col{margin:0 10px; float:left; display:inline;}
.col-670{width:670px;}
.col-250{width:250px;}
HTML
<div class="col-wrapper">
<div class="col col-670">[Page Content]</div>
<div class="col col-250">[Page Sidebar]</div>
</div>
Basically you need 3 divs. First as wrapper, second as left and third as right.
.wrapper {
width:500px;
overflow:hidden;
}
.left {
width:250px;
float:left;
}
.right {
width:250px;
float:right;
}
Example how to make 2 columns http://jsfiddle.net/huhu/HDGvN/
CSS Cheat Sheet for reference
I found a real cool Grid which I also use for columns. Check it out Simple Grid. Wich this CSS you can simply use:
<div class="grid">
<div class="col-1-2">
<div class="content">
<p>...insert content left side...</p>
</div>
</div>
<div class="col-1-2">
<div class="content">
<p>...insert content right side...</p>
</div>
</div>
</div>
I use it for all my projects.
The simple and best solution is to use tables for layouts. You're doing it right. There are a number of reasons tables are better.
They perform better than CSS
They work on all browsers without any fuss
You can debug them easily with the border=1 attribute