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>
Related
I'm pretty new to coding and I know very little, so I apologize if the answer to this question is very simple, but I scoured the internet for hours and came up with nothing. So, I have a very basic column set up, ie, something along the lines of:
<div class="row">
<div class="col-6 col-sm-3">CONTENT
<div class="row">
<div class="col-6 col-sm-3">CONTENT</div>
<div class="col-6 col-sm-3">CONTENT</div>
</div>
</div>
<div class="col-6 col-sm-3">CONTENT</div>
</div>
Where I have a row of two primary columns and two additional columns in the leftmost of the two primary columns. The height of the rightmost primary column is dependent upon the height of the content in the leftmost primary column and scales in size with said column, which I believe that is how it usually works. But for the secondary columns inside the primary leftmost column, I need the height of the leftmost secondary column to scale with the height of the content in the rightmost secondary column. In visual terms: Example.
I know I could simply set a height for the content of that column, but the issue is that the content on the page is fluid, so on different size screens, it doesn't always match up. Is there a way to do this? Thanks!
Looks like your layout is reverse. Column classes indicate the number of columns you'd like to use out of the possible 12 per row. So, if you want two equal-width columns across, you can use .col-6. You can use this code:
<div class="row">
<div class="col-md-6 col-12">CONTENT
<div class="row">
<div class="col-md-6 col-12">CONTENT</div>
<div class="col-md-6 col-12">CONTENT</div>
</div>
</div>
<div class="col-md-6 col-12">CONTENT</div>
</div>
If you want two equal-width columns across. You can use this code
.bg-p{
background:#b8b8b8;
width:100%;
padding:1rem;
}
.bg-c{
background:#939393;
width:100%;
padding:1rem;
min-height:150px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<title>Demo</title>
</head>
<body>
<div class="row">
<div class="col-sm-6">
<div class="bg-p">P1
<div class="row">
<div class="col-sm-6">
<div class="bg-c">S1</div>
</div>
<div class="col-sm-6">
<div class="bg-c">S2</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 d-flex">
<div class="bg-p">P2
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>
I am trying to show 'test' name 3 times in a row and 3 times in the second row but it's not showing me the sections in a horizontal row
Instead, it showing me everything in verticle col pattern...
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<title>bootstrap</title>
<div class="services container">
<h2>Services</h2>
<div class="row">
<section class="col-md-6 col-md-4">
<img class="icon" src='images/cabbage.png' alt="Icon">
<h3>Vegitables</h3>
<p>Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.</p>
</section>
<section class="col-md-6 col-md-4">
<img class="icon" src='images/car.png' alt="Icon">
<h3>Cars</h3>
<p>Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.</p>
</section>
<section class="col-md-6 col-md-4">
<img class="icon" src='images/clothes.png' alt="Icon">
<h3>clothss</h3>
<p>Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.</p>
</section>
</div>
<div class="row">
<section class="col-md-6 col-md-4">
<img class="icon" src='images/motorcycle.png' alt="Icon">
<h3>Motorcycle</h3>
<p>Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.</p>
</section>
<section class="col-md-6 col-md-4">
<img class="icon" src='images/pet-icon.png' alt="Icon">
<h3>Pets</h3>
<p>Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.</p>
</section>
<section class="col-md-6 col-md-4">
<img class="icon" src='images/phone.png' alt="Icon">
<h3>Phone</h3>
<p>
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
</p>
</section>
</div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
//my css code
.icon{
max-width: 150px;
margin: 0 auto;
display: block;
}
.service section{
text-align: center;
}
how this code will work? are there some corrections or suggestions?
The bootstrap grid system requires their css styles.
Try putting the following in your <head> tag:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Your code seems fine, it should work after that.
Your code seems correct, you just need to handle for multiple screen resolutions, with the below snippet i added col-xs-4 which gives me the ability to render my grid system on smaller screens, checkout bootstrap's grid system's options here that should help you
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">//main container
<h2>Services</h2>
<div class="row">//1st row
<section class="col-xs-4 col-md-4 col-md-6">
<h2>Test</h2>
</section>
<section class="col-xs-4 col-md-4 col-md-6">
<h2>Test</h2>
</section>
<section class="col-xs-4 col-md-4 col-md-6">
<h2>Test</h2>
</section>
</div>
<div class="row">//2nd row
<section class="col-md-4">
<h2>Test</h2>
</section>
<section class="col-md-4">
<h2>Test</h2>
</section>
<section class="col-md-4">
<h2>Test</h2>
</section>
</div>
</div>
Here is the code I am using:
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<title>Column Test</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2">a</div>
<div class="col-md-2">b</div>
<div class="col-md-2">c</div>
<div class="col-md-2">d</div>
<div class="col-md-2">e</div>
<div class="col-md-2">f</div>
</div>
<div class="row">
<div class="col-md-2">g</div>
<div class="col-md-2">h</div>
<div class="col-md-2">i</div>
<div class="col-md-2">j</div>
<div class="col-md-2">k</div>
<div class="col-md-2">l</div>
</div>
</div>
</body>
</html>
The code inside the body tags was taken from some website as an example of the Bootstrap grid system. It works when pasted into w3school's try it yourself editor for bootstrap. When I try to run the entire html file in Chrome, however, the row elements are all stacked vertically. Is there something fundamentally wrong with the syntax in some other part of the html file? Or is there something about the syntax of bootstrap's grid system itself that I'm missing?
A similar question was asked about a year ago: Columns in bootstrap 3.0 only stacking vertically
This single answer to this question has to do with switching md with xs, but I am using a 13 inch MacBook Pro, so md should do the trick. Anyway, I already have tried using the different sized col classes, so this is clearly not the problem.
Use span[#of columns] instead of col-md-[#of columns].
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).
I know the very basics of CSS and recently went on with using CSS frameworks because it made my life much easier. I have a question in terms of grid systems, am currently using zurb foundation 3 (http://foundation.zurb.com/)
The problem am facing is mostly when creating a row i cannot give it a specific height. It seems to me like grid systems are designed to use as it is, I read in different places that it is not recommended to try and change the height of a row and to just place items inside it as it is.
In my project, I have a content area whereby I want to display a fixed height and width div but its not working for me. so, can any one advise me what should i do? below is my html code
update: edited the html
<div class="row">
<div class="six columns">
<div style="height:6em; width:5em;>
<!-- my block -->
</div>
</div>
<div class="six columns">
<div style="height:6em; width:5em;>
<!-- my block -->
</div>
</div>
</div>
Your 'style' declarations are wrong
style="height=6em; width:5em;
should be
style="height:6em; width:5em;"
NOTE: you used = instead of : AND you missed the closing quotation "
And you should not use inline styles - separate to a .css file and target them by class
<html>
<head>
<link rel="stylesheet" type="text/css" href="/foundation3/stylesheets/foundation.css"/>
</head>
<body>
<div class="row">
<div class="six columns">
<div style="height:6em; width:5em;">
<!-- my block -->
</div>
</div>
<div class="six columns">
<div style="height:6em; width:5em;">
<!-- my block -->
</div>
</div>
</div>
</body>
</html>
NOTE: I have not declared a DOCTYPE here - this is barebones. It does work I have tested it in Firefox and Chrome. Just stating it does not work is not helpful OP