I need to fix 3 <div>s in the center of my webpage. I tried to use margin: 0 auto; but it doesn't work, even using Bootstrap's grid. It's complicated because whatever I'll do the 3 <div>s don't fix exactly in the middle. It most to goes 3 buttons, and every button has a paragraph below.
<section class="contenedor">
<nav>
<ul><div class="contenedor">
<li class="col-md-3"><img src="imagenes/icono-1.png" alt="responsive" class="center-block">
<p class="boton-textT">
RESPONSIVE</p>
<p class="boton-textT">WEB DESIGN</p>
<p class="boton-text col-md-12 ">
We create scalable Internet services.
The architecture of the content and
presentation is adapted to the screen
size and device type. We create
Responsive Web Design.
</p></li>
<li class="boton2 col-md-3"><img src="imagenes/icono-2.png" alt="mobile" class="center-block">
<p class="boton-textT">
MOBILE</p>
<p class="boton-textT">APPLICATIONS
</p>
<p class="boton-text col-md-12">
We design the user interfaces
of mobile applications. We know the
iPhone users' needs as well as Metro
system's requirements. Developers
respect quality and organization
of our work, clients love it.
</p></li>
<li class="boton3 col-md-3"><img src="imagenes/icono-3.png" alt="web" class="center-block">
<p class="boton-textT">
WEB</p>
<p class="boton-textT">APPLICATIONS
</p>
<p class="boton-text col-md-12">
We are building UI for web
applications. We understand both:
the strength of trends
and technology constraints. At the
end of the day the user is still the
most important.
</p></li>
</div>
</ul>
</nav>
</section>
1. Your mark up is wrong
You wrapped the lis with div.contenedor this is not a standard practice. Please remove it.
2. Need a better understand bootstrap's grid system.
It's divided into 12 basically. If you want to put 3 items on a row and want them to be well-aligned horizontally, you need to use col-**-4, not -3 there.
Reading this http://getbootstrap.com/css/#grid will help you understand it better.
I editted some of your code here - http://jsfiddle.net/fktkeu9r/
Grids are based on 12:
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
As pointed out, the code needs to be cleaned up and validated.
You'll want to edit your CSS to something like:
.contenedor
{
margin-left: auto;
margin-right: auto;
width: 80%;
}
Related
Hi i am using bootstrap 5 and using the grid functionality. I have divided my layout into 2 rows.
One row had text and image and other has two images.
It is showing totally fine in PC but with mobile view all the images does not have any spacing between them and it is looking bad.
I tried using gutters but it did not work out i dont know why.
Kindly Help. Here is the code
<div class="container">
<div class="row ">
<div class="col-lg-6">
<ul>
<li>The GATE course of Digcademy has been designed by experts who have vast experience of competitive examinations.</li>
<li>The GATE course is a three-tier approach to make the students more confident about their preparation.</li>
<li>The course is supported by topicwise videos so that there is no scope of doubt about the topic in the minds of students.</li>
<li>It covers theoretical concepts along with lot of topic wise examples. The examples given in the text are strictly from previous year GATE questions so that students can know the types of questions asked in GATE from that particular topic.</li>
<li>The practice questions at the end of each chapter cover all questions from GATE which appeared in EE, EC and IN branches from 1991 to till date for vide coverage of concepts.</li>
<li>The course includes topic wise practice test. These tests would help the students to know their performance after learning the concepts of each chapter.</li>
</ul>
</div>
<div class="col-lg-6">
<img src="images/electrical eng-1.jpg" alt="" style="width: 100%; height: auto">
</div>
</div>
</div>
<div class="container px-4">
<div class="row gy-5">
<div class="col-lg-6">
<img src="images/elect & comm eng-1.jpg" alt="" style="width: 100%; height: auto; position: relative">
</div>
<div class="col-lg-6">
<img src="images/instrumentation eng-1.jpg" alt="" style="width: 100%; height: auto">
</div>
</div>
</div>
You can put margin or padding at the bottom of each of your col divs. Since you’re using col-lg-6, for screen sizes less than lg, the columns will go full width. Adding bottom margin will give you a space. If you don’t want the space on lg screens, then you can use something like mb-3 mb-lg-0 to not have a margin on larger screens.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<div class="container">
<div class="row ">
<div class="col-lg-6">
<ul>
<li>The GATE course of Digcademy has been designed by experts who have vast experience of competitive examinations.</li>
<li>The GATE course is a three-tier approach to make the students more confident about their preparation.</li>
<li>The course is supported by topicwise videos so that there is no scope of doubt about the topic in the minds of students.</li>
<li>It covers theoretical concepts along with lot of topic wise examples. The examples given in the text are strictly from previous year GATE questions so that students can know the types of questions asked in GATE from that particular topic.</li>
<li>The practice questions at the end of each chapter cover all questions from GATE which appeared in EE, EC and IN branches from 1991 to till date for vide coverage of concepts.</li>
<li>The course includes topic wise practice test. These tests would help the students to know their performance after learning the concepts of each chapter.</li>
</ul>
</div>
<div class="col-lg-6 mb-3 mb-lg-0">
<img src="https://via.placeholder.com/480x360.png" alt="" style="width: 100%; height: auto">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-6 mb-3 mb-lg-0">
<img src="https://via.placeholder.com/480x360.png" alt="" style="width: 100%; height: auto; position: relative">
</div>
<div class="col-lg-6 mb-3 mb-lg-0">
<img src="https://via.placeholder.com/480x360.png" alt="" style="width: 100%; height: auto">
</div>
</div>
</div>
I am not sure what you really want with this question. So you have "2 answers here"
if you need spacing directly around content use padding. If you want to have it "outside" the box, use margin.
Be aware, you using col-lg-6 (lg is only for window >= 992px, so not mobile)
Bootstrap know "col-6", "col-sm-6", "col-md-6", "col-lg-6", "col-xl-6", "col-xxl-6""
If you want same everywhere use "col-6". This is difference are because of "e.g. in desktop you want content in 2 columns - "col-xxl-6", but if you want in smaller screen only one (because you would have content too small) you use class like "col-12 col-lg-6" So in the smaller you will have 1 column, in bigger 2 :) tadaaa
E.g. below - green is padding, orange is margin
I'm currently building my first website in bootstrap 4, and I have some general questions to either which I can't find a good response to or want to know how to handle something... Here it goes:
Is it common to use multiple container styles throughout a website? I mean is it perfectly okay to have a 'container'in one place and 'container-fluid' elsewhere?
Additionally, I created something very small to see how things would work out. Boostrap provides a class called 'text-md-right' and from what I can tell it should right align the text. Let me show my sample code. Why is the text in my 'bg-success' not right-aligning?
<div class="container-fluid">
<div class="row">
<div class="col-md-3" style="min-height: 0.5rem; background-color: #FBB040"></div>
<div class="col-md-3" style="min-height: 0.5rem; background-color: #939598"> </div>
<div class="col-md-3" style="min-height: 0.5rem; background-color: #D1D3D4"> </div>
<div class="col-md-3" style="min-height: 0.5rem; background-color: #28AB9E"> </div>
</div>
<div id="outter-div" class="row">
<div id="inner-div-1-logo" class="col-md-3 test"><img src="images/logo.png" class="mx-auto d-block" alt="helloworld" style="width:200px"></div>
<div id="inner-div-1" class="col-md-8">
<div class="row contact-bar text-md-right bg-success"> hello world -- needs to be right-aligned</div>
<!--<div id="contact-bar" class="row bg-success contact-bar"> Call Us # (888) 888-8888 | info#email.com | Customer Portal </div> -->
<div id="nav-bar" class="row nav-bar bg-primary"> nav-bar </div>
</div>
</div>
</div>
I'd love hear some feedback on the approach I am taking to building this based on the code above. Am I headed in the correct direction here? Anything you would do different?
Thank you.
Please use below link to read about Grid System Rules.
Visit https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
After reading the rules you can get started with building your own Html pages using examples given in below link
https://getbootstrap.com/docs/4.0/examples/
Is it common to use multiple container styles throughout a website? I mean is it perfectly okay to have a 'container'in one place and 'container-fluid' elsewhere?
It depends on you. You can use .container and .container-fluid according to your needs. But you can not use in the order shown .container > .row > .column > .container-fluid.
Additionally, I created something very small to see how things would work out. Boostrap provides a class called 'text-md-right' and from what I can tell it should right-align the text. Let me show my sample code. Why is the text in my 'bg-success' not right-aligning?
Yes it'll be aligning right on medium devices only. If you want it for other devices just use .text-right
For reference go through this link https://getbootstrap.com/docs/4.0/layout/grid/
Hello I have a site where there is some text telling the user about the site. I want to draw a white rectangle behind the text to separate it from the background.
I am able to draw the rectangle, but the rectangle draws over the text.
I am using the below CSS code to draw the rectangle:
#rect1 {
position: absolute;
width: 100px;
height: 100px;
background: #ffffff;
}
Here is the HTML in the main page:
<body>
<div class="container_24">
<header>
<h1>Omicrome</h1>
<nav>
<ul>
<li><a href="# " class=s elected>Home</a></li>
<li>Articles</li>
<li><a href="software.html">Projects</a ></li>
<li>About</li>
</ul>
</nav>
<div class="banner grid_18" href="about.html">
View Article
<h2>
</h2>
</div>
<div class=" grid_8 callout"></div>
View Gallery
</header>
<div id="rect1"></div>
<div class="main clearfix">
<div class="grid_9">
<h3>About The Site</h3>
<p>Here at Omicrome we are always coming up with new and innovative ideas for the future and for the present. These ideas are researched and expanded upon to make them a reality. View our ideas in the article section and see them come to life in
the project section. Our many project's range from software to hardware, Huge build's to small and fun one day project's. We are all about space and technology...
<p>Find Out More</p>
</div>
<div class="grid_9">
<h3>Our Content</h3>
<p>We post a variety of ideas and project's based around space and technology. Some of them include a hand held cheap computer, software to teach people about space and snapshot's of stellar and interstellar objects visible from our telescope. We
ask questions like "Why dont we have a robotic Mars colony?" and find an answer or solution. </p>
<p>
</p>
<p> </p>
<p>Find Out More</p>
</div>
<div class="grid_6">
</div>
The
<div id "rect1></div>
is the part that says draw a rectangle in the html code. How can I get it to draw the rectangle behind the text?
You can add
z-index: -1;
to the #rect1:
#rect1{
position: absolute;
width: 100px;
height: 100px;
background: #ffffff;
z-index: -1;
}
Fiddle
(You should probably also adjust the rectangle size to make it look better.)
If you really want to use absolute position, set its z-index to -1.
But I think you might just want to give the div or span that contains the text a different background and border instead of drawing a new div behind it.
<html>
<head>
<style>
#rect1{
position: absolute;
width: 100px;
height: 100px;
background: #eee;
z-index:-1;
}
</style>
</head>
<body>
<div class = "container_24">
<header>
<h1>Omicrome</h1>
<nav>
<ul>
<li><a href="# " class = selected>Home</a></li>
<li>Articles</li>
<li><a href="software.html">Projects</a ></li>
<li>About</li>
</ul>
</nav>
<div class = "banner grid_18" href="about.html">
View Article
<h2>
</h2>
</div>
<div class=" grid_8 callout"></div>
View Gallery
</header>
<div id = "rect1"></div>
<div class = "main clearfix">
<div class ="grid_9">
<h3>About The Site</h3>
<p>Here at Omicrome we are always coming up with new and innovative ideas for the future and for the present. These ideas are researched and expanded upon to make them a reality. View our ideas in the article section and see them come to life in the project section. Our many project's range from software to hardware, Huge build's to small and fun one day project's. We are all about space and technology...
<p>Find Out More</p>
</div>
<div class ="grid_9">
<h3>Our Content</h3>
<p>We post a variety of ideas and project's based around space and technology. Some of them include a hand held cheap computer, software to teach people about space and snapshot's of stellar and interstellar objects visible from our telescope. We ask questions like "Why dont we have a robotic Mars colony?" and find an answer or solution. </p><p>
</p><p> </p>
<p>Find Out More</p>
</div>
<div class ="grid_6">
</div>
</html>
Thats your code.. Moreover you can use bootstrap classes like well to separate your div text from the other content if you wish to.
I kept the background-color to be #eee so that you can see it. Edit it according to your need.
We want to add support for people with disabilities. So I read about it over the internet but did not get too much from there. I am not understanding when to use aria and when to use role attributes.
I have simple HTML with 3 columns. I have used role attributes in that and wanted to know what more can be done on this HTML for accessibility. Like if we want to use aria-labelledby and aria-describedby.
<div class="container">
<div class="partners clearfix">
<h2 role="My Content Heading">My Content Heading</h2>
<div class="row" role="partner type">
<div class="col-xs-12 col-sm-4">
<div class="partner__list text-center">
<div class="center">
<i class="service"></i>
<h2>Partner 1</h2>
<p>Partner 1 Description</p>
<div class="button-pos">
Learn More
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="partner__list text-center">
<div class="center">
<i class="tech"></i>
<h2>Partner 2</h2>
<p>Partner 2 Description</p>
<div class="button-pos">
Learn More
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="partner__list text-center">
<div class="center">
<i class="content"></i>
<h2 class="text-lg text-black text-ellipsis">Partner 3</h2>
<p>Partner 3 Description</p>
<div class="button-pos">
Learn More
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Two things immediately stand out that could be improved:
1) You're using what appears to be a font-icon that seems to have meaning that has no text alternative:
<i class="service"></i>
You can provide this with an aria-label property. In addition, I'd recommend using a span instead if <1>:
<span class="service" aria-label="service"></span>
2) The text in your links is repetitive and has no specific information about the link destination. Screen reader users often scan the links to get a feel for the page content and without the surrounding content this will be less useful that it could be ("learn more", "learn more", "learn more")
Learn More
I'd recommend adding specific information in the linked text rather than the generic "learn more":
Learn More about partner 1
Modified markup for one section:
<div class="container">
<div class="partners clearfix">
<h2 role="My Content Heading">My Content Heading</h2>
<div class="row" role="partner type">
<div class="col-xs-12 col-sm-4">
<div class="partner__list text-center">
<div class="center">
<span class="service" aria-label="service"></span>
<h2>Partner 1</h2>
<p>Partner 1 Description</p>
<div class="button-pos">
Learn More about Partner 1
</div>
</div>
</div>
</div>
</div>
</div>
</div>
This code snippet is already accessible. Most plain HTML doesn't need additional ARIA support. Text-to-speech software will just read through it in order, and keyboards can Tab to the links and press Enter to click them. ARIA is for when you have interactive widgets like tabs or calendars.
Role attributes are part of the ARIA specification. You don't need to make up values to describe your content, they should only be used from this list if they apply to what you're making.
You might also find this introduction to web accessibility article and the other resources on that website useful in learning more about it.
As stringy already pointed out, the code is already accessible. If you aren't using JavaScript to create UI elements, there is usually no need for WAI-ARIA roles or attributes.
I have just two comments about your code:
Why do you use a div around Learn More instead of a p? Screen readers can move between paragraphs, but div elements are meaningless, as far as I know.
If the partner descriptions are meant to look like a table, and especially if there will be regular row or column headers, you should use table markup instead of CSS-styled div elements. Regular table markup makes sense to a screen reader; styling div elements to look like a table results in a meaningless (i.e. from the point of view of a browser or a screen reader) code jumble.
As asked in the title, I am creating a website by using bootstrap v3.3.2.
The first question is that I am using the grid system to align the caption to the right of the thumbnail as shown below:
<div class="container">
<div class="thumbnail">
<div class="row">
<div class="col-md-6">
<a href="#">
<img class="img-responsive" src="images/pic.jpg">
</a>
</div>
<div class="col-md-6">
<div class="caption">
<h2>Title</h2>
<hr>
<p>A design specification provides explicit information about the requirements for a product and how the product is to be put together. It is the most traditional kind of specification, having been used historically in public contracting for buildings, highways, and other public works, and represents the kind of thinking in which architects and engineers have been trained.</p>
<hr>
<p class="caption-footer">
<span class="glyphicon glyphicon-heart"></span> Like it
<span class="glyphicon glyphicon-share"></span> Share it
</p>
</div>
</div>
</div>
</div>
</div>
Which turns out to be something like this:
As noticed, there is a large margin to the left of the image, which is not ideal. And when I resize the screen, it became more undesirable, with large margin to both side as shown below:
I think this may caused by the grid system since the col-md-6 has a fixed width. However I do not know how to fixe this.
The second question is that I try to align the two buttons to the bottom of the caption by adding a new class called caption-footer. However, this does not work.
Below is my CSS file for class caption-footer and how it turns out to be:
caption-footer{
position: absolute;
bottom:0;
left: 0;
}
I have checked quite a few links here (like: link1 link2). But none of them seems to work for my case.
Thanks in advance for any help!
One thing you can do simply place caption under col-md-12 div and buttons under another col-md-12 div.
<div class="container">
<div class="row">
<div class="col-md-6">
<a href="pulpitrock.jpg" class="thumbnail">
<p>Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.</p>
<img src="pulpitrock.jpg" alt="Pulpit Rock" width="284" height="213">
</a>
</div>
<div class="col-md-6">
<div class="col-md-12">
A design specification provides explicit information about the requirements for a product and how the product is to be put together. It is the most traditional kind of specification, having been used historically in public contracting for buildings, highways, and other public works, and represents the kind of thinking in which architects and engineers have been trained.
</div>
<div class="col-md-12">
Download
Images
</div>
</div>
</div>
</div>