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>
Related
What is the best way to keep page content centered without appearing too thin when viewed on mobile? This is using a centered single column layout.
When I view the following on a desktop, it achieves the desired look and spacing, but on mobile the content is constrained to too small an area and appears far too narrow.
<section id="copybox" class="pl-sm-1 pl-md-5 pr-sm-1 pr-md-5">
<div class="row justify-content-center">
<div class="col-7">
(Area consisting of multiple div's, paragraphs etc)
</div>
</div>
</section>
What can be done to resolve this?
You're using col-7 which is always going to take up 58.333% of the width of it's parent. Use a wider column (ie: col-10, col-11, col-12, etc...) on mobile.
<section id="copybox" class="pl-sm-1 pl-md-5 pr-sm-1 pr-md-5">
<div class="row justify-content-center">
<div class="col-sm-7 col-10 border">
(Area consisting of multiple div's, paragraphs etc)
</div>
</div>
</section>
Demo: https://www.codeply.com/go/ueIUlH19DB
Try to use wider columns as Zim suggested.
Also, make sure to have a viewport meta tag in html page
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
I am attempting to work with Bootstrap for the first time and having a problem implementing the 'col' tag so that it fits as much content / rows as the viewport will allow. Below is my base markup.
I believe that I am following the correct order of using a div / section tag with the class of "container text-center", then a div / class="row" tag and then an article with a class of "col". It was my understanding that if the "col" tag is not / does not have set column widths, it will then attemp to creat a row of six columns or fit as many columns as it can depending on the how the characters of the words within the columns will allow for the content to break / display / render.
I believe that what I have done ought to work. I am working with Bootstrap v4 beta 0.6 in accordance with the lynda videos as seen in enter link description here
I am hoping someone can explain / point out where I am goofing things up. I have checked Stack Overflow for a similar issue, and while I found similar issues, they all speak to the col-size-# rather then just the 'row' class itself.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Bootstrap</title>
</head>
<body>
<style>
img {
width: 100px;
display: block;
}
</style>
<header class="clearfix" style="height: 50vh; background: url(images/background.jpg) no-repeat center center; background-size: cover; margin-bottom: 20px;">
<!-- container and or container-fluid -->
<div class="container-fluid"><img src="images/wisdompetlogo.svg" alt="Wisdom Pet Logo"></div>
</header>
<section class="container text-center" id="services">
<row>
<article class="col">
<img class="mx-auto" src="images/icon-exoticpets.svg" alt="Icon">
<h3>Exotic Pets</h3>
<p>We offer specialized care for reptiles, rodents, birds, and other exotic pets.</p>
</article>
<article class="col">
<img class="mx-auto" src="images/icon-grooming.svg" alt="Icon">
<h3>Grooming</h3>
<p>Our therapeutic grooming treatments help battle fleas, allergic dermatitis, and other challenging skin conditions.</p>
</article>
<article class="col">
<img class="mx-auto" src="images/icon-health.svg" alt="Icon">
<h3>General Health</h3>
<p>Wellness and senior exams, ultrasound, x-ray, and dental cleanings are just a few of our general health services.</p>
</article>
<article class="col">
<img class="mx-auto" src="images/icon-nutrition.svg" alt="Icon">
<h3>Nutrition</h3>
<p>Let our nutrition experts review your pet's diet and prescribe a custom nutrition plan for optimum health and disease prevention.</p>
</article>
<article class="col">
<img class="mx-auto" src="images/icon-pestcontrol.svg" alt="Icon">
<h3>Pest Control</h3>
<p>We offer the latest advances in safe and effective prevention and treatment of fleas, ticks, worms, heart worm, and other parasites.</p>
</article>
<article class="col">
<img class="mx-auto" src="images/icon-vaccinations.svg" alt="Icon">
<h3>Vaccinations</h3>
<p>Our veterinarians are experienced in modern vaccination protocols that prevent many of the deadliest diseases in pets.</p>
</article>
</row>
</section>
</div><!-- content container -->
<script src="js/jquery.slim.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>
There are a few minor corrections needed to make sure you achieve the results you want.
Change the <row> element to a <div class="row">
Make sure that you are loading the correct version of bootstrap
you can see it here on this bootply
The width of bootstrap is 12 (it's using a grid). So if you want 6 articles you have to do this :
<article class="col-lg-2">
(With 6 articles, you have 12)
You can learn more here :
https://getbootstrap.com/examples/grid/
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>
We are using bootstrap, when I take a row and divide it into two column(col--6 and col--6), then one column contains the responsive image having img-responsive class and other col contains the description of the image having background color/image. but this color/image size is not equal to first column having image when I viewed it on mobile screen. Here is my code:
.myfontpage{ background:URL(Image/main.jpg) center no-repeat; width:100%; height:100%; }
.myfontpage h1,p{padding:15px 30px; text-align:center; font-size:4vw;}
<div class="row">
<div class="container">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<img src="Image/main.jpg" alt="Can not Display" class="imp-responsive"/>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 myfontpage">
<h1>Welcome to Yoga fitness club</h1>
<p>This is free template. only for the practices </a></p>
</div>
</div>
</div>
As much I have understood your question, I think you need both the columns of same size.
try removing width:100%; height:100%; from 'myfontpage' class.
I think you have not included the js and css files for bootstrap.
You can include it in your project by downloading it or using the following CDN:
For CSS:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
For JS:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
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).