How to disable the responsiveness / grid of bootstrap?
I am building the website for the company, and i already make the website responsive for the mobile devices. However, they told me they want to make another design for the mobile, but the desktop version will be published first. They want to keep desktop design when user using mobile or make the browser to mobile size, like traditional website, user should scroll left and right to view the website.
I've tried to add min-width on the wrapper/body, it just extend the width, but the elements using bootstrap grid still responsive. Can I using simple css tricks to fix this problem.
Here is the sample:
https://jsfiddle.net/j17qtLfv/
I want to keep 2 or 3 col one row even small size.
Any one can help me?
Well, remove the class names that indicate that it should be a different column layout on smaller screens.
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
#block{
background:red;
min-width:1000px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div id="block">
<div class="container">
<div class="row">
<div class="col-6">
1 of 2
</div>
<div class="col-6">
2 of 2
</div>
</div>
<div class="row">
<div class="col-4">
1 of 3
</div>
<div class="col-4">
2 of 3
</div>
<div class="col-4">
3 of 3
</div>
</div>
</div>
</div>
This blog provides steps to disable responsiveness of bootstrap.
http://blog.netgloo.com/2014/05/11/how-to-use-twitter-bootstrap-3-for-non-responsive-site/
Related
I'm currently working on a website and I have come across with the following problem thinking the best practice to achieve the following layout using Bootstrap 4. (Wrapped in Red)
As you can see the first column is a col-md-7 and the other one is col-md-5. However, the first column includes an image and it has to touch the left corner of the page. However, the right column has to have the standard width and column size. To give you more insight following is what I'm trying to achieve.
[JS Fiddle][2]
You mean something like that using align-self-start class?
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.image {
height: 200px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container">
<div class="row d-flex">
<div class="col image">
Image
</div>
<div class="col align-self-start">
Test
</div>
</div>
</div>
You will need to wrap the left image and the right column in a row, set the column width for each, then place each item in the right column inside of that div with a full width.
I think if you continue to ask "do it for me" questions on SO you will get roasted, I know I have. But I'm here to help. LMK if you want more details.
There are a million solutions to this problem, This would be a great time to look into CSS Grid and learn the new new.
Here is a codepen of the general approach
<div class="row">
<div class="col-md-7 left-box"></div>
<div class="col-md-5">
<div class="col-md-12 item"></div>
<div class="col-md-12 item"></div>
<div class="col-md-12 item"></div>
</div>
</div>
This question already has answers here:
Responsive web design is working on desktop but not on mobile device
(4 answers)
Closed 5 years ago.
Good day,
I have a little gallery section on a web page where I make use of a css grid. it works perfectly fine on a normal web browser and when i scale it down i have managed to have it adjust as i wish using Media Queries (one image after the other), To my disappointment this didn't work when viewing on a mobile devise.
This is my first web site i have created so i expected issues. but I am now stuck on this one.
I need the images to arrange themselves below each other on a mobile browser. How would I go about this? see below html & css, the webpage is redneckrebellion.co.za if you want to see what I'm talking about or see https://codepen.io/underlight/pen/eyYLBa.
<content class="main-body">
<div class="main-content">
<div class="portfolio">
<div class="portfolio-item medium-one">
<div class="description">
<h1 class="text">Coffee Table</h1>
<p class="text">Custom Union Jack Coffee Table</p>
</div>
</div>
<div class="portfolio-item medium-two">
<div class="description">
<h1 class="text">Laser Cut Logo</h1>
<p class="text">Redneck Rebellion Laser Cut Logo</p>
</div>
</div>
<div class="portfolio-item wide-one">
<div class="description">
<h1 class="text">Custom Desk</h1>
<p class="text">Custom Desk Built To Clients Design</p>
</div>
</div>
<div class="portfolio-item tall">
<div class="description">
<h1 class="text">Container Cupboard</h1>
<p class="text">Custom Cupboard Built For Lillimex</p>
</div>
</div>
<div class="portfolio-item wide-two">
<div class="description">
<h1 class="text">Custom Shelf</h1>
<p class="text">Custom Shelf Built For Kids Car Themed Bedroom</p>
</div>
</div>
</div>
</div>
thanks!
There are many ways of doing this, and, based on your question, I'm assuming that these divs are being displayed horizontally already? Which means that they are using the display property of inline or inline-block, or, using float already. If you want to have something that will be re-usable (like Bootstrap framework), you can do something like this:
#media screen and (max-width: 480px) {
.medium-one, .medium-two .wide-one .tall .wide-two {
display:block;
}
}
Also, I would highly recommend using a library that is already made for something like this, such as Bootstrap
The simplest way is to surround your .portfolio-item with a media query like this:
#media(min-width: 500px) {
.portfolio-item {
margin: 10px;
box-shadow: 1;
display: flex;
justify-content: center;
align-items: center;
border: 5px solid white;
border-radius: 3%;
}
}
The grid is a 12-column fluid grid with a max width of 960px, that shrinks with the browser/device at smaller sizes. The max width can be changed with one line of CSS and all columns will resize accordingly. The syntax is simple and it makes coding responsive much easier. Go ahead, resize the browser.
<!-- .container is main centered wrapper -->
<div class="container">
<!-- columns should be the immediate child of a .row -->
<div class="row">
<div class="one column">One</div>
<div class="eleven columns">Eleven</div>
</div>
<!-- just use a number and class 'column' or 'columns' -->
<div class="row">
<div class="two columns">Two</div>
<div class="ten columns">Ten</div>
</div>
enter code here
<!-- there are a few shorthand columns widths as well -->
<div class="row">
<div class="one-third column">1/3</div>
<div class="two-thirds column">2/3</div>
</div>
<div class="row">
<div class="one-half column">1/2</div>
<div class="one-half column">1/2</div>
</div>
</div>
<!-- Note: columns can be nested, but it's not recommended since Skeleton's grid has %-based gutters, meaning a nested grid results in variable with gutters (which can end up being *really* small on certain browser/device sizes) -->
I have a Wordpress template that uses Bootstrap 2.3.1.
I currently have my two areas set up via an SPAN4 and SPAN8.
The resolution is locked at 1170px, therefore the lg component of Bootstrap is not needed to be configured.
I would like some help with the areas shown in red, as to how to configure my nested columns, so they work properly. They are within an area already defined as Span 8, so in effect, it is an 8 wide grid that needs to be configured to show 3 columns on medium devices, 2 columns on small devices and 1 column on the extra small devices.
I am relatively new to CSS, but have some understanding of basic coding, it's just doing my head in at the moment.
The attached picture show what I am after
My Wordpress layout
I can't seem to get any bootstrap to work with the sizes I would like to display.
I suggest you to use bootstrap version 3
http://getbootstrap.com/css/#grid-responsive-resets
unlike version 2, it has classes like col-lg-* col-md-* col-sm-* col-xs-*, which can get your job done more easily.
trying to understanding your problem.
try the demo code below to see if it's the layout you want
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/bootstrap#3.3.7/dist/css/bootstrap.css">
<style>
.b {
border: 1px solid #333;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-4">aside</div>
<div class="col-xs-8">
main
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="b">
<h3>.col-md-4.col-sm-6</h3>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="b">
<h3>.col-md-4.col-sm-6</h3>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="b">
<h3>.col-md-4.col-sm-6</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I am building a website using Bootstrap 3, and I have multiple small divs on a page. I want to control their size for the desktop view and have them be the full width of the screen for the mobile view.
This is what I am thinking of:
I have tried putting each small div in a column and then setting the width to 100%, but that gives me this result:
I haven't used bootstrap for very long, so I wasn't sure what to look for. I dug around the w3 schools website and found something about box-sizing, but it doesn't do what I described above.
The question here seems similar to mine, but I didn't quite understand the answer and didn't want to add to an old question.
My question is, how can I achieve this effect?
Thanks for any help in advance!
Use the col-md-3 class to divide the container to 4 columns. col-md-* targets the screen size which is larger than the small devices.
Learn more about the grid system here: Bootstrap Grid
[class^=col] {
background: tomato;
color: white;
font-weight: bold;
/* Below properties used to create margin between the columns */
background-clip: padding-box;
border: 5px solid transparent;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row text-center">
<div class="col-md-3">
1
</div>
<div class="col-md-3">
2
</div>
<div class="col-md-3">
3
</div>
<div class="col-md-3">
4
</div>
</div>
</div>
Hopefully this image explains exactly what I'm trying to accomplish:
Since the blue block represents a simple list, I think it may be easier to just output the block twice, and apply a "desktop-only" and "mobile-only" class, then use that class to dictate visibility, but I was curious to know if the above is possible with pure HTML/CSS out of box for Bootstrap 3?
This should work:
<div class="row">
<div class="col-md-4">First</div>
<div class="col-md-8" id="big">Big</div>
<div class="col-md-4">Second</div>
</div>
And CSS:
#media (min-width: 769px) {
#big {
float: right;
}
}
Here is an example: http://jsfiddle.net/8r4g20cr/1/
I'm not sure if it possible but from your layout you need something like:
<div class="row">
<div class="col-md-4">
<div class="marron"></div>
<div class="blue"></div>
</div>
<div class="col-md-8">
<div class="green"></div>
</div>
</div>
When you the screen resized, the div in rows will be stacked up orderly. I don't think I can reorder it for mobile devices. Stay tune for other opinions.