Bootstrap colums 1-2 zonder spacing

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Solution Architect Real Estate - Visitor Experienc

Here’s a fantastic opportunity to showcase your technical expertise and make a real difference to our visitor experience at Shell. With every chance to stretch your solution architecture skills, working on cutting-edge projects. Where you fit You’re going to be part of our Global Real Estate business, working as a Real Estate Solution Architect for ‘Visitor Experience’ projects, with a focus on delivering solution designs across a varied and excited portfolio. This is both a challenging and rewarding role, where you’ll be helping to develop high-level designs that assure technical integrity and a measurable impact, driving performance and profitability, all

Bekijk vacature »

PHP Developer

PHP DEVELOPER PHP Developer – Product development – Amsterdam – Full time We are currently looking for a PHP engineer who wants to work in a problem-solving environment developing a scalable platform and keeping up with the advancements in current technologies. Working for an established business with a multi-product platform that is disrupting the education industry and reaching millions of active users every day, you will be helping students across the world further their own development. The Role itself: As a PHP Developer, you will be joining an already established team to scale out their existing products and help develop

Bekijk vacature »

Database Administrator

Assai is growing rapidly, resulting in more and extra work, such as implementations and training requests from our clients all over the world. We are therefore seeking an experienced consultant to join us in supporting this growth and helping to implement our software system and train the end-users worldwide. Our ideal candidate would be an experienced in document control, system implementations and in providing trainings. Responsibilities DBA Skills: Oracle 12c based; Create and manage multiple (standardized) databases (nearing 50 this year) in different servers (VM’s); Create and manage reliable backup strategies for all databases; Create and manage reliable and fast

Bekijk vacature »

Full-stack .NET developer

Organisatie Deze organisatie is gevestigd in de omgeving van Tilburg. Deze organisatie is een puur software huis voor developers, door developers. Er werken momenteel 10 personen en dit zijn allemaal developers! In 2010 is deze organisatie opgericht. Het is opgericht door twee heren die beide jarenlange ervaring als software developer hebben opgedaan. Beide directeuren programmeren nog 100% mee, simpelweg omdat dit hun passie is. Vanwege hun ervaring en kennis zijn ze een perfecte sparringpartnerspartners voor de developers. Er heerst een totale anarchie waar iedereen gelijk is in de vorm van een informele werkomgeving. Deze organisatie ontwikkeld maatwerksoftware voor diverse grote

Bekijk vacature »

Junior .NET Developer

Organisatie Je komt te werken in het meest toonaangevende digitale servicebureau uit Oost-Nederland. Zij zijn regionaal verantwoordelijke voor projecten die uiteenlopen van websites, webshops, webapplicaties, koppelingen en integraties maar bijvoorbeeld ook het meedenken met strategie ontwikkelingen, marketing en designs voor haar klanten. Functie Je komt te werken binnen een multidisciplinair scrumteam waarin jij samen met je teamleden aan allerlei verschillende projecten werkt. Het toffe van deze projecten is dat je continu in contact staat met de klant om een zo passend mogelijke oplossing te leveren. Klantcontact is dus een belangrijk deel van je wekelijkse bezigheden. Je bent tijdens je werk

Bekijk vacature »

Senior C# Developer

Organisatie: Voor een organisatie uit Den Haag ben ik opzoek naar een Senior C# .NET ontwikkelaar. De organisatie is er eentje van formaat. Zowel in grootte, maar ook in de bedrijfsvisie. Elk bedrijf heeft een restproduct. Is het je slager om de hoek, of je lokale Albert Heijn. Maar volgens deze organisatie zijn we te snel met het gebruiken van deze term. Wat voor de ene organisatie namelijk als afval word bestempeld, is voor een ander bedrijf een waardevolle grondstof. Oke dus even concreet. Al het afval wat we niet kunnen recyclen word vernietigd. Echter kan er veel meer uitgehaald

Bekijk vacature »

Full-stack developer

Wil jij werken aan razend slimme technologische e-commerce oplossingen voor bekende namen? Lees snel verder.. Organisatie Met ruim 20 jaar aan ervaring en meer dan 80 specialisten werken zij hier voor grote, leuke en bekende namen. Als marktleider zetten we samen met onze klanten de nieuwe standaard en daarom zijn we op zoek naar collega’s die de lat ook telkens een stukje hoger leggen. Het team van developers, digital designers, strategen en accountmanagers staat dagelijks weer paraat om retailers klaar te maken voor de digitale toekomst. Dagelijks zien en gebruiken meer dan 65 internationale retailers, 5.000 (online) stores, 50.000 medewerkers

