I am using the bootstrap to draw my page. I want to put the 'Title' not started with the line. But the col-md-offset-4 does not work.
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">Beyond forever</h1>
<h2 class="text-center"><em>My favorite band</em></h2>
<div class="thumbnail text-center"><img src="http://res.cloudinary.com/deqlvmd9w/image/upload/v1494666517/beyond_ihkzoj.jpg"/>
</div>
</div>
<div class="col-md-8 col-md-offset-4">
<h3>Title</h3>
</div>
</div>
Here's the link https://jsfiddle.net/heshijinghuang/opsv0e09/
Thanks for all your reply. The issue has been solved. It is because boostrap 4 using different offset style(offset-sm-2）In bootstrap 3, it's col-offset-sm-2.
It works :) Try to resize JSFiddle result tab. It's size is just to small to be md size. If you want to achieve the same result on small screens, use sm or xs classes, like col-sm-8 col-sm-offset-4 or col-xs-8 col-xs-offset-4.
col-md-offset-4 "does not work" in your jsfiddle because the jsfiddle view area is very small, which makes -md- not work any more.
To make it work in jsfiddle, you need to change it to col-sm-offset-4, and expand the view area a bit.
BTW, If the header need to be centered via col-*-offset-*, I think it is better to use col-sm-offset-2 for your case.
I've made a new jsfiddle. Please check (need to resize the result panel and increase its width).
you are styling medium size screen md, while JSfiddle html renderer falls in small size sm
change your col-md-8 col-md-offset-4 to col-sm-8 col-sm-offset-4 and it will work
Related
I am a complete beginner and I am learning Bootstrap. I want to know how to determine which column system I need to use in my website. Suppose I have a row with 3 columns. Now I have 3 options.
Option 1:
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
Option 2:
<div class="row">
<div class="col-lg-4">
</div>
<div class="col-lg-4">
</div>
<div class="col-lg-4">
</div>
</div>
Option 3:
<div class="row">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
</div>
Now my question is, As I want my website to be responsive which class I need to apply. I want my website to render properly irrespective of device selected. I understood that they are meant for different devices. Does that mean, I need to write 3 different css style code (I doubt it). So, what shall I put in my code?
P.S: I saw this link SO LINK and I understood it. But still I am confused, what to put in my code? Shall I put sm,lg or md?
These define the width of the screen at which the layout will collapse. For example, in .col-md-, the layout will be horizontal until the screen width is less than 970px, at this point, the layout will collapse. However, if you use .col-lg-, the layout will be horizontal until the screen width is less than 1170px, then it will collapse.
Bootstrap has 4 breakpoints, .col-xs-, .col-sm-, .col-md- and .col-lg-. You should use these depending on the content of the div. The best way to become familiar is to play around with each one and notice that the layout collapses at different points for each one when you decrease the width of your window. So to answer the question, you should choose whichever one collapses correctly for the content of your div. Hope this helps.
For a more detailed guide on the bootstrap grid system, take at look at this: https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
I found it helpful to get a good understanding.
I generally use col-md prefix, so I guess your first option would work quite fine: col-md-4.
To add to the other suggestions you've received, remember that you can apply multiple Bootstrap column classes to the same div.
For example say you wanted 3 equal width columns on a wide viewport. Then as the viewport narrows this changes to one full width header with two equal width columns below, and on smartphones all three divs are stacked vertically, then you might use something like
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-12">column1
</div>
<div class="col-lg-4 col-md-6">colmun2
</div>
<div class="col-lg-4 col-md-6">column3
</div>
</div>
</div>
See this live https://codepen.io/panchroma/pen/EwVwpw
Or you might want to change the relative widths of your 3 columns at different viewports
<div class="row">
<div class="col-lg-6 col-md-4">
</div>
<div class="col-lg-3 col-md-4">
</div>
<div class="col-lg-3 col-md-4">
</div>
</div>
Or you might want to hide one of the columns at narrower viewports
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4 hidden-sm hidden-xs">
</div>
</div>
The important thing is that you can mix and match your classes to achieve the responsive behaviour that you need.
Once you get the hang of the grid sizing options you might also want to check out how to reorder columns. What often happens is that you need to have a different column order on desktop and mobile, and there will probably be times when you want to offset columns as well.
Good luck!
Im making my website responsive for devices but i want to know if i can set a grid or margin/padding property for iphone so i can place it nicely and not 2 paragraphs in eachother.
I already tried to grid some text but it still looks weird in eachother this is my code:
<div class="row">
<div class="col-xs-1 col-lg-12">
Thisismy Test
</div>
</div>
You haven't tagged this as being a Bootstrap grid, but I'm assuming it is because of your grid classes.
You mention that you want to stop the navbar-brand text from wrapping on an iPhone so I'm wondering if there's there a reason why you wouldn't make the navbar-brand parent wider?
It looks to me as if it would need to be minimum col-xs-5
Here's a example showing both your existing HTML and the modification
https://codepen.io/panchroma/pen/OgQxBw
HTML
<div class="row">
<div class="col-xs-5 col-lg-12">
Thisismy Test
</div>
</div>
If you want to show the paragraph in entire row in mobile , use col-xs-12 class which will occupy the entire row space and display everything in one row in all th escreen sizes.
<div class="row">
<div class="col-xs-12">
Thisismy Test
</div>
</div>
If you want to display 2 paragraphs in row side by side use col-xs-6 for each div
<div class="row">
<div class="col-xs-6 col-lg-12">
Thisismy Test
</div>
<div class="col-xs-6 col-lg-12">
Thisismy Test
</div>
</div>
If you want to write your own CSS , you can do that by using media queries to define custom CSS for different screen sizes https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Here is what I wanted to do in wide screen:
, where buttons are right side and located in one line.
Those are supposed to located in small screen like this:
, where button are separated in each rows
I think that I could implement this with bootstrap grid system, but kinda hard to implement this.
Here is what I tried:
<div class="row">
<div class="col-sm-offset-8 col-sm-2">
주문 취소
</div>
<div class="col-sm-offset-10 col-sm-2">
주문 수정
</div>
</div>
But doesn't work. Need helps. Thanks.
I don't understand what you want, but I guessed what you want.
Do you want to show like this?
You can see here
an example
you need to add change col-sm-2 class to col-sm-12 (will extend on small screen)
and add class col-lg-2
also set offset to lg screen
<div class="row">
<div class="col-lg-offset-8 col-sm-12 col-lg-2">
주문 취소
</div>
<div class="col-sm-12 col-lg-2">
주문 수정
</div>
</div>
I'm trying to reorder the columns on my website via Bootstrap's method of reordering columns depending on the screen size which works fine for most of the responsive layouts I'm testing apart from 1.
The layout having problems is the Tablet Landscape Layout (1024 x 768) which displays like this:
Every other screen displays the blue div and the right div either with the red div on top if the screen is too small or on the right with the blue div aligning itself exactly next to it if the screen is large enough.
This is the code I'm using right now:
<div class="container">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="row clearfix">
<div class="col-xs-12 col-sm-12 col-md-push-8 col-md-4 col-lg-push-8 col-lg-4 col-xl-push-8 col-xl-4" style="background: red">
Basket
</div>
<div class="col-xs-12 col-sm-12 col-md-pull-8 col-md-8 col-lg-pull-4 col-lg-8 col-xl-pull-8 col-xl-8" style="background: blue">
News
</div>
</div>
</div>
</div>
Does anyone know why the blue div is so far to the right on the Tablet Landscape layout rather than touching the red div like it should?
Some general markup issues:
First of all, there's no col-xl-*, so you can get rid of those.
Secondly, you don't need col-xs-12, since the default is for it take up the whole width unless otherwise specified.
Third, Bootstrap is mobile first, so larger sizes will override the existing smaller sizes, meaning if you don't intend on changing something, there's no need to specify the larger size again.
The actual issue is that col-*-pull-* is relative to where the element would be placed. Bear in mind, you haven't changed anything in the document flow. So the elements are positioned normally and then phase shifted with left or right. Since the blue container would normally start 4 columns over, you only need to pull it back by 4 columns, instead of 8.
The whole thing can be rewritten like this:
.red { background: red }
.blue { background: blue }
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row ">
<div class="col-md-4 col-md-push-8 red"> Basket </div>
<div class="col-md-8 col-md-pull-4 blue"> News </div>
</div>
</div>
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! :)