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 7 years ago.
Improve this question
I have the following layout. I can't use navbar, so instead I used the Grid system and gave it background.
How can I make this layout responsive? How can I leave spaces between the divs inside my container (e.g. searchbox)? Are there any helper classes in the Bootstrap framework that allow me to achieve this?
You can add margin to the <div> tags inside a container or row, but Bootstrap was designed for responsive web apps. So unless you come up with a way of defining your margins not as literalls, but based upon the screen size, it won't be as reponsive as you might wish it to be. Also, please avoid altering the margin of something with the class container, row or col
My recommendation. On the div with col-lg-7 or whatever the number might be, include another row, so that you can organize the layout in whatever way you need. If you want to leave a certain space betweeen elements, use 'col-lg-offset-x' according to your needs; with 'x' being the amount of spaces you want between elements. This will too sum up to 12.
Let me give you an example
<div class="row">
<div class="col-lg-2">
<!--Whatever you want to include here-->
</div>
<div class="col-lg-3">
<!--Whatever you want to include here-->
</div>
<div class="col-lg-7">
<div class="row">
<div class="col-lg-offset-2 col-lg-4">
<!--Whatever you want to include here-->
</div>
<div class="col-lg-offset-1 col-lg-5">
<!--Whatever you want to include here-->
</div>
</div>
</div>
</div>
You will need to add the col-md-x, col-sm-x and col-xs-x classes to fit your needs.
I hope it helps.
Related
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 4 months ago.
Improve this question
Here for an example:
<div class="container">
<!-- First child element -->
<!-- Second child element -->
</div>
or:
<div class="container">
<!-- First child element -->
</div>
<div class="container">
<!-- Second child element -->
</div>
Now I want to know is it better to have only one parent .container or every element should have its own .container?
I am learning the bootstrap 5 and I wanna know what is a better approach to use container because in bootstrap you need a wrapping container.
Personally i would put a container around each of my main components on the site rather than the site as a whole. This would allow sections to breakout from the container if need be. for example:
<div class="container">
contained
</div>
<div class="container-fluid">
full width
</div>
<div class="container">
contained
</div>
This would not be easily achievable if all elements were wrapped in a single container.
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 8 months ago.
Improve this question
I am currently making a page with flexboxes, and when it comes to adding text areas, I wonder if I should make a new container for each text area or is it not the way to do ?
Let's say I have the following code for my page:
<div class="flex-container">
</div>
Should I do this :
<div class="flex-container">
<div class="containertextarea1">
<p> text area 1 </p>
</div>
<div class="containertextarea2">
<p> text area 2 </p>
</div>
<div class="containertextarea3">
<p> text area 3 </p>
</div>
</div>
Or something else?
Thank you
If you need columns in your flex-container you can use flexbox. I mean something like this. from your code I think you can use directly in flexbox. that will reduce DOM size.
Here is the CSSTrix Link for a better understanding of FlexBox
As we know flexbox is a one-dimensional layout model, then until and unless you don't want these text areas to be spread in two dimensions(like in both column and row) then I think putting all text areas in one container is fine.
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
I have been examining THIS this for a while and decided to test on it. If you scroll lower, you'll find a section that mentions 'High quality'.... I have made a similar div, and want to do something similar, but each time it turns out like THIS (ignore the golden colour) - What might the code be to fix this small issue?
By align, I assume you mean float. If you look at their markup, you'll see that they're using Bootstrap and the alignment is handled using its in-built Grid System, for example:
<div class="row">
<div class="col-sm-4 col-lg-4 column"></div>
<div class="col-sm-4 col-lg-4 column"></div>
<div class="col-sm-4 col-lg-4 column"></div>
</div>
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 have a webpage which can be found at www.navinmistry.co.uk.
I want this page to display all the content in any screen size.
at the moment it is set in pixels, would this be a case of changing it percentages instead?
For all elements to be shown "good" in any size browser window I suggest using twitter bootstrap, than you just use Grid Layout system and put element according to it:
<div class="row-fluid">
<div class="col-xs-5">Width = 100 / 12 * 5</div>
<div class="col-xs-7">Width = 100 / 12 * 7</div>
</div>
yes, make it 100% width.
Using percentages would accomplish this.
Using percentages you could achieve a nice display on any screen, but this is fairly hard to do. For example what do I do if the screen is too small to display all the menus on the top, (on a phone for example) ?
Hopefully some css frameworks exist to make your life easier ! : )
For example you could try to use bootstrap
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
this is my second project on bootstrap still I'am not enough familiar with it.
I don't post my codes here and I will give you the url to the testing site. I think it is not a wrong thing to do.
the problem in the site is when I'am re sizing the window width all the text boxes are re sizing like responsive sites. but the thing the height.
my english is not good enough to explain the thing very well. so please try minimizing the browser window. then you will understand my issue.
and the marquee area also having some issues.
enter link description here
Instead of having all equal width like your present code
<div class="col-xs-6 col-md-6 col-sm-6 thumbnail mybox1"> Computer Courses </div>
You can modify the width when the browser width decreases like
<div class="col-xs-4 col-md-6 col-sm-4 thumbnail mybox1"> Computer Courses </div>
This will result in having 6columns in normal screen and 4columns in smaller screens, u can change the columns by trial and error and check which suits best