Bekijk vacature »

Medior/Senior Back-End .NET Developer

Organisatie Ben jij een sociale en enthousiaste programmeur? Ben jij klantgericht en houd jij ervan om binnen een informele, maar prestatiegerichte organisatie te sleutelen aan verschillende standaardsoftwareproducten én tegelijkertijd een stuk maatwerk leveren? Waarbij je de mogelijkheid krijgt, waarvan zelfs verwacht wordt, dat jij actief mee denkt aan nieuwe modules of nieuwe mogelijkheden voor de software. Heb jij een goed idee? Dan mag je het uitvoeren! Het is een zeer ondernemende organisatie waarbij eenzelfde mindset gewaardeerd wordt. De organisatie kenmerkt zich door een platte organisatiestructuur met korte lijnen. De deur van de directeur staat ‘altijd open’ en er heerst een

Bekijk vacature »

Full stack .NET developer

De organisatie Dit bedrijf is ontstaan om een oplossing te bieden in HR en salarisadministratie. Wat altijd traag en lastig moest zijn, werd met hun software pakket ineens makkelijk, snel en vooral effectief! Inmiddels is de webapplicatie uitgegroeid tot meer dan 1 miljoen gebruikers en marktleider binnen hun sector. De software oplossing geeft de mogelijkheid om binnen de HR en salarisadministratie alles van A tot Z te kunnen beheren in één overzichtelijke applicatie. Innovatie en kwaliteit staan centraal in deze organisatie. Daar ligt dan ook hun onderscheidend vermogen. Door dit grote succes en bewezen resultaat op de markt, liggen er

Bekijk vacature »

.NET Developer bij een groep internetfanaten in Ar

Vacature Omschrijving Deze internetfanaten in het hartje van Arnhem zijn dringen op zoek naar versterking in de vorm van .NET developers. Bij deze organisatie staat de gebruiker altijd centraal. Vanuit verschillende disciplines wordt er hier keihard gewerkt aan o.a. het lanceren van websites en campagnes, volledig gericht op de behoeften van de verschillende doelgroepen. Samen met de opdrachtgevers worden ideeën uitgedacht waarbij details rondom websites en campagnes afgestemd kunnen worden. Of het nu gaat om het personaliseren van webpagina’s en producten of volledig nieuwe customer journeys aangevuld met landingpages en gericht op conversie. Deze organisatie heeft het allemaal in huis.

Bekijk vacature »

Medior Software Developer

Organisatie Voor een van PHIND’s business partners ben ik opzoek naar een Medior C# .NET Software Developer. Het betreft een bedrijf uit Zoetermeer die zich bezighouden met maatwerk oplossingen voor derden. Al ruim 10 jaar is het bedrijf marktleider in de webshop niche voor de tuinbouwsector. Deze organisatie bestaat uit ongeveer 30 FTE waarvan er 20 echt ontwikkelaars zijn. Die 20 ontwikkelaars zijn verdeeld over 2 SCRUM-teams van 10 software developers met verschillende kennis niveau. In totaal is er een mooie mix tussen talent en senioriteit. De leeftijden verschillen van 20 tot en met 38. In een open en ruim

Bekijk vacature »

Junior/medior/senior Frontend developer

Beeld je eens in dat jij vanaf je bureau mijlen ver om je heen kan kijken. Dit komt doordat jij werkt in een ruimte op de 14e verdieping die alleen bestaat uit glas. Je kijkt zo naar de Dom, het bos, het station en je kan zelfs de Johan Cruyff Arena in Amsterdam zien. Met dit prachtige uitzicht werken jullie aan een software pakket voor de gezondheidszorg. Jullie zijn er dan ook trots op dat jullie iedere dag weer iets kunnen betekenen voor veel verschillende patiënten. Doordat je werkzaam bent voor de gezondheidszorg werk jij nauw samen met psychologen en

Bekijk vacature »

Junior C# developer / nieuwste technieken /

In jouw studententijd heb jij altijd dat beetje extra gegeven. Was het geen honours class, dan waren het wel relevante commissies of was jij gewoon heel goed in wat je deed. Tijdens je studie Informatica heb jij laten zien dat jouw passie bij ICT ligt en dat je energie krijgt om hier met leeftijdgenoten over te sparren. Of dit nu binnen-, of buiten de studie was in de vorm van eigen projecten, voor deze functie ben ik op zoek naar een gemotiveerde starter die op zoek is naar een prachtige start van zijn carrière! Dit bedrijf is gelegen in hartje

