I have box in my HTML page. The box width responsive. on desktop it should take 540px width and in mobile the box should take 100% width. the is centre align in desktop. The problem I am facing is that on mobile view the box width is not touching the device width because of container class. This problem can be fixed for using .row class but when I use class it is also expending the width of box on desktop. Can this require be achieved without writing extra media query. fiddle
<div class="container">
<div class="col-xs-12 col-md-6 box">
<div class="col-md-12" style="background:#022243">
content....
</div>
</div>
</div>
Using media queries is the fastest and most reliable way to attain what you need here I think but If you do not want to then for me my approach is this..
<div class="container hidden-xs visible-sm-block">
<div class="col-xs-12 col-md-6 box">
<div class="col-md-12" style="background:#022243">
content....
</div>
</div>
</div>
<div class="row visible-xs-block hidden-sm">
<div class="col-xs-12 col-md-6 box">
<div class="col-md-12" style="background:#022243">
content....
</div>
</div>
</div>
Not tried yet but I think this will satisfy your problem.
Hope it helps
See js fiddle:
Fiddle
Did a new mobile class to remove padding on mobile from container, also added padding:0; on col-xs-12
.col-xs-12 {
padding:0;
}
#media (max-width : 480px) {
.mobile_fix {
padding:0;
}
}
Related
I'm using Bootstrap 4, but I don't want to use screen width. I want layout over whatever width the container has.
I couldn't find the details after searching.
The following codes are placed according to the screen width. However, I want it to be adjusted according to the current width of the container I specified.
<div class="row">
<div class="col-lg-4">
SIDEBAR
</div>
<div class="col-lg-8">
<div class="row"> /*The following boxes should be shaped according to the width of this container.*/
<div class="col-xl-4 col-lg-3">A</div>
<div class="col-xl-4 col-lg-3">B</div>
<div class="col-xl-4 col-lg-3">C</div>
<div class="col-xl-4 col-lg-3">D</div>
</div>
</div>
</div>
I'm not very sure what you need exactly, but it seems that you want a boxed layout instead a fluid one. If you use a .container class will apply the boxed effect you want.
<div class="container">
<div class="row">
<div class="col-lg-3 col-xl-4">Column</div>
<div class="col-lg-3 col-xl-4">Column</div>
</div>
</div>
Here the documentation: https://getbootstrap.com/docs/4.0/layout/overview/
If this is not what you need, please try to be more clear about your goal.
I'm having trouble with making some of my div elements responsive.
The image with the magnifying glass is refusing to resize when the window is smaller, for example on a ipad. I have tried other methods of resizing but resulting in failure.
Website link: http://onlinestaff.net
Problem: The magnifying-glass-image on your website uses the attribute max-width:none which causes the image to be displayed in full size even on smaller screens.
Solution: When making images responsive we usually use the CSS attribute max-width:100% to ensure that big images scale down to fit on the screen (or better: fit into the parent container)
You can try something like this to make divs responsive and their position relative to the size of screen:
<body>
<div class="container">
<div class="row row-centered pos">
<div class="col-lg-8 col-xs-12 col-centered">
<div class="well"></div>
</div>
<div class="col-lg-8 col-xs-12 col-centered">
<div class="well"></div>
</div>
<div class="col-lg-8 col-xs-12 col-centered">
<div class="well"></div>
</div>
</div>
</div>
</body>
Hey guys I am trying to create a 50:50 ration on my split screen layout.Text on one side and picture on the other I was able to get this far.
<div class="content-section-a">
<div class="container">
<div class="row">
<div class="col-lg-5 col-sm-6">
<div class="clearfix"></div>
<h2 class="section-heading">Trying some code:<br>Special Thanks</h2>
<p class="lead">A special thanks to the community of coders</a> for providing the help and support</p>
</div>
<div class="col-lg-5 col-lg-offset-2 col-sm-6">
<img class="img" src="assets/img/prg.jpg">
</div>
</div>
</div>
CSS
.img {
width: auto;
height: 250px;
}
Try using Bootstrap's grid system. Here's some example HTML you could use:
<div class="row">
<div class="col-md-6">
<h2 class="section-heading">Trying some code:<br>Special Thanks</h2>
<p class="lead">A special thanks to the community of coders</a> for providing the help and support</p>
</div>
<div class="col-md-6">put your images in this section<img class="img" src="assets/img/prg.jpg"></div>
</div>
This will put the text section on the left side of the page and the responsive image on the right. If the page is collapsed so it can't fit both horizontally they will stack. You can change this if you like. For more information see Bootstrap's guide on the Grid System. http://getbootstrap.com/css/#grid
What you should use is col-xs-6 instead of col-sm-6 because col-sm-x is used for screens with min-width: 768px or higher.
You may be seeing it showing at the bottom because your using sm instead of xs and the screen resolution is below 768px.
I currently have 3 buttons that are inline. I'm having issues in how to style these buttons so the width is automatically calculated to take the width of the parent div. For example, if the parent div is 1000px, I'd like the width of the inline buttons to be 1000/3 - a set margin to space these buttons. So those need to be taken into account which will be fixed. Catch is, the first and last element should not have a left margin and right margin respectively. This way I can dynamically add buttons and the styling should take care of the width. Hope that helps?
JsFiddle
HTML:
<div class="row" style="width: 1000px;border: 1px solid #999;">
<div class="row" style="padding-bottom:20px;">
My Button
My Button2
My Button3
</div>
</div>
You could use a table as so:
<table style="width:100%;">
<tbody style="width:inherit;">
<tr>
<td>Left</td>
<td>Centre</td>
<td>Right</td>
</tr>
</tbody>
</table>
And then add as many <td> elements as needed.
Assuming you are ignoring bootstrap standards, and wanting to custom style this.
try
.row {
/*width: 1000px;*/
border: 1px solid #999;
}
.row .row {
padding-bottom: 20px;
margin 0 -10px; /*offset the left and right gutter*/
}
.btn-default {
display: block;
float: left;
text-align: center;
margin: 10px; /*example margin*/
padding: 30px;/*example padding */
/*width: 30%;*/ /*fall back if needed*/
width: Calc((100% / 3) - 20px); /*minus 2 x margin*/
}
JSFiddle
KingKongFrog. Hi again. When you set a width to a fixed value like 1000px you lose the ability to be responsive. Try to use percentage. When using Bootstrap the xs starts around 700px, if you have say 3 buttons side by side you can run into problems fitting them across a small screen like 320px.
So you need to take over control from bootstrap css a little to do want you want to do.
I have added some of the bootstrap classes and also added some more custom classes to help show what you may need to do here.
Using #media (max-width: 320px) is the main width that you may need to control like reducing the size of the buttons/fonts etc. And if using any col-xs-offset-X when it shown on a screen size within 320px you will need to reset these to zero left etc.
Custom css that you want/need to over ride Bootstrap needs to be placed below bootstrap in the page.
Have a look at the Fiddle here and try resizing it.
Here is a full screen fiddle view that's easy for resizing.
<br>
<div class="container bg-info">
<br>
<div class="col-lg-12 bg-warning">
<br>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3
col-lg-offset-2 col-md-offset-2 col-sm-offset-1 col-xs-offset-2
col-xxs-pull-1">
My Button1
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3
col-lg-offset-0 col-md-offset-0 col-sm-offset-1 col-xs-offset-0
.col-xxs-offset-1">
My Button2
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3
col-lg-offset-0 col-md-offset-0 col-sm-offset-1 col-xs-offset-0
col-xxs-push-1">
My Button3
</div>
<br><br>
</div>
<br>
</div>
If you are working with bootstrap, you have to understand the grid system. There is col-xs-..., col-sm-..., col-md-..., col-lg-... to handle the column width. Therefore don't set a width. Read bootstrap grid options to understand the basics. A whole width of the screen has in total 12 columns. For example col-xs-12 in smaller displays fills the whole width.
HTML
<div class="row">
<div class="col-..."></div>
<div class="col-..."></div>
<div class="col-..."></div>
</div>
<div class="row myButtons">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
My Button
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
My Button2
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
My Button3
</div>
</div>
Here in all device sizes every part has 4 columns. In total 12. (Set, for example every cols-xs-4 to col-xs-12 and resize the screen to see what happens!). That's how bootstrap work.
Example
I have this html code that uses bootstrap:
<div class="row">
<div class="col-sm-12 col-xs-6"><h1>DIV1</h1></div>
<div class="col-xs-12"><h1>DIV2</h1></div>
<div class="col-sm-12 col-xs-6"><h1>DIV3</h1></div>
<div>
It is working fine for all devices except xs. On extra small devices I want DIV1 and DIV3 on same row (on first row).
I want to maintain the layout as it is for all other devices.
You may have to add additional styling to achieve this as the divs will generally follow after each other. You could set positioning to absolute and with additional bottom margins for the other two place the middle one below.
I managed it via css and bootstrap classes:
<div class="row">
<div class="col-sm-12 col-xs-6"><h1>DIV1</h1></div>
<div class="col-xs-12"><h1>DIV2</h1></div>
<div class="col-sm-12 col-sm-offset-0 col-xs-6 col-xs-offset-6" id="div3"><h1>DIV3</h1></div>
</div>
And the css for third div:
#media (max-width: 767px) {
#div3{
position:absolute;
top:0px;
}
}