I am working on a Bootstrap based form and struggling to get things to position properly.
I am trying to create a form consisting of labels/prompts and textboxes. The problems that I have with my code are
the label column (col-3) is too wide and reducing it to col-2 is too narrow. But I would like to make it narrower than what it is now.
the textboxes in the textbox column (col-4) are the same length but it does not matter what their class is, they don't get any wider. I would like them all wider.
not sure if I need col-5
I want the controls vertically middle within the row. They look like they are aligned to the top.
I have tried different classes and controls and cannot get something to work. This code will be put in a ASP.Net MVC project which is what the #Html.TextBoxFor is for, but I don't think this is an issue.
<div class="container">
<div class="row" style="height:38px">
<div class="col-3">Label 1:</div>
<div class="col-4">#Html.TextBoxFor(m => m.Textbox1)</div>
<div class="col-5"></div>
</div>
<div class="row" style="height:38px">
<div class="col-3">Label 2:</div>
<div class="col-4">#Html.TextBoxFor(m => m.Textbox2)</div>
<div class="col-5"></div>
</div>
</div>
Bootstrap 4 actually has column management here: https://getbootstrap.com/docs/4.3/layout/grid/
Specifically, col-sm-,col-md-,col-lg tags should assist you in choosing one thats the proper size
I am trying to make something like this in React. I have a dynamic array of locations and want to make it responsive. If the number of locations can't fit in one row then display show more with the number of remaining locations. If I change browser width it should display a responsive array.
<section class="thumbnails">
<span>Home</span>
<span>Blog</span>
<span>News</span>
<span>Portfolio</span>
<span>Team</span>
<span>Mission</span>
<span>Location</span>
<span>Forum</span>
<div class="thumbnails__count">
<p class="thumbnails__count-text">
+<span class="thumbnails__count-value"></span> more items
</p>
</div>
</section>
Thank you
I'm a super, super noob and need your help.
What I'm trying to achieve is layout kinda flexible in a column but still in rows, like on a picture below, there are 3 rows, each in a different color. I tried 3 rows as well as 1 row, doesn't make a difference.
Ok, so I got 9 columns, each one takes 4 spaces. And I tried to move the middle picture in a green row to the middle column of the pink one. Didn't work out, I mean it did but the other pictures got messed up. I also tried the .clearfix.
Hope you can help guys, cheers!
What you are trying to achieve is called a Masonry Layout.
You cannot distribute your layout by rows, you have to do it using columns.
Everything should be inside a .row div, and have the number of columns you need (in your image case, you need to use .col-md-4).
Then you should add everything to those three columns dynamically, using Javascript or the technology you are using (you can achieve it also on PHP or so on, I'll edit if you need help on that).
Also, I recommend you using Bootstrap 4, as it contains a new feature called Cards Columns which is designed for what you are trying to achieve:
https://v4-alpha.getbootstrap.com/components/card/#card-columns
Bootrstap has different classes to achieve this.
Primarily,
<div class="row">
And
<div class="col">
The row class defines the row, and the col class defines the column.
You specify the columns by col-1, col-2, col-3 as an example, all the way up to col-12. If you don't defined the col size, it will automatically fill out as much space as possible, up the size of col-12.
There are tons of nested classes to alter the behavior as well, such as text placement within the elements etc.
This row and column system is also fully responsive.
Read more here.
If you can't achieve the desired result by using bootstrap rows and cols,
try using flexbox instead. More info here.
you can use the nav bar for the upper position but bootstrap doesnt provide classes to break the columns into rows rather it provides to break the rows into columns only.you have to use html css and jquery here.
You won't be able to align top->bottom fashion with bootstrap. The only method I could find which can provide appealing result is the DeSandro's masonry library (https://masonry.desandro.com/) if you are restricted to Bootstrap 3. In case you can use Bootstrap 4 cards (card columns) can provide some features or you can also look at isotope by DeSandro.
But staying with the mentioned masonry plugin:
<div class="container">
<div class="my-card col-lg-4 col-md-4 col-sm-4">
Content 1
</div>
<div class="my-card col-lg-4 col-md-4 col-sm-4">
Content 2
</div>
<div class="my-card col-lg-4 col-md-4 col-sm-4">
Content 3
</div>
<div class="post-box col-lg-4 col-md-4 col-sm-4">
Content 4
</div>
<div class="post-box col-lg-4 col-md-4 col-sm-4">
Content 5
</div>
<!-- ... -->
</div>
and JavaScript:
$(document).ready(function() {
var $container = $('.container');
$container.masonry({
itemSelector: '.my-card',
columnWidth: '.my-card',
transitionDuration: 0
});
});
I created a page using a square filler image but when it came time to change it to the actual image I needed, when I switched to the new file, it affected the spacing and responsiveness of a section situated to the left of it. I keep switching back to the filler image and the problem goes away. I even made the replacement the same dimension of the filler image, and it didn't seem to do anything. I've never seen a problem like this before as both images are square.
https://jsfiddle.net/jmbv61dv/ I'm trying to replace the image in the first figure "far-alone.png" ...Its affecting the "side-logo.png" directly to the left..there are media queries in there as well but I don't think they have much to do with it
Also to add, the "far-alone.png" image file was really big, like 10X10 inches and around a meg in size. The new image I wanted to replace it with was a fraction of the file size, around 33k.
<div id="sidebar">
<div id="sidelogo">
<a href src="index.html"><img src="assets/images/side-logo.png" alt="Aztech Records logo."></a>
</div>
<div id="dropdown">
<button id="menu">☰</button>
<nav>
Home
Our Story
Artists
Releases
Connect
</nav>
</div>
</div>
<div id="content">
<figure>
<figcaption><span id="headline">RELEASE:</span> FORTE - LOUDER</figcaption>
<img src="assets/images/far-alone.png" alt="FORTE - LOUDER">
<h3>Forte dives deep and dark with this minimal 170 BPM masterpiece.</h3>
<a id="soundcloud" href="http://soundcloud.com/">SOUNDCLOUD</a>
<a id="spotify" href="http://spotify.com/">SPOTIFY</a>
</figure>
I have an audio clip that plays through once and then the 'Play' button is disabled so that it can't be played again. The only problem is the scrollbar is clickable so that the user can go back to the beginning or forwards which is not the desired process as they should only be able to play it once.
Is there a way of preventing a user from clicking on the blue progress bar as per the image below?
Thanks
There is a div on top of the progressbar with the the class "jp-seek-bar".
It is this div which makes the progressbar scrollable.
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
So you simply need to remove this div. The progress itself will still be visible.
<div class="jp-progress">
<div class="jp-play-bar"></div>
</div>
Another solution is to unbind the event-listener binded to the jp-seek-bar div.