Bekijk vacature »

Fullstack C# .NET Developer Mobile Applications

Functieomschrijving Wil je een verschil maken als .NET ontwikkelaar waar je in een relatief kleine organisatie werkt aan diverse uitdagende software oplossingen? Is een uitdagende baan in regio Apeldoorn je wens, waar jij jezelf verder kan ontplooien als .NET Developer met diverse focus gebieden zoals front-, back-end en mobile oplossingen? Klink dit interessant? Dan hoor ik graag van jou. Omgeving Je komt terecht in een team van 10 Developers, waarvan 7 zich dagelijks bezighouden met .NET Software projecten. Ze passen SCRUM toe in vele projecten. Op dit moment zijn bijvoorbeeld twee SCRUM teams bezig met het ontwikkelen van een tweetal

Bekijk vacature »

Start met het Java IT-traineeship en word junior p

Wat ga je doen? IT-traineeship bij YoungCapital NEXT In ons tweejarig Java IT-traineeship word jij opgeleid tot gecertificeerd Java programmeur mét praktijkervaring. Je start met een fulltime opleiding van zeven weken, gegeven door programmeurs uit de praktijk. Onderwerpen die worden behandeld zijn o.a. Java Fundamentals, Spring MVC, Scrum, databases, JavaScript en testing. Naast de theoretische verdieping word je individueel uitgedaagd met praktijkopdrachten. De opleiding sluit je af met een eindproduct en het behalen van het Oracle Certified Associate (1Z0-808)- en Scrum-certificaat. Jouw start bij de opdrachtgever Na de opleiding ga je aan de slag bij één van onze opdrachtgevers in

Bekijk vacature »

Pagina: 1 2 volgende »

Jan Graneker

Jan Graneker

05/10/2015 11:07:53
Quote Anchor link
Goedemorgen Allemaal,

Ben nog bezig met bootstrap en zit met het volgende:

[Colum1][spacing][colum2]

Nu wil ik graag [Colum1] en [colum2] tegen elkaar aan zetten, dus zonder de spacing. Ik er een standaard code om de spacing te verwijderen tussen beide?
 
PHP hulp

PHP hulp

23/09/2019 10:13:12
 
Ozzie PHP

Ozzie PHP

05/10/2015 11:12:05
Quote Anchor link
Waarschijnlijk even de margin naar o zetten in je css-bestand.
 
Jan Graneker

Jan Graneker

05/10/2015 11:22:21
Quote Anchor link
Ik heb het volgende gedaan:


[colum1] [colum2 style="margin:0; padding:0;"]

Nu heb ik nog 20px als spacing ipv 40.
Gewijzigd op 05/10/2015 11:45:25 door Jan Graneker
 
Ozzie PHP

Ozzie PHP

05/10/2015 11:24:39
Quote Anchor link
Dan geef je die column in je html een class, bijv. class="nospace" en dan in je css

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
.nospace {
  margin: 0;
}
 
Jan Graneker

Jan Graneker

05/10/2015 11:33:15
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="row">    
                <div class="col-lg-4 nospace">
                    <div style="height:552px; background-color:#77767b;">
                        <img src="images/gear_icon.png" class="img-responsive"/>
                            <div class="col-lg-11" style="margin-left:10px;">
                                <h1>Homepagina</h1>
                                <p>Dit is een tekst</p>
                            </div>    
                    </div>        
                </div>
                
            
            
                <div class="col-lg-8 nospace" >
                    <img src="images/homepage_img.jpg" class="img-responsive" alt="CNC machine" />
                </div>
            
</div>


De nospace wordt wel herkent, alleen gebeurd er niks.
Gewijzigd op 05/10/2015 11:50:10 door Jan Graneker
 
Ozzie PHP

Ozzie PHP

05/10/2015 14:40:04
Quote Anchor link
Dan zal je even een online voorbeeld moeten plaatsen. Kan er zo weinig van zeggen.
 
Pieter R

Pieter R

05/10/2015 14:52:03
Quote Anchor link
Of deze?
table {
border-spacing: 0px;
}
Gewijzigd op 05/10/2015 14:52:18 door Pieter R
 
Jan Graneker

Jan Graneker

05/10/2015 14:59:09
Quote Anchor link
Bedankt dat jullie de moeite willen nemen om te kijken. Dit is de eerste keer dat ik alles in BS probeer te zetten. Kom er alleen met de spacing niet uit.


