Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am new to learning HTML, CSS, and coding in general. I plan on coding a Bootstrap grid system based page, but was wondering how to add this functionality to it. I want a dropdown informational panel to appear (as shown in green) whenever a thumbnail is clicked. I want to achieve this using only HTML and CSS and using least code as possible.
I'd appreciate any sort of help.
Excuse my limited vocabulary in this field. Don't know what to call the "informational panel".
I would recommend using Bootstrap grid system.
It's a great way to get started with the layout of your page. It is simple to use and adapt to your own needs.Their grid system is also responsive.
To get you started with your layout:
<div class="row">
<div class="col-md-2">Logo</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
</a>
</div>
</div>
<div class="row">
...
</div>
You get the trick...
You need to place the row within a container class for proper alignment. Again see Bootstrap grid system.
OK, the long and short is you are on the right path. HTML and CSS are technologies, while what you seek is an art. http://www.w3schools.com/. learn about the div tag.
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 months ago.
Improve this question
I'm double checking my code right now for an assignment. When I go to check, it says that it is violating nesting rules, but this is the only way I am able to get this bordered "view menu" button to link to a specific page I need. What is there wrong here?
The code is:
<div class="indexbody"></div>
<div class="img1"></div> <!--lantern.html image class-->
<a class="viewmenu" href="menu.html"> <!--Linking border text with href-->
<div class="menutext">
<span class="border ">
View Our Menu
</span>
</a>
</div>
Your closing </div> tag is in the wrong order. Try this:
<div class="indexbody"></div>
<div class="img1"></div> <!--lantern.html image class-->
<a class="viewmenu" href="menu.html"> <!--Linking border text with href-->
<div class="menutext">
<span class="border ">
View Our Menu
</span>
</div> <!--Out-of-order tag-->
</a>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 4 years ago.
Improve this question
I created a html page with a bootstrap but when I try to add responsive classes, they can not be seen on the case.
PS. Bootstrap is connected correctly
I tried this one:
<div class="row">
<div id="work1_1_over" class="col-sm-12 col-md-6 float-md-right float-lg-right"></div>
<div id="work1_2_over" class="col-sm-12 col-md-6 float-md-left float-lg-left"></div>
</div>
Screenshot
If you have included bootstrap.css in your HTML page then it should work properly. Check the below code snippet, for better convenience I have used the bootstrap class text-center.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
<div id="work1_1_over" class="col-sm-12 text-center col-md-6 float-md-right float-lg-right">some Content 1</div>
<div id="work1_2_over" class="col-sm-12 col-md-6 float-md-left float-lg-left">some Content 2</div>
</div>
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 5 years ago.
Improve this question
I read a post on stackoverflow about the way to put two div side by side. They suggest two different techniques and I wanted to know the best way to do it. You can read the post here. I tried to find by myself if there was another solution because they looked a little bit a weird to me. I found a third solution.
Do someone have any ideas about the best way to put two div side by side ?
Here are the three solutions that I found.
Solution 1
<div class="container">
<div class="row">
<div class="col-xs-6">
ONE
</div>
<div class="col-xs-6">
TWO
</div>
</div>
</div>
Solution 2
<table class="table table-condensed">
<td class="active">Place image here</td>
<td class="success">Place text here</td>
</table>
Solution 3
<div class="d-inline-block">one</div>
<div class="d-inline-block">two</div>
EDIT :
I maybe need to explain a little bit more my question. I would like to do a bootstrap card with a title on the left side of the header, and some action buttons in the right side. Using the third solution, I end up with something like this.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="card">
<div class="card-header">
<h3 class="card-title d-inline-block">title</h3>
<div class="float-right d-inline-block">
<button type="button" class="btn btn-sm btn-primary">action</button>
</div>
</div>
<div class="card-body">
<span>body</span>
</div>
</div>
Is it a good way to do this kind of things, or is there a better way ? For example the first solution, that a lot of people says that is the best one.
I'm learning bootstrap and I really want to know more about the best practices. Thus, I'm also interested in understanding for each solution, in what kind of context it's preferable to use one instead another.
Thanks for sharing your knowledge and for the time you allowed to this question.
I would recommend that you use the first solution, as it is the way the Bootstrap grid is intended to be used.
You can find more information about it here
Under the "How it works" section you have a set of rules/guidelines that you can refer to when using the Bootstrap grid, so that you get each tag/classname in the right order.
Further down the page you will find a lot of other useful information and examples on how to use the Bootstrap grid, and how utilize it correctly.
I'm pretty sure best practice would be solution 1 as that is one of the bootstrap examples..
It also works well for responsive design.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
Hi I hope someone can help me. I am relatively new to Bootstrap and I can get my head around the column layouts and how they work. However I've come to a problem when I want to create different columns at different heights.
I am trying to achieve the following layout:
The issue I have is trying to get tab3 in that position, I need it stacked below tab2. I managed to sort out tab5 and 6 by adding in a margin as labelled but thought this would be too messy for tab3.
bootply (thanks #Gorostas)
With regards to the grid system of bootstrap you can always make columns inside other columns.
Ill just show the top half since you have done the bottom half.
<div class ="container">
<div class ="row"> <!--Use a Row to keeps columns on the same line for the top half-->
<div class="col-md-8"> <!--Tab 1-->
</div>
<div class="col-md-2"> <!--Space for Tab 2 and 3-->
<div class="row"> <!--Row is not necassery when using 12 but I use them for smaller columns viewed on a smaller viewport-->
<!-- "col-md12" make use of all spacing of the grid that is available within the parent-->
<div class="col-md-12"> <!--Uses up full portion of the col-md-2 spacing-->
</div> <!--Tab 2-->
<div class="col-md-12"> <!--Uses up full portion of the col-md-2 spacing-->
</div> <!--Tab 3-->
</div>
</div>
<div class="col-md-2">
</div> <!--Tab 4-->
</div>
<div class="row">
<!-- Bottom half of tabs-->
</div>
</div>
http://www.bootply.com/wG58MwAews
If you are using the default Bootstrap 3 your grid will be 12 blocks horizontal. If you make a new col in a col it will break that column into 12 and position it relative to the grid system, http://getbootstrap.com/examples/grid/, you can break it down into another 12 blocks like in my example.Comment if you want a more detailed explanation, but this should do the job.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 8 years ago.
Improve this question
I've been using Bootstrap for some time now, structuring my HTML elements without really knowing if I'm doing it in a right way. It works but I would like to know if there is a better way of doing it.
Lets take this template for instance:
What I do first is that I try to divide the page into smaller pieces. In this case I would start by dividing the left and right column, giving the left column 4 and the right one 8 "columns". I would write and position the HTML/class attributes like this:
...
<div class="row">
<div class="col-md-4">
<div id="upperLeftCol" class="col-md-12"> ... </div>
<div id="lowerLeftCol" class="col-md-12">
<div id="uniqueId1" class="col-md-12">
<img src="#" alt="...">
<div class="col-md-12">
some messge
</div>
</div
<div id="uniqueId2" class="col-md-12">
<img src="#" alt="...">
<div class="col-md-12">
some messge
</div>
</div
</div>
</div>
<div class="col-md-8">
.......
</div
</div>
Well you get the picture. I try to divide each subsection as an own div and give it the col-md-12 class attribute since I've noticed it aligns best with the other div that has the same class annotation.
I'm sure there is a more correct way to do this. What is the "best" approach? Also when should I create a new "row"?
I prefer to use more rows:
<div class="row">
<div class="col-md-4">
<div class="row">
<div id="upperLeftCol" class="col-md-12"> ... </div>
The code is better to understanding for others persons and avoid some design errors when you are using dynamic cells.