This is my first website,my portfolio's URL https://sarthak-port.000webhostapp.com/Mportfolio.html
I have used webhost for free hosting.My problem is I did use bootstrap classes in my code but my page is not fully responsive to small screens.Can you guys suggest some ideas to do the same.
From watching it a little bit you use in the space "My Works" and the space My Profiles only classes col-xs-3 for each element. If you want your sections to rearrange in a responsive matter you should probably use classes like
class="col-lg-3 col-md-3 col-sm-6 col-xs-12"
This way in larger screen widths you should have four 4 elements in every row then in smaller screen widths only 2 elements in every row and finally in very small screens only 1 element in every row. By setting all elements to col-xs-3 you demand four elements in every row in all screens.
Furthermore for the last section your input fields don't use bootstrap classes to set to middle. One way would be to use
col-md-6 col-md-3-offset
This way you can send your input to center (3 grid cells empty+6 grid cells with your input and 3 grid cells empty again)
Else you could use something like this Twitter Bootstrap 3: How to center a block.
Bootstrap has many classes that you can use but it needs some digging.
Related
i have a Commercial Website Called Akaratak
In the Search Page in Mobile mode (after resizing the browser to the minimum)
there is a space left empty between some divs
as follows:
i know it must be a simple question but i couldn't get it to get aligned
As i can see you are using Bootstrap, but not in a proper way. You should change your layout to a 4 or 6 column one so the grid will auto adjust to a 2x2 layout as you want it.
Another thing that you can do is to make your layour like:
2x2
-1-
2x2
Using bootstrap classes you just need to add one class to the third object of each row making it sm-12 and the others sm-6. I suggest you to read more carefully Bootstrap grid system to use it the right way.
Instead you can use Bootstrap 4 grid system witch allow you to move and workaround your problem in a nice way.
You should remove the <div class="clearfix"></div> child on every <div class="deal-top-top"></div> parent :)
I'm designing a layout that will serve more like an individual dashboard for registered users. I made it simple, with a basic 2-column grid, one for the sidebar and one for the main content.
Because, like, 80% of the site usage will happen in a separated subsytem, accessed in a chrome-less window (that doesn't matter for the moment), there's not really much content for the right column, the main body.
So I would like to know if it's possible to make the sidebar a bit larger than the current col-md-2 (pairing with col-md-10), but the next level I'm aware of, col-md-3 is too large for a simple sidebar.
Is there a mid-term or an intermediary class for that?
Unfortunately there is not.
However, I've run into this situation a number of times and played with margins to get the size I needed. For example, If you changed col-md-10 to col-md-9 and then did a negative margin on the div inside col-md-2 you could extend your content outside of the grid structure. If done correctly, you wont have any problems. Keep in mind that the margin will need to be adjusted at all media queries. Hope this helps a little.
I am trying to use Bootstrap v4 (alpha 3) to create a responsive layout for a web application that i'm working on.
Everything works for the most part but what i'm really struggling with is reordering my cards using the push and pull classes. It was to my understanding that the push and pull classes reordered the cards when used correctly while the rest of the layout responded to the change of order as mentioned in the Grid system section of the docs under 'column ordering':
Easily change the order of our built-in grid columns with .push-md-*
and .pull-md-* modifier classes.
which can be found here: http://v4-alpha.getbootstrap.com/layout/grid/#example-column-ordering
However, when using these classes it seems to, instead of reordering the cards, just move them left and right (to the point where they can even overlap or go off screen, this functionality is also suggested by their css). This also implies that they have the exact same functionality as the offset functions, who's purpose is to move a card by x number of columns.
I have managed to get them working as expected in the past before, but have no idea how. So can someone please tell me what i'm doing wrong?
HTML:
<div class="container">
<div class="row">
<div class="card card1 col-lg-4 col-md-6"></div>
<div class="card card2 col-lg-4 col-md-6"></div>
<div class="card card4 col-lg-8 col-md-12 push-lg-4"></div>
<div class="card card3 col-lg-4 col-md-6 pull-lg-8"></div>
</div>
</div>
CSS:
.card{height: 150px;}
.card1{background-color:red;}
.card2{background-color:blue;}
.card3{background-color:green;}
.card4{background-color:yellow;}
JSFIDDLE:
https://jsfiddle.net/61yoqkjk/5/
The expected behavior is that at large sizes and higher, the green box will be moved up to be on the same line as the red and blue boxes. However, instead the green and yellow boxes swap places but there's now a gap to the right of the blue box where the green box could fit.
This has been tried with Bootstrap 3 as well so I don't think this is a bug.
I have also checked through other similar questions but none of their answers seem to fix my problem.
I think you might be misunderstanding, how bootstrap works. You want, that the elements some sort of "switch their position" by pulling/pushing them (which is very hard to achieve with css only). What bootstrap does, instead, is that the helper classes push-xx and pull-xx move the elements visually around. E.g. the code for pull-lg-8 is:
.pull-lg-8 {
right: 66.666667%;
}
...and this does NOT affect the other elements. Imagine, that the browser first calculates the layout box for each element by using properties like width, height, float, display, ... and afterwards, after every element has a certain place where it belongs, the relative positioned elements are visually moved to a different place (if right, top, bottom or left was used). From a structural point of view, they still take the same space, though and don't affect the other elements.
Therefore your yellow element (which is too big for the first line) is in the second row taking 2/3 of the space, whereas your green element has its box in the second row at the very right and is afterwards pushed 2/3 to the left.
I have a table which takes the whole screen width. In each table row, there is a Bootstrap 3 grid within a panel.
The problem is that the table column is too thick to contain my Bootstrap grid, and the result is this :
Here we see that the last button is overlapping the table row, going too far. But if I switch to my 24" monitor, there is no longer this problem since the screen is wider and therefore the table rows are wider too. It's the same if I remove some table rows, they will be wider and it will not overlap.
So my question is : is there a way to have a dynamic and fluid grid system which would automatically arrange the Bootstrap grid so it would not overlap ?
Here is a Codepen to illustrate the problem : codepen.io/anon/pen/BKZaWe
I would like the panels to have two buttons per row instead of crushing four together, but if we enlarge the table or remove some panels then it would show 3 or 4 buttons per row.
Have you tried: http://getbootstrap.com/css/#grid-example-fluid?
<div class="container-fluid">
<div class="row">
...
</div>
</div>
EDIT
I think I understand now (really hard from such a small screen shot and no code example).
The button(s) is wider than the column when in narrow viewports and you want that column only to remain wider.
Unfortunately, not how it's designed. Each column is a particular % of the full container width - nothing to do with the columns' content.
Depending on your browser support, Flexbox is the perfect solution here.
Otherwise, you will have to do something like:
<div class="col-sm-6 col-md-4"> <span> col 1 with buttons <span> </div>
<div class="col-sm-3 col-md-4"> <span> col 2 <span> </div>
<div class="col-sm-3 col-md-4"> <span> col 3 <span> </div>
To force the first column wider for the sm viewport.
two ways you can do it
1.give just call table responsive class for the table.
2.create an table using div with display: table, display: table-row, display: table-cell properties
http://www.html-cleaner.com/
I think it will do the trick for you.
Else share the code then i can look in deep into it
I have a question about what would cause the following error in bootstrap 3.
Earlier I was writing some HTML and using CSS to style and was using bootstrap 3 for the rows and the columns.
Now I had everything inside of a fluid container and the container had margins etc. It has a standard header, and each row was split into two columns where each size has a width of 6 ie col-lg-6 .... inside of the container and then I had labels and inputs inside of my rows. Just a basic layout.
Now, whenever I tried to give a bottom border to each row I noticed that after inspecting the element the row was actually outside of the designated
columns / div.
However, when I changed the class from row to row-fluid it works perfectly. Why is this? Also, I noticed that if I make a clear-fix div after using row-fluid it fixes some apparent spacing issues, is this a requirement when using row-fluid or is my code just messed up somewhere.
Asking, because I thought row-fluid was only a bootstrap 2 and not a 3 thing, or am I mistaken?
I would include a fiddle showing you exactly what I'm talking about, but don't have the code available atm.
TWBS-2
http://getbootstrap.com/2.3.2/scaffolding.html#global
TWBS-3
http://getbootstrap.com/css/#grid-intro
The <div> nested under your <div class="row"> carry the attributes container width dependent on viewport size, including all gutters and padding.
Comparing TWBS-2 and TWBS-3, TWBS-3's grid framework is designated as fluid for all viewport sizes. .row-fluid is not documented as an option, but I would refer to their version history for those specific changes. If the version history of the <div class="row-fluid"> applies, then the gutters and padding of its children's <div> columns becomes full-width to the size of the container rather than fixed-width as designated by the rules of the TWB-S3 grid system without .row-fluid designation.