Ik wil graag de afbeelding etgen het [homepagina] blok plakken. Wat is de beste manier?
Gewijzigd op 05/10/2015 15:23:59 door Jan Graneker
 
Ozzie PHP

Ozzie PHP

05/10/2015 15:16:58
Quote Anchor link
Verander nospace maar eens in dit:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
.nospace {
  padding: 0;
}
Gewijzigd op 05/10/2015 15:17:20 door Ozzie PHP
 
Jan Graneker

Jan Graneker

05/10/2015 15:26:26
Quote Anchor link
Ozzie PHP op 05/10/2015 15:16:58:
Verander nospace maar eens in dit:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
.nospace {
  padding: 0;
}


Bedankt Ozzie. Weet jij toevallig ook waarom margin:0 niet werkt en ik in plaats hiervan de padding moet gebruiken?
 
Ozzie PHP

Ozzie PHP

05/10/2015 15:37:01
Quote Anchor link
Margin is de buitenkant van je box. Padding zit in je box. Even op Google het verschil opzoeken tussen margin en padding ;)
 

05/10/2015 16:39:48
Quote Anchor link
@jan, kan je je algehele voorbeeld uitleggen of wellicht tekenen?
Ik werk dagelijks met Bootstrap en heb zelf soms ook wat dingetjes.

Wat wel belangrijk is is dat je het grid systeem van Bootstrap als richtlijn gebruikt en niet alles erop wilt zetten.

Bekijk deze websites, deze zijn met Bootstrap in elkaar gezet.
http://lemon-internet.nl
http://dezaal.nl
http://tvmoordrecht.nl
 
Jan Graneker

Jan Graneker

05/10/2015 17:01:47
Quote Anchor link
Rickert Bombaklats op 05/10/2015 16:39:48:
@jan, kan je je algehele voorbeeld uitleggen of wellicht tekenen?
Ik werk dagelijks met Bootstrap en heb zelf soms ook wat dingetjes.

Wat wel belangrijk is is dat je het grid systeem van Bootstrap als richtlijn gebruikt en niet alles erop wilt zetten.

Bekijk deze websites, deze zijn met Bootstrap in elkaar gezet.
http://lemon-internet.nl
http://dezaal.nl
http://tvmoordrecht.nl


Ik design bijna alles in de BS grid. Ook kom er aardig uit met de colums probeer niet veel op de spacing te zetten. Ik ben nu alles gebaseeerd op het LG-screen. Als je me zou willen uitleggen hoe ik nu goed alles kan aanpassen voor MD en S zou het super zijn.
Gewijzigd op 05/10/2015 17:03:41 door Jan Graneker
 
Joni Fleischer
Moderator

Joni Fleischer

06/10/2015 08:29:51
Quote Anchor link
Als het goed is heeft elke column een padding left en een padding right.
Er wordt gekeken of het de eerste of laatste column is. (:first-child of last-child).

Alles wat er tussen zit heeft dus links en rechts padding. (Geen idee hoeveel, maar ga uit van 40 px)

.col-lg-4:last-child {
padding-right: 20px;
}
.col-lg-4 {
padding: auto 0;
}
.col-lg-4:first-child {
padding-left: 20px;
}
 
Eschwin Moerkerken

Eschwin Moerkerken

06/10/2015 10:36:15
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
<div id="mySelector">
    <div class="row">
        <div class="col-md-6">
        ...
        </div>
        <div class="col-md-6">
        ...
        </div>
    </div>
</div>


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
#mySelector .col-md-6:first-of-type {
padding-right:0;
}

#mySelector .col-md-6:last-of-type {
padding-left:0;
}


Vergeet ze alleen voor mobiel niet weer op de standaard 15 pixels te zetten in je media queries, anders krijg je scheve kolommen onder elkaar ;).

Edit: Op deze manier kun je trouwens ook de spacing vergroten of verkleinen.
Gewijzigd op 06/10/2015 10:40:19 door Eschwin Moerkerken
 
Jan Graneker

Jan Graneker

06/10/2015 11:16:16
Quote Anchor link
Eschwin Moerkerken op 06/10/2015 10:36:15:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
<div id="mySelector">
    <div class="row">
        <div class="col-md-6">
        ...
        </div>
        <div class="col-md-6">
        ...
        </div>
    </div>
</div>


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
#mySelector .col-md-6:first-of-type {
padding-right:0;
}

#mySelector .col-md-6:last-of-type {
padding-left:0;
}


Vergeet ze alleen voor mobiel niet weer op de standaard 15 pixels te zetten in je media queries, anders krijg je scheve kolommen onder elkaar ;).

Edit: Op deze manier kun je trouwens ook de spacing vergroten of verkleinen.



Ik maak nu gebruik van alleen de col-LG om hem op de desktop goed te krijgen.
Stel dat ik een col-lg-12 heb. Kan ik deze dan voor de mobiel zo laten, of moet ik in dezelfde class een col-xs-12 meegeven?
 
Jan de Laet

Jan de Laet

06/10/2015 11:53:46
Quote Anchor link
Volgens mij kun je bij bootstrap werken van klein naar groot.
Wat je bij md opgeeft is ook geldig voor lg (tenzij het overruled wordt), wat je bij sm opgeeft is ok geldig voor md en lg, enz.
 

06/10/2015 12:08:08
Quote Anchor link
Jan, ik snap niet waar je heen wilt met je code of iets.
Normaal doe je met Bootstrap aangeven hoeveel kolommen je wilt hebben op een bepaalt formaat van het scherm.

col-lg-12 is 12 kolommen naast elkaar op een groot scherm
col-md-12 is 12 kolommen naast elkaar op een middel scherm

Als je nu met een mobiel of tablet naar de website zal gaan zullen de 12 kolommen onder elkaar weergegeven worden ivm het "mobile-first".

Als je op een mobiel ook naast elkaar wilt hebben zet je op dezelfde div col-xs-12, mits je wilt dan hij maar 6 kolommen naast elkaar is o.i.d dan geef je col-xs-6.

Na een paar keer vragen weet ik nog steeds niet wat Jan wilt bereiken...?

Je hoort normaliter de padding o.i.d van Bootstrap niet aan te passen.
 
Eschwin Moerkerken

Eschwin Moerkerken

06/10/2015 12:10:05
Quote Anchor link
Als je hem alleen een col-lg-12 meegeeft, zal hij altijd 12 kolommen breed zijn op kleinere devices (dus MD, SM en XS). In jouw geval geef je hem 12 kolommen mee (100%) dus maakt het in dit geval niets uit.

Stel je hebt twee kolommen naast elkaar van col-lg-6 en je zou die op een kleiner scherm (laptop bijvoorbeeld) ook naast elkaar willen hebben (mits er ruimte is) dan zou je ook een col-md-6 moeten toekennen en zou je in principe de col-lg-6 kunnen weg laten.

Zoals Jan de Laet al zei, je kan van klein naar groot werken. Dus heb je iets kleins gespecificeerd dan zal de grote deze altijd overnemen.

Stel je maakt gebruik van een col-md-6 dan zal deze op zowel MD ans LG 6 kolommen zijn, daar onder (SM en XS) 12 kolommen (standaard).

Toevoeging op 06/10/2015 12:12:47:

Rickert Bombaklats op 06/10/2015 12:08:08:
Je hoort normaliter de padding o.i.d van Bootstrap niet aan te passen.


Deze kun je prima aanpassen. De 15 pixels per kolom die zij hanteren is standaard.
Als je precies weet wat er gebeurd als je ze aanpast en wat de .row dan doet dan zou je dit zonder problemen prima kunnen aanpassen als je meer ruimte nodig hebt.

Normaliter zou je ook .col-md-offset-1 kunnen gebruiken bijvoorbeeld. Helaas is dat soms net weer iets teveel ruimte. Nadeel daarvan is dat je dan met 11 kolommen werkt in plaats van 12.
 
Randy vsf

Randy vsf

06/10/2015 12:40:47
Quote Anchor link
Eschwin Moerkerken op 06/10/2015 12:10:05:

Normaliter zou je ook .col-md-offset-1 kunnen gebruiken bijvoorbeeld. Helaas is dat soms net weer iets teveel ruimte. Nadeel daarvan is dat je dan met 11 kolommen werkt in plaats van 12.


.col-md-offset-1 haalt aan allebei de kanten 1 eraf.
Je houd dus 10 kolommen over.
 
Eschwin Moerkerken

Eschwin Moerkerken

06/10/2015 13:06:58
Quote Anchor link
@randy je weet kennelijk niet wat een offset inhoudt. Een offset betekent dat iets wordt overgeslagen. Dus er wordt een kolom over geslagen.

Toevoeging op 06/10/2015 13:14:50:

@Jan Graneker: http://codepen.io/anon/pen/dYWRbr
 

Pagina: 1 2 volgende »



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.